选择正确的技术（SVG与Canvas）

Question

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

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

因此，Canvas似乎是一个更好的选择，因为它不会通过跟踪形状来引入额外的开销，而这些形状我已经必须跟踪才能使自己的剪切实现起作用。 不仅如此，我已经实现了可以移动，旋转和缩放的面类。 但是，Canvas还有其他一些问题（我必须实现自己的重绘方法，我敢肯定它不会像利用Chrome和Firefox中特定于浏览器的框架的SVG那样高效。接受IE不兼容，该兼容性可通过Raphael之类的库免费处理）。

谢谢

Answer 1

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

帆布

Canvas是一个位图，带有一个即时模式图形应用程序编程接口（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- 比较svg vs canvas

Answer 2

这可以解决您提到的问题。

可以使用'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 3

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

唯一悬而未决的问题是，一旦您的用户使用完这些对象，这些对象将如何处理。 如果缩放图像，将出现锯齿。 SVG可以避免该问题，但是您需要权衡更大的复杂性和性能影响。

Answer 4

没错-无论使用SVG还是Canvas，都必须在数学上执行剪切和创建新形状的操作。 我有偏见，使用SVG似乎会更有用，因为您还可以免费获得形状上的DOM事件（鼠标，拖动）和序列化为图形格式的东西。