Question

我正在使用动力学js。我正在向kinetic.group添加图像，线条等，并尝试旋转该组，它正在正确旋转。但是在旋转组之后，如果我尝试绘制线条，则无法正确绘制当前鼠标位置。它正在旋转之前绘制。

问题可能是如果我旋转组，舞台坐标似乎没有旋转。我应该怎么做才能防止这种情况发生？

参考代码---

var rootGroup = new Kinetic.Group({
                    x:  stage.getWidth()/3, 
                    y:  stage.getWidth()/6, 
                    draggable: true,
                    offset: [images.darthVader.width/2, images.darthVader.height/2]
                });
rootGroup.add(line);
rootGroup.setRotationDeg(rootGroup.getRotationDeg()+90);

以这种方式我画线。

 var activeline = new Kinetic.Line({
   points: [{x:0,y:0}],
   stroke: "blue",
   strokeWidth: 3,
   lineCap: "round",
   lineJoin: "round",
 });
 var mousePos = stage.getMousePosition();

 points.push({
            x: mousePos.x,
            y: mousePos.y
 });

 activeline.setPoints(points);
 rootGroup.add(activeline);

Answer 1

我不熟悉KineticJS，但似乎你必须将转换矩阵重置回默认状态。 OpenGL有glLoadIdentity（）方法。在KineticJS上搜索类似的方法。

参见本教程 http://www.html5canvastutorials.com/advanced/html5-canvas-reset-transform-tutorial/

Answer 2

这应该让你相当接近：http://jsfiddle.net/k4qB8/24/

 // This rotates that added active line along with your group.
 // This makes the draw direction correct
 activeline.setRotationDeg(0-rootGroup.getRotationDeg());

在kinetic.js问题中旋转动力学组

2 个答案: