Question

我有一个带有许多可拖动对象的应用程序，它们也可以以90度的增量旋转。我试图找出如何阻止用户拖动Raphael纸张（画布）之外的对象。

对于未旋转的对象，这非常简单。我可以简单地看看当前的x和y坐标是否小于0并将它们设置为0。我可以通过检查它们是否在画布宽度和高度之外来进行类似的调整。

然而，当旋转物体时会出现问题，因为由于某些奇怪的原因，坐标平面也会旋转。是否有一种简单的方法可以将对象保留在画布中？或者在某个地方有一些例子吗？

我花了很多时间摆弄这个，我似乎无法理解旋转的坐标平面以调整我的计算。即使在调试当前坐标时，如果我拖动一个对象，释放它，然后再次拖动该对象，它们似乎也会奇怪地移动。

非常感谢任何帮助。

谢谢，莱恩

Answer 1

我有类似的问题，我需要在另一个形状的边界内移动一个形状，所以我做的是：

element.drag(onstart, onmove, onend);

...
onStart: function(x,y,e){
        //  Initialize values so it doesn't recalculate per iteration
        // this allows to resume dragging from the point it were left
        App.oldX = 0;
        App.oldY = 0;
        App.currentCircleX  = App.fingerPath.attr('cx');
        App.currentCircleY  = App.fingerPath.attr('cy');
    },
    onMove: function(dx,dy,x,y,e){
        App.setDirection(dx,dy);
    },
    onEnd: function(e){
        // nothing to do here for now
    },

// this function tells the element to move only if it's within the bound area
    setDirection: function(dx, dy){
        var isXYinside;
        this.newX   = this.currentCircleX - (this.oldX - dx);
        this.newY   = this.currentCircleY - (this.oldY - dy);

        // HERE is the key, this method receives your bounding path and evaluates the positions given and then returns true or false
        isXYinside  = Raphael.isPointInsidePath(this.viewportPath, this.newX, this.newY);
        this.oldX   = dx;
        this.oldY   = dy;
        // so if it is within the bound area, will move, otherwise will just stay there
        if (isXYinside) {
            this.fingerPath.attr({
                "cx": this.newX,
                "cy": this.newY
            });
            this.currentCircleX = this.newX;
            this.currentCircleY = this.newY;
        }
    }

我知道这是一个旧问题，但在试图想办法解决这个问题时，我偶然发现了这个问题。所以这是我的2美分以防有人遇到这个问题。

参考：

Raphael.isPointInsidePath

Answer 2

你有没有尝试过Element.getBBox（）有两种黄酮在旋转前和旋转后产生结果你应该切换布尔参数并测试它

如何在Raphael纸张中保留旋转的可拖动物体？

2 个答案: