Вращайте группу и рисуйте в группе на этапе.. публикация с кодом

Пожалуйста, эту скрипку. Я скопировал в нее свой полный проект. Если вы откроете скрипку на выходе, вы увидите изображение, набросаете на изображение, выбрав перо, добавьте текст и т. д. (например, это выполняет некоторые функции). затем поверните группу, используя поворот кнопку а потом попробуй нацарапать поймешь в чем именно проблема.

На мой взгляд, проблема в том, что у меня есть сцена, и на сцену добавляется слой, и к слою добавляется группа, а в группу добавляются различные элементы, такие как текст строк и т. Д. затем группа поворачивается, я пытаюсь нарисовать линию, основываясь на положении мыши на сцене. Но это происходит неправильно, потому что группа повернута x и y, что мы берем, чтобы нарисовать линию со сцены. Мне нужно взять x и y из группы, а не со сцены - это их способ в любом случае. Если вы не понимаете, пожалуйста, спросите меня или напишите ответ.


html kineticjs
person akhi    schedule 03.01.2013    source источник
comment
извините, пропустил добавление кода jsfiddle.net/akhiyadav1/k4qB8/22   -  person akhi    schedule 03.01.2013
comment
попробуйте кэшировать повернутое изображение как новое изображение, удалить старое изображение и поместить новое на сцену.   -  person SoluableNonagon    schedule 03.01.2013
comment
спасибо за ответ, вы видели код в фидиле для rotate.caching повернутого изображения, поскольку новое изображение означает toImage()   -  person akhi    schedule 04.01.2013

Ответы (1)


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

// Here you'll have to figure a way to calculate how much to move the 
// line over so the draw is on the correct spot
// This is as close as I got it
     if(Math.abs(rootGroup.getRotationDeg()%360)==0)
           activeline.move(rootGroup.getX()-375, rootGroup.getY()-175);
     if(Math.abs(rootGroup.getRotationDeg()%360)==90)
           activeline.move(rootGroup.getX()-175, rootGroup.getY()+375);
     if(Math.abs(rootGroup.getRotationDeg()%360)==180)
           activeline.move(rootGroup.getX()+375, rootGroup.getY()+175);
     if(Math.abs(rootGroup.getRotationDeg()%360)==270)
           activeline.move(rootGroup.getX()+175, rootGroup.getY()-375);

Кроме того, добавьте еще немного логики для вращения против часовой стрелки, так как это не работает на 100%.

Я думаю, что реальным решением было бы просто рисовать отдельные слои для каждого поворота, примерно так:

 if (rotation is 90) : draw on lineLayer1;
 if (rotation is 180) : draw on lineLayer2;
 if (rotation is 270) : draw on lineLayer3;
 if (rotation is 360 || 0) : draw on lineLayer4;

Таким образом, вы можете просто вращать слои, которые не нарисованы, чтобы имитировать ощущение вращения.

person SoluableNonagon    schedule 04.01.2013
comment
Работает нормально, но то же самое, когда я подаю заявку на текст, не работает. - person akhi; 25.01.2013