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

Question

我将Kineticjs用于旋转的饼图小部件。 当我尝试在旋转的画布元素上绘制（使用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的事件处理代码引起的。 从最新版本开始，它可以正常工作。