选择合适的技术（SVG vs Canvas）

Question

我正在编写一个用于形状操作的应用程序，这样在创建简单形状之后，用户可以通过将形状相互剪切来创建更复杂的形状（即将两个圆组合在一起形成使用单个路径存储的图8而不是一个小组，或执行两个圆圈的交集以创建“咬”标记），并且我正在尝试决定要使用的图形库。

SVG似乎可以处理开箱即用的80％功能（形状存储，移动，旋转，缩放）。问题是，如果不在我自己的模块中重新创建SVG功能，其他20％（使用剪辑创建一组新的复杂多边形）似乎无法实现（我必须存储一次用于在SVG中绘制的形状，并且一次用于处理剪裁自己）。我可能错了SVG，但通过阅读拉斐尔库（基于SVG），它似乎只使用矩形处理剪裁，甚至剪辑是临时的（它只渲染部分形状，但仍然存储整个形状移动剪切矩形后重新渲染）。也许我只是对SVG标准感到困惑，但是甚至在SVG中检索/解析使用先前路径的子集计算新路径的路径似乎并不明显（有一个Subpath（）函数，但是我没有看到任何内容找到两个多边形周长的交点，或将几个子路径组合成一个路径。）

因此，Canvas似乎是一个更好的选择，因为它不会通过跟踪我已经拥有的形状来引入额外的开销，以使我自己的剪辑实现工作。不仅如此，我已经实现了可以移动，旋转和缩放的多边形类。 Canvas有一些其他问题，但是（我必须实现自己的重绘方法，我肯定不会像利用Chrome和Firefox中的浏览器特定框架的SVG一样高效;而且我有接受与Raphael等图书馆免费处理的IE不兼容性。

由于

Answer 1

这可能会解决你提到的问题。

使用'clipPath'元素可以使用非矩形对象完成剪切。

例如，我的id为'clipper'的元素定义了要剪切的内容，以及一个受裁剪影响的路径。不确定它们是否与此代码段相交。

<g clip-rule="nonzero">
  <clipPath id="clipper">
    <ellipse rx="70" ry="95" clip-rule="evenodd"/>
  </clipPath>

  <!-- stuff to be clipped -->
  <path clip-path="url(#clipper)" d="M-100 0 a100 50"/>
</g>

这只是我所拥有的一些片段。希望它有所帮助。

Answer 2

在我看来，你正在尝试做二维构造几何。由于SVG以保留模式运行，因此会存储您绘制的对象，然后执行各种操作。使用Canvas，您将对位图进行运行，以便立即进行更改。由于您的用户将在更简单的形状上执行更多操作以创建更复杂的形状，因此从长远来看Canvas应该更适合。

唯一突出的问题是，一旦用户完成这些对象，将对这些对象做些什么。如果你缩放图像，它将获得锯齿。 SVG将避免这个问题，但你会在更大的复杂性和性能影响下进行权衡。

Answer 3

svg和canvas都是矢量图形技术。每个都有一些不同的功能。

帆布

Canvas是一个位图，带有立即的modegraphics应用程序编程接口（API），用于绘制它。 Canvas是一种“即发即忘”的模型，它将图形直接渲染到其位图，然后对绘制的形状没有任何意义;只有结果位图保持不变。

有关画布的更多信息 - http://www.queryhome.com/51054/about-html5-canvas

SVG

SVG用于描述可缩放矢量图形

SVG被称为保留在内存模型中的保留模式图形模型。类似于HTML，SVG构建元素，属性和样式的对象模型。当元素出现在HTML5文档中时，它的行为类似于内联块，并且是HTML文档树的一部分。

有关SVG的更多信息 - http://www.queryhome.com/50869/about-svg-part-1

有关canvas vs svg的详细信息，请参阅此处 - Comparing svg vs canvas

Answer 4

你是对的 - 无论你使用的是SVG还是Canvas，你都必须在数学上执行剪裁和创建新形状。我有偏见，看起来使用SVG会更有用，因为你还可以在形状（鼠标，拖动）上获得DOM事件，并将其序列化为免费的图形格式。