Javascript Konva-使用旋转并保持在范围内

我正在使用Konva在网页上创建一个区域。我为我的矩形创建了一个dragBoundFunc函数，检查pos.x和pos.y以及canvas和rect的宽度，效果很好-当拖动矩形时，它只停留在我想要的区域中

当我将矩形旋转90度时，问题就出现了。现在，当我检查getClientRect（）.width和getClientRect（）.height时，width小于height，这是预期的，但它现在不会一直拖到画布的末端，除非我检测到旋转结束，并将“形状偏移”值更改为65，然后工作正常

旋转后更改offsetY和offsetX是否是解决此问题的正确方法？如果是，如何计算将其设置为什么

           dragBoundFunc: function(pos) {
        var iw = 600 - (my_shape.getClientRect().width);
        var ih = 400 - my_shape.getClientRect().height;
        var newX = pos.x > iw  ? iw : pos.x;
        var newY = pos.y > ih ? ih : pos.y;
        return {
            x: newX > 0 ? newX : 0,
            y: newY > 0 ? newY : 0
        };

    }

---

这里有一个有效的解决方案。请注意，这仅适用于0、90、180和270度或倍数的固定旋转。“任意旋转角度”的解决方案；需要三角或矩阵数学来计算点的旋转值等

/*
这是拖动边界函数
*/
功能撤销功能（pos）{
var thisRect={x:this.x（），y:this.y（），width:this.width（），height:this.height（）}；
//将边界rect复制到定义dragbounds范围的testRect中
//不考虑拖动矩形的宽度和高度。
//这在下面根据旋转进行更改。
var testRect={
左：boundary.x，
顶部：边界，
右：boundary.x+boundary.width，
底部：边界.y+boundary.height
};
//用户旋转值在旋转按钮onclick中计算
//是0、90、180、270中的一个
开关（用户旋转）{
案例0://对于0度，根据法线边界矩形计算
testRect.right=testRect.right-thisRect.width；
testRect.bottom=testRect.bottom-thisRect.height；
打破
案例90://对于90度，我们必须修改左侧和底部的测试边界
testRect.left=testRect.left+thisRect.height；
testRect.bottom=testRect.bottom-thisRect.width；
打破
案例180://对于180度，我们必须修改左侧和顶部的测试边界
testRect.left=testRect.left+thisRect.width；
testRect.top=testRect.top+thisRect.height；
打破
案例270://对于270 degs，我们必须修改测试边界右侧和顶部
testRect.right=testRect.right-thisRect.height；
testRect.top=testRect.top+thisRect.width；
打破
}
//获取新的pos：如果pos在bounday范围内，则使用它，否则使用用户边界
//左边缘检查
var newX=（pos.xtestRect.right？testRect.right:newX）；
//上边缘检查
var newY=（pos.ytestRect.bottom？testRect.bottom:newY）；
//返回我们计算的点
返回{
x:newX，
y:新的
}
}
//从这里开始就是画布设置等。
//设置主矩形-我们拖动和旋转的矩形
var target={x:70，y:70，宽度：70，高度：40}；
//设置边界矩形-稍后在rectfunc中使用
变量边界={x:20，y:20，宽度：460，高度：160}；
//搭建舞台
var s1=新的Konva.Stage（{container:'container1'，宽度：500，高度：200}）；
//添加一层。
var layer1=新的Konva.Layer（{draggable:false}）；
s1.增加（第1层）；
//显示边界的范围
var funcRect=新的Konva.Rect({
x:boundary.x，
y:边界，y，
宽度：boundary.width，
高度：边界高度，
笔划：“红色”}）
layer1.add（funcRect）
//为边界函数创建一些易于查找的值。
boundary.minX=boundary.x；
boundary.maxX=boundary.x+boundary.width；
boundary.minY=boundary.y；
boundary.maxY=boundary.y+boundary.height；
//显示目标矩形
var targetect=new Konva.Rect({
x:target.x，
y:目标，y，
宽度：target.width，
高度：target.height，
笔划：“绿色”，
真的，
//应用线性粒状填充以提供旋转感。
fillLinearGradientStartPoint:{x:-50，y:-50}，
fillLinearGradientEndPoint:{x:50，y:50}，
fillLinearGradientColorStops:[0'红色'，1'黄色']，
dragBoundFunc:draggfunc//该函数位于代码的底部和顶部
})
第1层。添加（targetRect）
//画舞台
s1.draw（）；
var-userRotation=0；
$（'btnRotate'）。在（'click'，函数（e）上{
目标定向旋转（90）
s1.draw（）；
var rectRotation=targetect.rotation（）；
//用户可以旋转>360度，因此我们将使旋转范围降至0-270
userRotation=（rectRotation/90）；
userRotation=（userRotation%4）*90；
$（'#info'）.html（“Rect rotation”+rectRotation+”与“+userRotation”相同）；
})

p
{
填充：4px；
}
#集装箱1
{
显示：内联块；
宽度：500px；
高度：200px；
背景颜色：银色；
溢出：隐藏；
}
#托盘
{
高度：52px；宽度：500px；
边框：1px实心#666；
边缘底部：10px；
z指数：10；
}
.拖拉
{
宽度：50px；
高度：50px；
显示：内联块；
边框：1px实心#666；
}

在旋转矩形上拖动边界函数。红色矩形是bounds函数的范围。将矩形拖动到边界，注意它已被捕获。现在单击旋转90%。一个简单的基于rect的dragFunc将失败，因为rect的原点不是右上角。解决方案函数解决了这个问题。


旋转+90度0度。

这是一个有效的解决方案。请注意，这仅适用于0、90、180和270度或倍数的固定旋转。“任意旋转角度”的解决方案；需要三角或矩阵数学来计算点的旋转值等

/*
这是拖动边界函数
*/
功能撤销功能（pos）{
var thisRect={x:this.x（），y:this.y（），width:this.width（），height:this.height（）}；
//将边界rect复制到定义dragbounds范围的testRect中
//不考虑宽度和高度