In kinetic.js Issue with rotating a kinetic.group

问题

I am using kinetic js. I am adding image, lines, etc to a kinetic.group and trying to rotate the group and it is getting rotated correctly. But after rotating the group, if I try to draw a line it is not correctly drawing on the present mouse position. It is drawing as it was before rotating.

The problem may be that if I rotate the group, the stage co-ordinates are not getting rotated it seems. What should I do to prevent this?

reference code---

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);

IN THIS WAY I AM DRAWING THE LINE.

 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);

回答1:

I'm not familiar with KineticJS, but it seems that you have to reset the transformation matrix back to its default state. OpenGL has the glLoadIdentity() method. Search for a similiar method on KineticJS.

See this tutorial http://www.html5canvastutorials.com/advanced/html5-canvas-reset-transform-tutorial/

回答2:

This should get you fairly close: 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());

来源：https://stackoverflow.com/questions/12891841/in-kinetic-js-issue-with-rotating-a-kinetic-group

标签

javascript

css

html5

kineticjs