人们经常想在 Raphael 中使一组对象可拖动,但.transform()
这样做可能会让人抓狂。假设你是这样开始的:
var paper = Raphael(0, 0, 500, 500);
var set = paper.set();
set.push(paper.circle(100,100,35), paper.circle(150,150,15));
set.attr("fill", "orange");
set.data("myset", set);
set.drag(
function(dx, dy, x, y, e) {
this.data('myset').transform("T" + dx + "," + dy);
},
function(x, y, e) {},
function(e) {}
);
如果你试试这个,你会看到它工作一次。但是,如果您拖动、停止,然后再次拖动,它会将位置重置为相对于原始位置的 0,0,正如您对.transform().
No good 所期望的那样。
此处已触及此问题的一个变体,受访者建议在转换前添加“...”。这一切都很好,但有两件事:
- 您仍然必须跟踪以前的位置,因为您不想在每次调用 时按 (dx,dy) 进行翻译
dragmove
,这会使对象飞出屏幕。 - 如果一个对象被多次拖动,我担心会创建一个怪物变换。(虽然也许我不应该。)
我的暂定解决方案是在另一个键/值对中跟踪与原始位置的偏移量,如下所示:
var paper = Raphael(0, 0, 500, 500);
var set = paper.set();
set.push(
paper.circle(100,100,35),
paper.circle(150,150,15)
);
set.attr("fill", "orange");
set.data("myset", set);
set.data("position", [0,0]);
var current_position = [0,0];
set.drag(
function(dx, dy, x, y, e) {
this.data('myset').transform("T" + (this.data("position")[0] + dx) + "," + (this.data("position")[1] + dy));
current_position = [dx,dy];
},
function(x, y, e) {
},
function(e) {
this.data('myset').data("position", [
this.data("position")[0] += current_position[0],
this.data("position")[1] += current_position[1]
]);
}
);
您可以在这里看到它的实际效果。
它有效,但感觉非常草率。我一定遗漏了一些明显的东西,对吧?