在拉斐尔.js和缩放中拖动约束
drag constraints in raphael.js and zoom
我使用 PAN 获得 Raphael.js 2.0 的基本缩放/平移效果没有问题:
set = ( // set of elements, contained in a rectangle)
var start = function () {
set.oBB = set.getBBox();
},
move = function (dx, dy) {
var bb = set.getBBox();
set.translate(set.oBB.x - bb.x + dx, set.oBB.y - bb.y + dy);
},
up = function() { // do stuff };
set.drag(move, start, up);
和缩放 :
//before
paper.setViewBox(0,0, 500,500, false);
//after
paper.setViewBox(0,0, 200, 200, false);
但是我有两个大问题。这是针对拉斐尔创建的 svg 对象,而不是图像...
- 首先,缩放后平移并不"平滑":我拖动了一点,矩形移动了很多。我走得越远,运动就越糟。缩放后,我可以以某种方式缩放拖动吗?
- 其次,如何排列以使平移缩放的矩形不允许将其移出视口?在 jquery 中,我可以使用约束来做到这一点,并且我已经尝试使用上面的 set.translate 函数来包含约束,但我一无所获......
任何建议将不胜感激,或者已经存在一个图书馆在拉斐尔.js中这样做?我看了 raphael-spz,它似乎没有解决我上面的任何问题。
我想要的基本上是这个 http://dannyvankooten.com/demo/draggable-image-map-with-zoom/,但对于拉斐尔。他正在使用jquery ui draggable...我似乎无法在拉斐尔工作。
谢谢!
因为您已经缩放了视图框,所以您可能还需要缩放拖动值,在计算边界时,您可以与视口进行比较,例如,
move = function (dx, dy) {
var bb = set.getBBox(),
//Move relative to viewport scale
x = dx/scale,
y = dy/scale,
//Lower bounds
xf = Math.max(0, set.oBB.x - bb.x + x),
yf = Math.max(0, set.oBB.y - bb.y + y);
//upper bounds
xf = Math.min(viewBoxWidth, xf + bb.width) - bb.width;
yf = Math.min(viewBoxHeight, yf + bb.height) - bb.height;
set.translate(xf, yf);
}
scale
是您的视框相对于您的论文不同的因素。 即( 200/500)
相关文章:
- 当我在节点上拖动鼠标时,我如何防止使用d3.ehavior.zoom().on(“缩放”,重绘)
- d3.js:在强制布局中使用缩放时,将禁用拖动
- 可缩放容器鼠标上的可拖动元素在创建时从辅助对象上浮动
- 如何使用d3's流星项目中的刷洗/拖动/缩放行为
- JavaScript 图像缩放和平移(拖动)
- 缩放/动画 jQuery 拖放到可拖放时可拖动
- 在 raphael js 中缩放/拖动矩形
- 在拉斐尔.js和缩放中拖动约束
- 为什么HTML5拖放拖动图像在隐藏时不显示
- Sencha 触摸变换(缩放)面板在拖动启动时重置变换
- 使用鼠标向下拖动以缩放图像缩略图
- 缩放、拖动和旋转时的图像定位
- 在边界框内拖动和缩放图像
- 无法通过在d3系列图表上拖动矩形来进行缩放以正常工作
- 当缩放画布然后平移时,现在如果我试图在画布内拖动对象,则无法拖动.但画布只是平移
- 如何在缩放图像/对象后在画布中拖动它们
- Fancybox缩放拖动不起作用
- 如何实现与seatgeek相同的可缩放可拖动界面
- d3.js散点图-缩放/拖动边界、缩放按钮、重置缩放、计算中值
- D3js缩放/拖动在我的代码中不再工作(+代码示例)