小tips：zoom和transform：scale的区别 00 张鑫旭前端之路

来源：蜘蛛抓取(WebSpider) 时间：2017-04-22 12:38 标签： 张鑫旭前端之路
网页设计教程子分类一、缩放要求
1.缩放对象在可视区域内，已对象的中心点进行缩放。
2.缩放对象比可视区大，并且对象各边界都在可视区外围，那么已鼠标位置进行缩放。
3.缩放对象比可视区大，但是缩放后某一边界在可视区的对应边界内，那么该边界与可视区边界对齐，对向缩放。
二、缩放代买片段
private void Window_MouseWheel(object sender, MouseWheelEventArgs e) {
if (e.Delta == 0) return;
double d = e.Delta / Math.Abs(e.Delta);
if (_scaleValue & 0.5 && d & 0) return;
if (_scaleValue & 20 && d & 0) return;
_scaleValue += d * .2;
//获取鼠标在缩放之前的目标上的位置
Point targetZoomFocus1 = e.GetPosition(target);
//获取目标在缩放之前的Rect
Rect beforeScaleRect =
target.RenderTransform.TransformBounds(new Rect(target.RenderSize));
//缩放的中心点为左上角（0,0）
scaler.ScaleX = _scaleV
scaler.ScaleY = _scaleV
//获取鼠标在缩放之后的目标上的位置
Point targetZoomFocus2 = new Point(targetZoomFocus1.X * (1 + d * .2), targetZoomFocus1.Y * (1 + d * .2));
//获取目标在缩放之后的Rect
Rect afterScaleRect = target.RenderTransform.TransformBounds(new Rect(target.RenderSize));
//算的缩放前后鼠标的位置间的差
Vector v = targetZoomFocus2 - targetZoomFocus1;
if (afterScaleRect.Size.Width &= _viewportSize.Width) {
//缩放之后居中
double widthHalfDelta = (Container.RenderSize.Width - afterScaleRect.Width) / 2;
translater.X = widthHalfD
else if (afterScaleRect.X - v.X & 0) {
//目标左边界与可视左边界对齐
translater.X = 0;
else if (afterScaleRect.X + afterScaleRect.Width - v.X & Container.RenderSize.Width) {
//目标右边界与可视右边界对齐
translater.X = Container.RenderSize.Width - afterScaleRect.Size.W
//减去鼠标点在缩放前后之间的差值，实际上就是以鼠标点为中心进行缩放
translater.X -= v.X;
if (afterScaleRect.Size.Height &= _viewportSize.Height) {
double heightHalfDleta = (Container.RenderSize.Height - afterScaleRect.Height) / 2;
translater.Y = heightHalfD
else if (afterScaleRect.Y - v.Y & 0) {
translater.Y = 0;
else if (afterScaleRect.Y + afterScaleRect.Height - v.Y & Container.RenderSize.Height) {
translater.Y = Container.RenderSize.Height - afterScaleRect.Size.H
translater.Y -= v.Y;
http://download.csdn.net/download/kongxh_
阅读(...) 评论()9563人阅读
D3.js（66）
缩放（Zoom）是另一种重要的可视化操作，主要是使用鼠标的滚轮进行。1. zoom 的定义缩放是由 d3.behavior.zoom() 定义的。
var zoom = d3.behavior.zoom()
.scaleExtent([1, 10])
.on(&zoom&, zoomed);
function zoomed() {
circles_group.attr(&transform&,
&translate(& + d3.event.translate + &)scale(& + d3.event.scale + &)&);
}第 2 行：scaleExtent 用于设置最小和最大的缩放比例第 3 行：当 zoom 事件发生时，调用 zoomed 函数第 5 - 8 行：zoomed 函数，用于更改需要缩放的元素的属性，d3.event.translate 是平移的坐标值，d3.event.scale 是缩放的值。2. 绘制圆与【】一样，绘制两个圆用于测试。只是将圆 circle 元素添加到一个组 g 里，g 元素调用 call(zoom)，zoom 为刚才定义的缩放行为。
var circles_group = svg.append(&g&)
.call(zoom);
circles_group.selectAll(&circle&)
.data(circles)
.append(&circle&)
.attr(&cx&,function(d){ return d. })
.attr(&cy&,function(d){ return d. })
.attr(&r&,function(d){ return d.r; })
.attr(&fill&,&black&);3. 结果结果如下，在圆上滑动鼠标滚轮试试：源代码单击以下链接后查看：谢谢阅读。文档信息版权声明：署名（BY）-非商业性（NC）-禁止演绎（ND）发表日期：2014 年 12 月 28 日更多内容： 和 备注：本文发表于
，转载请注明出处，谢谢
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：632377次
积分：7137
积分：7137
排名：第2660名
原创：120篇
转载：28篇
评论：226条
Learning D3.js 专题：
工作室主页：
《精通 D3.js》是一部关于 D3.js 的百科全书式的图书。从初级到高级的教程，零基础初学者亦适合。
文章：13篇
阅读：61018
文章：20篇
阅读：127654
文章：25篇
阅读：251684
(3)(3)(6)(6)(2)(1)(2)(1)(1)(1)(1)(7)(2)(4)(5)(4)(7)(7)(6)(4)(6)(7)(7)(6)(3)(2)(2)(1)(3)(3)(1)(1)(2)(11)(1)(1)(1)(3)(1)(4)(1)(1)(1)(2)(4)(3)

我要回帖

更多关于 张鑫旭前端之路 的文章

 

随机推荐