raphaeljs : drag and apply transformation to Paper. 设置()

Question

我开始玩 raphaeljs，但是在拖动并将转换应用到 Paper.set() 时遇到了一个小问题

这是我的例子:http://jsfiddle.net/PQZmp/2/

1) 为什么拖拽事件只添加到marker而不是 slider ?

2)转换应该是相对的(即 translate by 而不是 translate to )，但是如果我拖动 marker两次，第二次拖动从头开始，而不是从第一次的结尾开始。

编辑:
在零的响应之后，我创建了一个新的 JSFiddle 示例:http://jsfiddle.net/9b9W3/1/

1) 如果 this 会很酷引用了set而不是集合的第一个元素。这不能用 dragger.apply(slider) 来完成吗？ ?我试过了，但只适用于该方法的第一次执行(也许在 Raphael 内部它已经完成，但在 set 而不是 set 内的第一个元素)

2) 根据拉斐尔 docs转换应该相对于对象位置(即 translate by 而不是 translate to )。但这不是根据上面的 jsfiddle 发生的事情(检查两个标记拖动事件)。

3) 所以2)以上产生了第三个问题。如果一个 transform("t30,0")是 translation by 30px horizontally ，原点是如何计算的？基于 attr("x")或 getBBox().x ?

Answer 1

拖动事件实际上被添加到标记和 slider 中——但是您的 slider 的笔划宽度为 1 并且没有填充，因此除非您捕捉到确切的边框，否则单击会“穿过” Canvas 。

这背后是另一个问题:拖动被应用于两个元素，但是 this在您的拖动处理程序中引用特定元素，而不是集合 - 因此两个元素将相互独立拖动。

最后:每次拖拽都是从初始位置开始的，是因为dragger中的dx,dy参数。相对于初始拖动事件的坐标，并且您的变换不考虑以前的变换。考虑这样的替代方案:

var r = new Raphael(0, 0, 400, 200);
var marker = r.path("M10,0L10,100").attr({"stroke-width": 5});
var button = r.rect(0, 0, 20, 20, 1).attr( { 'stroke-width': 2, fill: 'white' } );
var slider = r.set( marker, button );

var startx, starty;

var startDrag = function(){
    var bbox = slider.getBBox();
    startx = bbox.x;
    starty = bbox.y;
    console.log(this);
}, dragger = function(dx, dy){
    slider.transform("t" + ( startx + dx ) + "," + starty );
}, endDrag = function(){

};

slider.drag(dragger, startDrag, endDrag);

要解决您的更新:

我相信您可以将执行拖动功能的上下文指定为 element.drag 的可选第四、第五和六个参数。我自己没有尝试过，但看起来这应该很好用:

slider.drag(拖动器，startDrag，endDrag， slider ， slider ， slider )；

变换是相对于对象位置的。这对第一个 slider 很有效，因为它的起始位置是 0，但对第二个 slider 不太好，因为...

...最小/最大 slider 的转换实际上应该相对于比例，而不是单个标记。因此，您会注意到，当您将鼠标光标拖回零位置时，您的最大 slider (红色 slider )会返回到其初始位置。说得通？