javascript - 选择正确的技术(SVG 与 Canvas)

Question

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

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

因此，Canvas 似乎是一个更好的选择，因为它不会通过跟踪形状而引入额外的开销，我已经必须跟踪这些形状才能使我自己的裁剪实现工作。不仅如此，我已经实现了可以移动、旋转和缩放的多边形类。然而，Canvas 有一些其他问题(我必须实现自己的重绘方法，我确信它不会像利用 Chrome 和 Firefox 中特定于浏览器的框架的 SVG 方法那样高效；而且我有接受 IE 不兼容，这由 Raphael 等库免费处理)。

谢谢

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>

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