2

我开始使用 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）根据Raphael docs，转换应该相对于对象位置（即translate by而不是translate to）。但这不是根据上面的 jsfiddle 发生的事情（检查两个标记拖动事件）。

3）所以2)上面创建了第三个问题。如果 atransform("t30,0")是 a translation by 30px horizontally，如何计算原点？基于attr("x")或getBBox().x？

4

2 回答 2

4

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

这背后是另一个问题：拖动被应用于两个元素，但this在你的拖动处理程序中引用了一个特定的元素，而不是集合——所以两个元素将相互独立地拖动。

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

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

要解决您的更新：

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

    slider.drag（拖动器，startDrag，endDrag，滑块，滑块，滑块）；

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

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

于 2012-06-23T19:56:13.793 回答
0 
    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() {}
于 2013-09-21T06:02:29.027 回答