В кинетике.js Проблема с вращением кинетической.группы

Я использую кинетический 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);

javascript html css kineticjs
person akhi    schedule 15.10.2012    source источник
comment
Является ли ваш линейный объект членом Kinetic.group? Можете ли вы вставить какой-нибудь ссылочный код?   -  person Ani    schedule 25.10.2012
comment
я абсолютно линейный объект является членом группы. Я опубликую код для. var rootGroup = new Kinetic.Group(); rootGroup.добавить(строка); rootGroup.setRotationDeg(rootGroup.getRotationDeg()+90);   -  person akhi    schedule 29.10.2012
comment
Ваш код не показывает, где и как вы рисуете линию. Кажется, что вы обновляете координаты линии после поворота, используя координаты, возвращаемые из положения мыши, которые относятся к положению на экране, а не к группе. Я думаю, что один из возможных способов - вращать линию (в ее начальной точке) каждый раз, когда вы ее рисуете.   -  person Ani    schedule 31.10.2012
comment
Я ОТПРАВИЛ КОД, КАСАЮЩИЙСЯ РИСОВАНИЯ ЛИНИИ, пожалуйста, взгляните на него один раз, а затем ответьте с решением проблемы.   -  person akhi    schedule 31.10.2012

Ответы (2)


arrow_upward
0
arrow_downward

Я не знаком с KineticJS, но кажется, что вам нужно сбросить матрицу преобразования обратно в состояние по умолчанию. OpenGL имеет метод glLoadIdentity(). Найдите похожий метод на KineticJS.

См. этот учебник http://www.html5canvastutorials.com/advanced/html5-canvas-reset-transform-tutorial/

person jose    schedule 15.10.2012
comment
Да, но не полностью. Я пробовал то же самое, но не сработало. - person akhi; 15.10.2012

arrow_upward
0
arrow_downward

Это должно подойти вам довольно близко: 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());
person SoluableNonagon    schedule 04.01.2013