javascript - Canvas 旋转+缩放

标签 javascript html canvas

我需要在 Canvas 中旋转图像并同时调整它的大小以确保 Canvas 的 Angular 不会保持空白。解决方案应该类似于 aviary 的内容在“裁剪、调整大小和旋转”示例中。

我认为解决方案是结合 Canvas 的旋转和调整大小的功能,但我找不到任何具体的解决问题的方法,我在网上也没有找到任何详尽的例子。

任何建议都会有帮助

谢谢

最佳答案

我没有看过你给出的例子,但我给出了一个关于将旋转图像安装到 Canvas 上以使没有空格的问题的详细答案。

这涉及到一些数学(看图),但这只是基本的三 Angular 学,我解释了它是如何完成的。有两种解决方案,一种是找到适合 Canvas 进行任何旋转的最小比例,另一种是找到适合 Canvas 进行特定旋转的最小比例。

假设图像居中,如果不是,则有一种简单的方法可以通过提供抽象 Canvas 大小来调整提供的代码,以便旋转的图像在该抽象 Canvas 上居中。

因此,如果您的图像中心位于 x = 100y = 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/

相关文章:

javascript - 如何在 JavaScript 中拆分数组的查询字符串

html - 为什么垂直对齐 flexbox (1 :1 copy of MDN example) not working in Chrome?

javascript - Canvas html5 中的透明 context.fill 样式

javascript - 使用 Fabricjs 1.5.0 时 Canvas 中的图像模糊

javascript - 如何通过 Joi 模式验证进行多个唯一检查?

javascript - 测试 Protractor 中的元素是否被禁用

javascript - 带有 Highcharts 的实时数据

javascript - 尝试使用循环将数组中的所有项目放入文本输入数据列表中

html - 显示 : inline-block wont center in bootstrap

android - 如何用手指画多条线? (安卓)