我需要在 Canvas 中旋转图像并同时调整它的大小以确保 Canvas 的 Angular 不会保持空白。解决方案应该类似于 aviary 的内容在“裁剪、调整大小和旋转”示例中。
我认为解决方案是结合 Canvas 的旋转和调整大小的功能,但我找不到任何具体的解决问题的方法,我在网上也没有找到任何详尽的例子。
任何建议都会有帮助
谢谢
最佳答案
我没有看过你给出的例子,但我给出了一个关于将旋转图像安装到 Canvas 上以使没有空格的问题的详细答案。
这涉及到一些数学(看图),但这只是基本的三 Angular 学,我解释了它是如何完成的。有两种解决方案,一种是找到适合 Canvas 进行任何旋转的最小比例,另一种是找到适合 Canvas 进行特定旋转的最小比例。
假设图像居中,如果不是,则有一种简单的方法可以通过提供抽象 Canvas 大小来调整提供的代码,以便旋转的图像在该抽象 Canvas 上居中。
因此,如果您的图像中心位于 x = 100
,y = 100
并且 Canvas 为 canvasWidth = 300
, canvasHeight = 300
然后只使用 absCanvasWidth = (canvasWidth - x) * 2;
的抽象大小然后 x = absCanvasWidth/2
的图像做高度相同。这将适合旋转、翻译的图像以填充 Canvas 。
可以在问题After rotate, draw Image at correct position 中找到带有代码的答案。
关于javascript - Canvas 旋转+缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35276287/