javascript - 在 kinetic.js 中旋转 kinetic.group 的问题

Question

我正在使用 kinetic 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/