Javascript 在KineticJS中，在使用css3旋转的画布上，事件不'；他似乎工作不正常

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

你的问题的答案并不琐碎——原因如下：

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

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

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

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

疑难解答：将旋转的DOM鼠标点转换为未旋转的点，以便使用

下面是一个难题：

CSS变换的默认旋转点是50%，50%（元素的中间），因此找到动力学阶段的中心

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

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

下面是执行该计算的函数：

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});
}

---

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

您的问题的答案并不简单——原因如下：

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

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

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

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

疑难解答：将旋转的DOM鼠标点转换为未旋转的点，以便使用

下面是一个难题：

CSS变换的默认旋转点是50%，50%（元素的中间），因此找到动力学阶段的中心

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

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

下面是执行该计算的函数：

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});
}

---

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

更新：

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

---

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

更新：

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

---

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

您能提供一个JSFIDLE吗？我怀疑您也必须在KineticJS中应用旋转。实际的代码有点长，但这里是我的一个问题。这看起来像是KineticJS舞台的问题。查看我的JSFIDLE：我跟踪了舞台上的鼠标位置，看起来虽然画布DOM元素旋转了，但舞台事件检测画布没有旋转。例如：新旋转的绿色正方形左上角的坐标为（0100）。但是如果舞台旋转正确，正确的鼠标坐标应该是（0200）。是的，我明白你的意思。是否仍然可以旋转舞台事件检测画布？（对吗？）我想这不是添加到dom中的元素吧？老实说，我不确定。这个问题可能更适合KineticJS GitHub：或者直到Eric Rowell来到这里。至于HitCanvas，我认为它是渲染的。在我使用KineticJS 4.5.0的应用程序中，我确实在DOM中看到了2张画布。在你的小提琴中，在所有html5canvastutorials.com教程部分的示例中，我现在只看到一张画布。我还尝试将教程示例中的KineticJS版本更改为4.5.0，但DOM中仍然只有1个画布…您能提供JSFIDLE吗？我怀疑您也必须在KineticJS中应用旋转。实际的代码有点长，但这里是我的一个问题。这看起来像是KineticJS舞台的问题。查看我的JSFIDLE：我跟踪了舞台上的鼠标位置，看起来虽然画布DOM元素旋转了，但舞台事件检测画布没有旋转。例如：新旋转的绿色正方形左上角的坐标为（0100）。但是如果舞台旋转正确，正确的鼠标坐标应该是（0200）。是的，我明白你的意思。是否仍然可以旋转舞台事件检测画布？（对吗？）我想这不是添加到dom中的元素吧？老实说，我不确定。这个问题可能更适合KineticJS GitHub：或者直到Eric Rowell来到这里。至于HitCanvas，我认为它是渲染的。在我使用KineticJS 4.5.0的应用程序中，我确实在DOM中看到了2张画布。在你的小提琴中，在所有html5canvastutorials.com教程部分的示例中，我现在只看到一张画布。我还尝试将教程示例中的KineticJS版本更改为4.5.0，但DOM中仍然只有1个画布。。。