[英]In KineticJS, on a canvas rotated using css3, the events don't seem to be working properly
I'm using Kineticjs for a rotating pie-chart widget. 我将Kineticjs用于旋转的饼图小部件。 When I try to draw on a rotated canvas element (the parent node is rotated 60deg using CSS3), the events don't seem to be working properly.
当我尝试在旋转的画布元素上绘制(使用CSS3将父节点旋转60度)时,事件似乎无法正常工作。 For example, the hover event on a 15 deg clockwise rotated canvas is 15 deg off.
例如,在15度顺时针旋转的画布上的悬停事件关闭了15度。 Any Ideas?
有任何想法吗?
The answer to your question is not trivial---here's why: 您的问题的答案并不简单-这是为什么:
Your DOM container is in transformed space. 您的DOM容器位于转换后的空间中。
Your Kinetic objects react as if they are in non-transformed space. 动能对象的反应就像它们在未变形的空间中一样。
Your kinetic objects are mis-responding because the browser is feeding them transformed mouse positions. 您的动态对象反应不正确,因为浏览器正在将它们转化为鼠标位置。
The simple fix: Leave the DOM container untransformed and do all rotations inside KineticJS 简单的解决方法:保持DOM容器不变,并在KineticJS内进行所有旋转
The difficult fix: convert rotated DOM mousepoints into unrotated points for Kinetic to use. 困难的解决方案:将旋转的DOM鼠标点转换为非旋转的点,以供Kinetic使用。
Here's the difficult fix: 这是困难的解决方法:
The default rotation-point of CSS transforms is 50%,50% (the middle of the element) so find the center of the Kinetic stage CSS转换的默认旋转点是50%,50%(元素的中间),因此请找到动力学阶段的中心
var cx=stage.getWidth()/2;
var cy=stage.getHeight()/2;
Given a mouseX/mouseY in transformed space (DOM space), you need to find the untransformed point (KineticJS space) 给定在转换空间(DOM空间)中的mouseX / mouseY,您需要找到未转换的点(KineticJS空间)
var unrotatedPoint = unrotatedXY(cx,cy, mouseX,mouseY, cssDegreeRotation);
Here's the function that does that calculation: 这是进行该计算的函数:
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});
}
The mouseX/mouseY above are coming from the document, not KineticJS. 上面的mouseX / mouseY来自文档,而不是KineticJS。
This means you must listen for mouse events on the document (or your container element), not in KineticJS itself. 这意味着您必须监听文档(或容器元素)上的鼠标事件,而不是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 …
}
To tie back into KineticJS, you might use node.fire to trigger events using custom event objects containing your converted mouse coordinates. 要绑定到KineticJS,您可以使用node.fire来触发事件,这些事件使用包含转换后的鼠标坐标的自定义事件对象来触发。
Update: 更新:
As markE suggested, there was no easy fix. 正如markE所建议的,没有容易解决的方法。 The issue can be seen here .
问题可以在这里看到。 It was closed recently.
最近关闭了。
The original error was apparently caused by jquery's event handling code. 最初的错误显然是由jquery的事件处理代码引起的。 It works properly as of the latest version.
从最新版本开始,它可以正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.