Canvas 和/或 SVG 会进行转换（移动、缩放、旋转）吗？答案

【问题标题】：Will Canvas and / or SVG do transformations (move, scale, rotate)?Canvas 和/或 SVG 会进行转换（移动、缩放、旋转）吗？
【发布时间】：2015-05-05 01:39:57
【问题描述】：

我的任务是开发一个在线传单，其中对象必须是可调整大小、可移动、可拖动和可旋转的。哪种技术将涵盖所有这些功能？

我尝试使用 jcanvas。虽然它可以拖动，但它似乎无法调整大小和旋转。

【问题讨论】：

试试 fabric.js。查看这些演示：fabricjs.com/demos
看起来不错。谢谢，伙计！

标签： canvas svg

【解决方案1】：

SVG 和 Canvas 都会进行转换：移动、缩放、旋转。

由于 SVG 元素实际上是 DOM 元素，因此它们在每个元素中都内置了用于转换的管道。但是您仍然必须管理那些 SVG 转换（管理 == 触发/响应转换）。

在 Canvas 上绘制的对象就像艺术家画布上的干颜料。要对 Canvas 上的特定对象进行变换，您必须清除 Canvas 并在当前位置重新绘制每个对象。和 SVG 一样，您必须使用自己的 javascript 管理这些转换。

有些库会自动为您进行转换管理。

SVG 库：http://snapsvg.io/

画布库：http://fabricjs.com/ 和 http://konvajs.github.io/

我不推荐特定的 Lib。这些只是我使用过的 Lib，并且知道它们可以很好地工作。

祝你的项目好运！

【讨论】：

谢谢。还有一个问题，SVG 是可保存和可编辑的吗？这意味着它可以保存为 jpg/pdf 并在以后重新编辑？
@user1576748。目前 SVG 不能直接转换为图像（再次出于安全原因）。解决方法是将最终的 SVG 绘制到 Canvas 元素上，并使用 Canvas 的 .toDataURL 方法将 SVG-onCanvas 导出到图像。此解决方法适用于 Chrome 和 Firefox，但出于安全原因在 Internet Explorer 中失败。