1

我在一个 HTML5 项目中工作。我想绘制带边界的文本（即文本注释）。

首先，我在 mousemove 上绘制一个矩形并在其中填充文本，如下所示：

context.strokeRect(x,y,w,h);
context.fillText('Enter youe text here',x,y);

但是当我开始绘制文本注释时，文本会完全绘制。所以文本溢出矩形边界之外。所以我想拍摄矩形部分的图像，然后我可以管理这个文本溢出问题。我正在使用以下方式来做到这一点： -

 context.strokeRect(x,y,w,h);
 context.fillText('Enter youe text here',x,y);
 var imageData = context.getImageData(x,y,w,h);
 var data = imageData.data;
 context.putImageData(imageData, x,y);

通过这种方式，文本图像成功创建，但现在我如何隐藏 fillText(x,y,w,h) 语句，并且我还在文本的帮助下将图像数据放在矩形内。

非常感谢提前

4

1 回答 1

2

如果我理解正确，您似乎想测量文本宽度并将画布拆分？

我制作了一个小例子来解释如何使用 measureText 方法：

http://jsfiddle.net/sQ3S7/

实际上，正如您在演示中看到的那样，它没有返回测量的高度尺寸。因此，您可能必须逐行遍历画布以找出文本的高度。

对于我的 JS 游戏引擎，我做了一个小字体工具，它完全可以做到这一点并将其导出为 JSON 格式，也许后面的算法会帮助你:)

http://martens.ms/lycheeJS/tool/Font.html

代码可在 github.com/martensms/lycheeJS 上找到（不能发布超过两个链接，因为我是 SO 新手）

~干杯

于 2012-07-23T09:01:21.050 回答