我有以下用于在Raphael中拖动形状的代码:
var start = function() {
this.ox = 0;
this.oy = 0;
self.bringToFront();
},
move = function(dx, dy) {
var a = self.getAngle(self.rotation),
bb = self.shape.getBBox();
switch(a){
case 90:
self.shape.translate(dy - this.ox, this.oy - dx);
this.ox = dy;
this.oy = dx;
break;
case 180:
self.shape.translate(this.ox - dx, this.oy - dy);
this.ox = dx;
this.oy = dy;
break;
case 270:
self.shape.translate(this.ox - dy, dx - this.oy);
this.ox = dy;
this.oy = dx;
break;
default:
self.shape.translate(dx - this.ox, dy - this.oy);
this.ox = dx;
this.oy = dy;
}
},
end = function() {
};
(self.shape
是拉斐尔的一套路径和路径)
我试图得到它,所以你不能将形状拖出SVG画布区域。现在我能够获得形状边界框的坐标{{1 bb
函数中的变量。我试图为move
添加一个检查,但我不知道如何设置约束来说:“不要让它向左移动”。我正在检查if(bb.x < 10)...
对于边界框的位置,然后尝试约束形状的x
位置,这是一个问题吗?
答案 0 :(得分:2)
这本身不是答案,但应该指向正确的方向。
查看drag
的raphael 2.0参考它旁边的图像几乎完全符合您的要求。其背后的代码位于reference.js文件中。如果您搜索“Element.drag-extra”,您将看到这段代码
(function (r) {
var x, y;
r.circle(15, 15, 10).attr(fill).drag(function (dx, dy) {
this.attr({
cx: Math.min(Math.max(x + dx, 15), 85),
cy: Math.min(Math.max(y + dy, 15), 85)
});
}, function () {
x = this.attr("cx");
y = this.attr("cy");
});
})(prepare("Element.drag-extra"));
在这里,德米特里将阻力限制在最小15和最大85像素之间。应该可以使用一点DOM魔术来查找画布的大小并相应地修改上面的代码。
希望有所帮助。