6

核心问题：

目标是将 SVG 的一部分渲染为网页上固定大小的 Canvas 元素。

我尝试的解决方案：

看到CanVG似乎是在 Canvas 中渲染 SVG 图像的最直接方式，我想我可以利用viewBox属性在 CanVG 渲染之前裁剪图像。在这一点上我一直有麻烦。

问题：

提供 SVG 图像，如何将图像的一部分渲染到 Canvas 元素？

4

2 回答 2

3

  1. 创建一个屏幕外画布并使用CanVG对其进行渲染：

    var full = document.createElement('canvas');
full.width=800; full.height=600;
canvg(full, '<svg>…&lt;/svg>');

  2. 使用以下方法将此画布作为图像的一部分复制到另一个画布上的区域drawImage（有关参数详细信息，请参见链接）：

    var ctx = myVisibleCanvas.getContext('2d');
ctx.drawImage(full,10,20,80,60,92,16,80,60);

编辑：但是，如果您可以访问 SVG 源（直接在 JS 中或通过 XMLHTTP 请求）并且可以viewBox在渲染之前修改属性，则上述内容不是必需的。请参阅此演示，它显示了一个 SVG 文件直接渲染到一个画布，然后更改viewBox属性并将剪切区域渲染到另一个画布。

于 2012-04-05T02:45:32.730 回答
1

您遇到的具体问题是什么？context.drawImage 函数内置了一个很好的裁剪功能。您只需将 9 个参数传递给它，而不是标准的 3 个参数（图像对象、x 位置、y 位置），它就会裁剪图像。这些是参数：

context.drawImage(
imageObject,
original image x crop position,
original image y crop position,
original image crop width,
original image crop height,
canvas image x crop position,
canvas image y crop position,
canvas image crop width,
canvas image crop height
)

我不知道这是否适用于 CanVG，但只要您可以将图像对象传递给函数 drawImage()，您就可以按照代码中的说明进行裁剪。

于 2012-04-05T02:07:41.150 回答