2

我正在使用动力学 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);
4

2 回答 2

0

我对 KineticJS 不熟悉，但似乎您必须将转换矩阵重置为其默认状态。OpenGL 有 glLoadIdentity() 方法。在 KineticJS 上搜索类似的方法。

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

于 2012-10-15T08:37:03.473 回答
0

这应该让你相当接近：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());
于 2013-01-04T15:34:09.727 回答