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

Question

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

Answer 1

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

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

您的 Kinetic 对象的 react 就好像它们处于未变换的空间中一样。

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

简单的修复:保持 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 …

}

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