在旋转形状Kineticjs中设置dragboundfunction

Set dragBoundFunc in rotating shape Kineticjs

本文关键字：设置 dragboundfunction Kineticjs 旋转      更新时间：2023-09-26

我已经使用KineticJs创建了带有dragBoundFunc的矩形

    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不顺利，因为这个矩形的位置也得到旋转。我必须做什么来解决这个问题?

当你旋转矩形时，它的边界框会改变大小。下面是如何计算新尺寸，并使用新尺寸来计算旋转矩形的新边框(伪代码):

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必须执行每次鼠标移动

必须构建

dragBoundFunc以非常快地执行。

这个解决方案不起作用，因为当你为当前的鼠标移动做所有这些计算时，用户将会再移动3-5次鼠标并逃脱你的拖动边界。

计算需要很长时间才能有效(即使在我相对较快的四核机器上)。

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

然后在dragBoundFunc:插入您当前的X/Y到您的预压缩边界，并测试每个违规。

由于在dragBoundFunc中只涉及6-12个简单的数学计算，因此您可能能够跟上用户鼠标移动的数量

相关文章：