在 RaphaelJS 中优化设置拖放答案

【问题标题】：Optimizing Set Drag and Drop in RaphaelJS在 RaphaelJS 中优化设置拖放
【发布时间】：2013-09-21 13:57:20
【问题描述】：

因此，当集合中的某些元素对它们发起了拖动事件时，我尝试使用翻译并调用集合上的拖动事件。但它有点慢。有谁知道如何优化以使其更快？

这是我使用的函数

function dragsymbolsoncanvas(foo){//foo is the set passed. 
function dragger(){
    this.dx = this.dy = 0;
};
function mover(s){
    return function(dx, dy){
        (s||this).translate(dx-this.dx,dy-this.dy);
        this.dx = dx;
        this.dy = dy;
    }
};
foo.forEach(function(herp){//set.forEach function from raphaeljs
    if(herp.data("candrag")=="true"){
        foo.drag(mover(foo), dragger);        
    }
});

};

有没有一种方法可以加快速度，而无需在我想要使其可拖动的部分上绘制不可见元素并将处理程序附加到这些部分？

【问题讨论】：

重复，或多或少，这个问题。如果你正在迭代一个集合，你可能没有很好地使用它。 stackoverflow.com/questions/15379158/…
我知道这是问题的重复，但我不知道更好的使用方法。我对此很陌生。

标签： raphael

【解决方案1】：

    var position;
    var rect = paper.rect(20, 20, 40, 40).attr({
            cursor: "move",
            fill: "#f00",
            stroke: "#000"
    });
    t = paper.text(70,70, 'test').attr({
            "font-size":16, 
            "font-family": 
            "Arial, Helvetica, sans-serif" 
    });
    var st = paper.set();
    st.push(rect, t);
    rect.mySet = st;
    rect.drag(onMove, onStart, onEnd);
    onStart = function () {
        positions = new Array();
        this.mySet.forEach(function(e) {
            var ox = e.attr("x");
            var oy = e.attr("y");
            positions.push([e, ox, oy]);
        });
    }
    onMove = function (dx, dy) {
        for (var i = 0; i < positions.length; i++) {//you can use foreach but I want to                 show that is a simple array
            positions[i][0].attr({x: positions[i][1] + dx, y: positions[i][2] + dy});
        }
    }
    onEnd = function() {}

【讨论】：