2

实际上,我正在画布中加载图像并在其上涂鸦然后旋转。它工作正常。旋转图像后如果我尝试涂鸦或写任何东西,线条会按照之前的坐标打印(即,在旋转图像之前)。

使用此代码我正在旋转图像。

image.setRotationDeg(image.getRotationDeg()+90); (or)
image.setRotationDeg(90);

旋转图像后,我无法正确获取鼠标位置(或鼠标坐标)。旋转图像后,我想在其上正常涂鸦。

请在这种情况下帮助我。

4

2 回答 2

0

I'm not certain about Kinetic.JS specifically (never having used it), but from a purely Canvas-oriented standpoint I would use context.save() and context.restore() methods.

Check the Kinetic.JS documentation to see if anything similar is available. Normally, when you rotate the canvas, you rotate everything, including coordinates. save() and restore() allow you to save the current canvas state (coordinate set and transformations), perform some actions, and then restore them afterward.

Relevant link: http://html5.litten.com/understanding-save-and-restore-for-the-canvas-context/

It's been a while since I worked with Canvas, so please pardon me if my explanation is less than clear. I do hope the link helps explain it better. Hopefully this helps put you on the right track for your own research, at least until somebody more-knowledgeable about Kinetic.JS weighs in.

于 2012-10-10T20:53:39.073 回答
0

我看过一个很好的旋转盘教程。这可以帮助你。 http://www.techrecite.com/html5-canvas-disc-rotation-animation-using-kineticjs/

于 2013-10-20T14:31:54.020 回答