Javascript 使用捕捉SVG限制边界内的旋转对象

我已经成功地建立了一个示例，其中给出了如何在svg边界内绑定元素的示例。拖动法线元素（不旋转）时效果良好。但当我将其应用于旋转对象时，问题就出现了：

var s=Snap（#svgout”）；
var室_宽度=400；
var房间高度=200；
var SVG_BOUNDARY=s.rect（0,0，房间宽度，房间高度）；
SVG_BOUNDARY.attr({
“笔划”：“FF0000”，
“填充”：“FFFFFF”，
id:“房间边界”
});
旋转前的var_GETBBOX=[]；
s、 属性({
视图框：“0 0”+房间宽度+“”+房间高度
});
（功能（）{
插件（函数（快照、元素、纸张、全局）{
Element.prototype.LimitDraging=函数（参数）{
此.data（'minx'，params.minx）；
this.data（'miny'，params.miny）；
此.data（'maxx'，params.maxx）；
此.data（'maxy'，params.maxy）；
此.data（'x'，参数x）；
该数据（'y'，参数y）；
this.data（'ibb'，this.getBBox（））；
this.data（'ot'，this.transform（）.local）；
this.drag（limitMoveDrag，limitStartDrag）；
归还这个；
};
函数limitMoveDrag（dx、dy、posx、posy、ev）{
var-tdx，tdy；
var sInvMatrix=this.transform（）.globalMatrix.invert（）；
sInvMatrix.e=sInvMatrix.f=0；
tdx=正弦矩阵x（dx，dy）；
tdy=正弦矩阵y（dx，dy）；
this.data（'x'，+this.data（'ox'）+tdx）；
本数据（'y'，+本数据（'oy'）+tdy）；
if（this.data（'x'）>this.data（'maxx'）-this.data（'ibb'）.width）{
this.data（'x'，this.data（'maxx'）-this.data（'ibb'）.width）
};
if（this.data（'y'）>this.data（'maxy'）-this.data（'ibb'）.height）{
this.data（'y'，this.data（'maxy'）-this.data（'ibb'）。高度）
};
if（this.data（'x'）

双击矩形使其旋转，然后尝试拖动。当您拖动而不旋转时，它是完美的（拖动边界）。但是当拖动旋转的对象时，问题就出现了

---

我该如何解决这个问题？

因为这包括了我的一些旧代码，我想我会做一个答案

最初，这并不考虑现有的转换。我写了一些更新的代码，可以做到这一点

不同的主要位是getInversePoint（）函数，它获取屏幕的逆变换。我还改变了转换的顺序，所以元素总是先平移

Element.prototype.getInversePoint=函数（x，y）{
var pt=this.paper.node.createSVGPoint（）；
pt.x=x；pt.y=y；
返回pt.matrixTransform（this.paper.node.getScreenCTM（）.inverse（））；
}
Element.prototype.limitDrag=函数（参数）{
此.data（'dragParams'，params）；
this.data（'x'，params.x）；this.data（'y'，params.y）；
this.drag（limitMoveDrag，limitStartDrag）；
归还这个；
};
功能限制移动拖动（xxdx、xxdy、ax、ay）{
var-tdx，tdy；
var params=this.data（'dragParams'）；
var pt=这个.getInversePoint（ax，ay）；
var dx=pt.x-此.data（'op'）.x；
var dy=pt.y——这个数据（'op'）.y；
var ibb=this.data（'ibb'）；
if（ibb.x+ibb.width++dx>params.maxx）
{dx=params.maxx-(
Element.prototype.getInversePoint = 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.limitDrag = function( params ) {
    this.data('dragParams', params );
    this.data('x', params.x); this.data('y', params.y);
    this.drag( limitMoveDrag, limitStartDrag );
    return this;    
};

function limitMoveDrag( xxdx, xxdy, ax, ay ) {
    var tdx, tdy;
    var params = this.data('dragParams');
    var pt = this.getInversePoint( ax, ay );
    var dx = pt.x - this.data('op').x;
    var dy = pt.y - this.data('op').y;

    var ibb = this.data('ibb');
    if( ibb.x + ibb.width + +dx > params.maxx ) 
        { dx = params.maxx - (ibb.x + ibb.width) };

    if( ibb.y + ibb.height + +dy > params.maxy ) 
        { dy = params.maxy - (ibb.y + ibb.height)  };
    if( ibb.x + +dx < params.minx ) { dx = params.minx - ibb.x; };
        if( ibb.y + +dy < params.miny ) { dy = params.miny - ibb.y; };

    this.transform(  "t" + [  dx, dy ] +   this.data('ot').toTransformString());
};

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