0

我已经使用 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 并不顺利，因为这个矩形的位置也会旋转。我必须怎么做才能解决这个问题？

4

1 回答 1

0

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

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必须构建以非常快速地执行。

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

数学需要太长时间才能生效（即使在我相对较快的四核机器上）。

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

然后在 dragBoundFunc 中：将当前 X/Y 插入预先计算的边界并测试每个边界是否违规。

由于这仅涉及 DragBoundFunc 中的 6-12 次简单数学计算，因此您可能能够跟上用户的鼠标移动量。

于 2013-05-16T19:06:48.070 回答