3

我有一堆 SVG 文本需要绘制到画布上。我正在将我的 SVG 对象转换为 SVG 数据 URI，将其应用于图像的源，然后将该图像绘制到画布上，但由于某种原因，它会在一定宽度和高度后剪切文本。

我知道问题不在于画布大小，因为我还首先将其他图像绘制到画布上（这比文本更宽更高），没有任何问题。另一个奇怪的事情是，如果我把图像附加到身体上，它就会完美地呈现出来。

var imageText = new Image();
imageText.src = "data:image/svg+xml;base64," + btoa($("#text_container").html());
imageText.onload = function() { context.drawImage(imageText, 0, 0); };

#text_container 是我的 DIV，它包含所有 SVG 代码。

编辑：为了提供更多细节，这是我在下面写的评论：我正在构建一个 JS 应用程序，让用户创建自定义足球。您可以更改球和文本的不同颜色和特征，因此可以归结为带有一些 SVG 文本的多个 DIV（因为文本沿着弧形路径移动）。我可以获取 DIV 的背景图像并将其绘制到画布上，以创建足球。当我尝试将文本绘制到画布上时遇到问题，因为它正在被裁剪。然后我将把那个画布元素转换成 PNG 供用户保存。

我将文本向上和向左移动更多，以便您可以更好地看到裁剪。如您所见，球抽得很好。 http://i.imgur.com/Sngu4.png

4

3 回答 3

0

假设这context是您的画布的 RenderingContext（“2D”），您应该在context.drawImage()函数中包含“destiny width”和“destiny height”参数：

context.drawImage(image, dx, dy, dw, dh)

如果 myCanvas 是您的画布对象的 id（而 $ 是 jQuery 的函数），您可以调用：

var dw = $('myCanvas').width();
var dh = $('myCanvas').height();
context.drawImage(image, 0, 0, dw, dh);

这将缩放图像以适合整个画布。我的建议是首先“查看”svg 图像是什么（即，将其添加到正文并测量文本的坐标：sx、sy、sw 和 sh，在上面的链接中），因为您可能必须裁剪它“故意”以便将其放置在您想要的位置：

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
于 2012-12-08T03:53:03.273 回答
0

在黑暗中拍摄....drawImage()有一些可以设置的尺寸参数吗？也许它有一个默认值，它正在绘制大小，然后剪裁其余部分。只是一个想法...

也可能是因为您的图像是动态创建的，因此缺少某种图像大小参数，这些参数通常包含在drawImage()函数可能正在寻找的 .jpg 文件中。

于 2012-12-07T19:51:00.253 回答
0

我遇到了同样的问题，但我想我刚刚找到了解决方案。

仅在 SVG 元素上设置 awidth和 a 是不够的。height显然，您还需要设置viewBox：

<svg width="720" height="400" viewBox="0 0 720 400"></svg>

这应该在画布上正确渲染图像。:)

于 2016-04-29T23:46:48.180 回答