SnapSVG 拖动旋转的矩形

Question

我已经成功地使用以下代码（由小方块演示）在考虑鼠标位置的情况下成功拖动了一个矩形

当矩形旋转时，矩形与形状平行拖动，请有人告诉我如何纠正这个问题。我认为这可以用一点三角函数来完成，但没有成功计算出相反的（x）和相邻的（y）

可以在这里看到一个演示http://jsbin.com/tihobu/2/edit?html,js,output

var s = Snap(400,400);
var smallSquare = s.rect(100, 100, 50,50).attr({fill:"#ffcc00"});
var bigSquare = s.rect(100,20,150,150).attr({fill:"#ff6600"}); 
var startx, starty; 

var t = bigSquare.transform().localMatrix;
    t.rotate(45);
bigSquare.transform(t);

var moveFunc = function (dx, dy, posx, posy) {
   var xadj = startx - (0 - dx);
   var yadj = starty - (0 - dy);
   this.attr('x',xadj);
   this.attr('y',yadj);
};

var startFunc = function(){
                startx = this.attr('x');
                starty = this.attr('y');
                console.log("Move started");
            };
var stopFunc = function(){};

bigSquare.drag( moveFunc,startFunc,stopFunc );
smallSquare.drag( moveFunc,startFunc,stopFunc );

感谢大卫

Answer 1

问题是坐标空间已经旋转，所以你有几个选择。要么计算出新的 x,y 的位置，要么使用带有变换的拖动而不是更改 x,y。我个人会使用转换，但您可能有充分的理由要更改 x,y 属性。

请注意，如果您继续更改 x,y 属性，则会添加并非所有元素都具有此属性的问题。比如圆用cx、cy定位，你可能还有其他复杂的元素。

这是我用来制作转换处理程序的一些代码...（编辑：已更改代码以应对复杂的组）

example

   Snap.plugin( function( Snap, Element, Paper, global ) {

    Element.prototype.globalToLocal = function( globalPoint ) {
            var globalToLocal = this.node.getTransformToElement( this.paper.node ).inverse();
            globalToLocal.e = globalToLocal.f = 0;
            return globalPoint.matrixTransform( globalToLocal );
    };

    Element.prototype.getCursorPoint = function( x, y ) {
            var pt = this.paper.node.createSVGPoint();      
            pt.x = x; pt.y = y;
            return pt.matrixTransform( this.paper.node.getScreenCTM().inverse()); 
    }

    Element.prototype.altDrag = function() {
            return this.drag( altMoveDrag, altStartDrag );
    };

    function altMoveDrag( xxdx, xxdy, ax, ay ) {
            var tdx, tdy;
            var cursorPoint = this.getCursorPoint( ax, ay );
            var pt = this.paper.node.createSVGPoint();

            pt.x = cursorPoint.x - this.data('op').x;
            pt.y = cursorPoint.y - this.data('op').y;

            var localPt = this.globalToLocal( pt );

            this.transform( this.data('ot').toTransformString() + "t" + [  localPt.x, localPt.y ] );

    };

    function altStartDrag( x, y, ev ) {
            this.data('ibb', this.getBBox());
            this.data('op', this.getCursorPoint( x, y ));
            this.data('ot', this.transform().localMatrix);
    };

});