1

我将 Kineticjs 用于旋转饼图小部件。当我尝试在旋转的画布元素上绘制（父节点使用 CSS3 旋转 60 度）时，事件似乎无法正常工作。例如，顺时针旋转 15 度的画布上的悬停事件偏离 15 度。有任何想法吗？

4

2 回答 2

1

您的问题的答案并非微不足道——原因如下：

您的 DOM 容器位于转换后的空间中。

您的 Kinetic 对象的反应就像它们在未变形的空间中一样。

您的动力学对象响应错误，因为浏览器正在为它们提供转换的鼠标位置。

简单的解决方法：让 DOM 容器保持不变并在 KineticJS 中进行所有旋转

困难的解决方法：将旋转的 DOM 鼠标点转换为未旋转的点以供 Kinetic 使用。

这是困难的修复：

CSS 变换的默认旋转点是 50%,50%（元素的中间）所以找到 Kinetic 阶段的中心

var cx=stage.getWidth()/2;
var cy=stage.getHeight()/2;

给定转换空间（DOM 空间）中的 mouseX/mouseY，您需要找到未转换的点（KineticJS 空间）

var unrotatedPoint = unrotatedXY(cx,cy, mouseX,mouseY, cssDegreeRotation);

这是进行该计算的函数：

function unrotatedXY(cx,cy, mouseX,mouseY, cssDegreeRotation) {

    var dx=mouseX-cx;
    var dy=mouseY-cy;
    var r=Math.sqrt(dx*dx+dy*dy);
    var cssRadianAngle = cssDegreeRotation * Math.PI/180;

    // calc the angle of the mouse position
    var rotatedAngle = Math.atan2(dy,dx);

    // unrotate the mouse position by the css rotation
    var unrotatedAngle = rotatedAngle -= cssRadianAngle;

    // normalize the angle
    if(unrotatedAngle<0){ unrotatedAngle+=Math.PI*2; }

    // calc the unrotated XY
    unrotatedX = cx+ r * Math.cos(unrotatedAngle);
    unrotatedY = cy+ r * Math.sin(unrotatedAngle);

    return({x:unrotatedX,y:unrotatedY});
}

上面的 mouseX/mouseY 来自文档，而不是 KineticJS。

这意味着您必须侦听文档（或您的容器元素）上的鼠标事件，而不是 KineticJS 本身。

$(document).mousemove(function(e){handleMouseMove(e);});

function handleMouseMove(e){
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

 // convert the DOM mousepoint to a Kinetic mousepoint
var unrotatedPoint = unrotatedXY(cx,cy, mouseX,mouseY, cssDegreeRotation);

// Now you can check for hovers, etc against your Kinetic nodes …

}

要重新绑定到 KineticJS，您可以使用 node.fire 使用包含转换后的鼠标坐标的自定义事件对象来触发事件。

于 2013-07-10T19:59:46.700 回答
0

更新：

正如markE 所建议的，没有简单的解决方法。这个问题可以在这里看到。它最近关闭了。

原始错误显然是由 jquery 的事件处理代码引起的。它从最新版本开始正常工作。

于 2014-02-28T06:01:09.250 回答