在动力学 js 中旋转画布内的图像并在该图像上涂鸦答案

【问题标题】：In kinetic js Rotating an image inside the canvas and scribbling on that image在动力学 js 中旋转画布内的图像并在该图像上涂鸦
【发布时间】：2012-10-08 09:55:08
【问题描述】：

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

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

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

旋转图像后，我无法正确获取鼠标位置（或鼠标坐标）。旋转图像后，我想在上面正常涂鸦。

请在这种情况下帮助我。

【问题讨论】：

你到底想做什么？旋转矩形然后在上面画？
yaa 实际上不是矩形我正在尝试旋转图像并在其上绘制。
两个东西都在旋转，然后在上面涂鸦。

标签： javascript image html kineticjs

【解决方案1】：

我不确定 Kinetic.JS（从未使用过），但从纯粹面向 Canvas 的角度来看，我会使用 context.save() 和 context.restore() 方法。

查看 Kinetic.JS 文档，看看是否有类似的东西可用。通常，当您旋转画布时，会旋转所有内容，包括坐标。 save() 和 restore() 允许您保存当前画布状态（坐标集和转换），执行一些操作，然后再恢复它们。

自从我使用 Canvas 以来已经有一段时间了，所以如果我的解释不够清楚，请原谅我。我确实希望该链接有助于更好地解释它。希望这有助于您在自己的研究中走上正确的轨道，至少在对 Kinetic.JS 有更多了解的人参与之前。

【讨论】：

我试过 save() 和 restore() 但没有恢复上下文。
context.save(); context.rotate(Math.PI / 2); context.restore();

【解决方案2】：

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

【讨论】：