4

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

SVG 似乎可以处理我需要的 80% 的开箱即用功能（形状存储、移动、旋转、缩放）。问题是如果不在我自己的模块中重新创建 SVG 功能，另外 20%（使用剪裁来创建一组新的复杂多边形）似乎是不可能实现的（我必须将形状存储一次以在 SVG 中绘图，一次用于自己处理剪辑）。我对 SVG 的看法可能是错误的，但是通过阅读 Raphael 库（基于 SVG），它似乎只使用矩形处理剪辑，甚至剪辑也是暂时的（它只呈现部分形状，但仍存储整个形状移动剪切矩形后重新渲染）。也许我只是对 SVG 标准感到困惑，

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

谢谢

4

4 回答 4

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>

这只是我所拥有的东西的一个片段。希望能帮助到你。

于 2010-06-30T18:00:53.013 回答
2

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

帆布

Canvas 是一个位图，带有用于在其上绘图的即时模式图形应用程序编程接口 (API)。Canvas 是一种“一劳永逸”的模型，它将其图形直接渲染到其位图，然后对所绘制的形状毫无感觉；只有生成的位图保留。

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

SVG

SVG 用于描述 Scalable Vector Graphics

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

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

svg 与画布

有关 canvas 与 svg 的详细信息，请参见此处 -比较 svg 与 canvas

于 2014-11-07T14:22:29.843 回答
2

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

唯一悬而未决的问题是，一旦您的用户使用完这些对象，将如何处理它们。如果你放大图像，它会得到锯齿。SVG 将避免这个问题，但您需要权衡更大的复杂性和性能影响。

于 2011-05-02T23:38:34.913 回答
1

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

于 2010-06-30T19:34:38.740 回答