Question

我已经使用KineticJs

创建了带有dragBoundFunc的Rectangle

    var myrect=new Kinetic.Rect({
        x:0,
        y:0,
         width: 10,
         height: 80,
         fill:"grey",
         opacity:1,
         draggable:true,
         dragBoundFunc: function(pos) {
         var newx = pos.x < 0 ? 0 : pos.x && pos.x > 150 ? 150 : pos.x
         var newy = pos.y < 0 ? 0 : pos.y && pos.y > 150 ? 150 : pos.y
         return{
         x:newx,
         y:newy
         }

         }
    })

所以让我解释一下，我想在一个矩形中创建一个矩形。这个矩形有一个dragBoundFunc，因为它在一个矩形中。问题是当我像“myrect.setRotationDeg（90）”那样设置旋转时，dragBound运行不顺利，因为这个矩形的位置也会旋转。我该怎么做才能解决这个问题？

Answer 1

旋转矩形时，它的边界框会改变大小。以下是如何计算新大小并使用新大小计算旋转矩形的新边框（伪代码）：

var cos = Math.abs(Math.cos(rotationInRadians));
var sin = Math.abs(Math.sin(rotationInRadians));
var newWidth =  rectHeight * sin + rectWidth * cos;
var newHeight = rectHeight * cos + rectWidth * sin;
// assuming you rotated your rectangle around it’s center
var newLeft= rectCurrentX + rectWidth/2 – newWidth/2;
var newRight = newLeft + newWidth;
var newTop =  rectCurrentY + rectHeight/2 – newHeight/2;
var newBottom = newTop + newHeight;

然后将其插入您的dragBoundFunc。

完成数学运算......这可能不起作用！

请记住，你的dragBoundFunc必须执行每个mousemove

必须构建

dragBoundFunc才能非常快速地执行。

此解决方案不起作用，因为当您对当前鼠标移动进行所有这些数学运算时，用户将鼠标移动3-5次并转义拖动边界。

数学运算需要很长时间才能有效（即使是在我相对较快的四核机器上）。

您的工作解决方案可能涉及在360度（2PI弧度）附近以6-12个不同的旋转预先计算矩形的边界。

然后在dragBoundFunc中：将当前的X / Y插入预先打破的边界并测试每个违规行为。

由于这只涉及到dragBoundFunc中的6-12个简单的数学计算，你可能能够跟上用户的鼠标移动。

将dragBoundFunc设置为旋转形状Kineticjs

1 个答案: