集dragBoundFunc在旋转形状Kineticjs

我已经使用KineticJs集dragBoundFunc在旋转形状Kineticjs

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 
     } 

     } 
    })

让我来解释一下，我想创建一个矩形一个rectancle与dragBoundFunc创建矩形。由于矩形位于矩形中，因此该矩形具有dragBoundFunc。问题是当我像“myrect.setRotationDeg（90）”那样设置旋转时，dragBound进展不顺利，因为这个矩形的位置也会旋转。我必须做些什么来解决这个问题？

来源

2013-05-16 sein

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

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必须建立执行很快。

此解决方案不起作用，因为当您为当前的mousemove执行所有此数学运算时，用户将使鼠标移动3-5次并逃脱您的拖拽边界。

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

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

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

因为这只涉及到dragBoundFunc中的6-12个简单的数学计算，您可能会跟上用户的鼠标移动速度。

来源

2013-05-16 19:06:48 markE

感谢您的回复，我会很感激。但是有什么办法吗？因为我只是不使用dragBoundFunc。如果我旋转那个形状，当我调用一个函数时，例如getWidth（），我希望结果是80而不是10.你能做些什么吗？ – sein

嗯......我唯一能想到的就是使用自定义的动力学形状。 Kinetic.Shape允许您访问HTML画布的原生绘图函数来操纵您的自定义形状。这在Kinetic.Shape的drawFunc中完成。所以，不要旋转那个形状，你可以做一个自定义的drawFunc，以适当的旋转重绘一个矩形。然后你可以设置你的形状的x，y，宽度，高度而不会让运动不安。或者，如果您想让Kinetic.Rect“知道”旋转的x，y和边界，则始终可以扩展它：myrect.rotatedX = ...;虽然我的dragFunc警告仍然适用！ – markE

在我的情况下，我实际上使用图像，而不是Rect。我们可以在不使用kineticjs的情况下旋转图像。例如我们在css中使用变换功能并将其应用于kieticjs？ – sein

集dragBoundFunc在旋转形状Kineticjs

回答

相关问题