Question

我正在尝试调整此示例http://raphaeljs.com/graffle.html以将拖动限制在容器svg中。

有点像http://bl.ocks.org/1557377或http://jqueryui.com/demos/draggable/#constrain-movement基本上我想限制拖动时从边界框移出的对象。

添加的调整代码

    if(thisBox.x < 0){
        ddx = 0;
    }else if(thisBox.x>width-thisBox.width ){
        ddx = width-thisBox.width;
    }else {
        ddx = this.ox + dx;
    }

    if(thisBox.y < 0){
        ddy = 0;
    }else if(thisBox.y>height-thisBox.height ){
        ddy = height-thisBox.height;
    }else{
        ddy = this.oy + dy;
    }

这部分有效，当矩形移动超出边界时，它会在边缘上跳舞！而圆和椭圆则粘在边缘上。

那么如何在父边界框内使用约束移动限制元素拖动（在本例中为svg

）

Answer 1

有一个问题是，当您将ddx或ddy设置在一侧时，您将该值作为省略号的中心点返回，以便它们“快速”关闭旁边。

第二件事是你在这个边界框的左上角进行计算，而不是实际的计算位置（ox + dx）。这就是造成混乱的原因。

这不是最漂亮的实现，但我想最小化对代码的更改，用这个替换move函数：

 move = function (dx, dy) {
    var width =this.paper.width,
    height = this.paper.height,
    thisBox = this.getBBox()
    //, box = {
    //     "x"      :thisBox.width,
    //     "y"      :thisBox.height,
    //     "x2"     :width-thisBox.width,
    //     "y2"     :height-thisBox.height,
    //     "width"  :width-thisBox.width,
    //     "height" :height-thisBox.height
    // };
    // var outOfBound=!Raphael.isBBoxIntersect(thisBox,box)
    ;

    console.log(thisBox.width,width,thisBox.x,thisBox
                ,this.ox);

    var ddx = this.ox + dx;
    var ddy = this.oy + dy;
    if (this.type == 'ellipse') { 
        ddx -= thisBox.width / 2;
        ddy -= thisBox.height / 2;
    }

    if(ddx < 0){
        ddx = 0;
    }else if(ddx>width-thisBox.width ){
        ddx = width-thisBox.width;
    }

    if(ddy < 0){
        ddy = 0;
    }else if(ddy>height-thisBox.height ){
        ddy = height-thisBox.height;
    }

    var att = this.type == "rect" ? {x: ddx, y: ddy} : {cx: ddx + (thisBox.width / 2), cy: ddy + (thisBox.height / 2)};
    this.attr(att);


    for (var i = connections.length; i--;) {
        r.connection(connections[i]);
    }
    r.safari();
}

在开始时，我们会根据ddx的位置计算ddy和this作为左上角。（如果它是椭圆，则调整，ox和oy是中心坐标）。

然后它与之前的情况大致相同，但是当我们将值设置回来时，我们会重新调整椭圆的值。您可以更改存储/使用的值以避免重复计算。

这适合我。

修改

将代码复制到自己的fiddle。

Answer 2

您好我已经用这段代码更新了小提琴，这似乎有效但不完美，

代码已更改

       if (thisBox.x < 0) {
            ddx = 0 + thisBox.width/2;//the position 0 was problem
        } else if (thisBox.x > width - thisBox.width) {
            ddx = width - thisBox.width;
        } else {
            ddx = this.ox +dx;
        }

        if (thisBox.y < 0) {
            ddy = 0+thisBox.height/2;//the position 0 was problem
        } else if (thisBox.y > height - thisBox.height) {
            ddy = height - thisBox.height;
        } else {
            ddy = this.oy + dy;
        }

我更新了fiddle

此外，我更新了一些CSS，使其更清晰，没有错误。

更新：振动，

我已更新fiddle2，可消除顶部和左侧的振动，

请检查并回复

同样看到这个fiddle3可以很好地处理圆形/椭圆形，但是矩形有问题我觉得有些东西我一定错过了，但是用椭圆工作正常应该有帮助

raphaeljs如何使用约束运动限制元素拖动（在父边界框内）

2 个答案: