在 KineticJS 中，在使用 css3 旋转的画布上，事件似乎无法正常工作

Question

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

Answer 1

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

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

动力学对象的反应就像它们在未变换的空间中一样。

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

简单的修复方法：保持DOM容器未转换，并在KineticJS 中进行所有旋转

疑难解答：将旋转的DOM鼠标点转换为未旋转的点，供Kinetic使用。

以下是困难的解决方案：

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

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来触发事件，使用包含转换后的鼠标坐标的自定义事件对象。

Answer 2

更新：

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

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