Question

人们经常想在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) {}
);

如果你try this out，你会发现它有效。但是如果你拖动，停止，然后再次拖动，它会将位置重置为相对于原始位置的0,0，正如你期望.transform().没有好处。

here触及了这个问题的一个变体，并且受访者建议在变换前加上“......”。这一切都很好，但有两件事：

你仍然需要追踪以前的位置，因为你不想这样做在dragmove的每次通话中翻译（dx，dy），这将发送物体飞离屏幕。
我担心创造一个怪物如果拖动对象多次，则转换。（虽然也许是我不应该。）

我的初步解决方案是跟踪另一个键/值对中原始定位的偏移量，如下所示：

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]
        ]);
    }
);

您可以在行动here中看到它。

它有效，但感觉非常邋..我一定错过了一些明显的东西，对吧？

Answer 1

我的回答类似于您的上一个变体：

var onmove = function (dx,dy){
    this.transform(this.default_transform+'T'+dx+','+dy); 
},
  onstart = function (){
    this.default_transform = this.transform();
},
  onend = function(){
    this.default_transform = this.transform();
};

set.drag(onmove, onstart, onend);

不要担心它不会创建很长的转换线，因为Raphael会将所有内容转换为一个完整的矩阵转换，因此每次移动对象时它都不会累积。

如何在Raphael中正确制作可拖动的套装

1 个答案: