我设法使用 html5 在 Canvas 上画了一条线:
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
这行得通。我现在想用文本“注释”该行。所以基本上,我希望沿着行的长度出现自定义(例如,无论我传入什么)文本。困难在于线条可以出现在任何方向(例如,有任何斜率),因此文本需要相应地定向。有什么想法可以开始吗?
最佳答案
我已经创建了一个例子 on my website .一般来说,您想要:
将上下文翻译
到文本的 anchor ,然后将上下文旋转
您想要的量(以弧度为单位),然后fillText
正常。
我在下面包含了示例的相关部分; 我把它作为练习留给读者,以检测文本何时颠倒并根据需要进行处理。
编辑:查看我网站上的源代码以获取使文本保持直立并自动 chop 文本的附加代码。
function drawLabel( ctx, text, p1, p2, alignment, padding ){
if (!alignment) alignment = 'center';
if (!padding) padding = 0;
var dx = p2.x - p1.x;
var dy = p2.y - p1.y;
var p, pad;
if (alignment=='center'){
p = p1;
pad = 1/2;
} else {
var left = alignment=='left';
p = left ? p1 : p2;
pad = padding / Math.sqrt(dx*dx+dy*dy) * (left ? 1 : -1);
}
ctx.save();
ctx.textAlign = alignment;
ctx.translate(p.x+dx*pad,p.y+dy*pad);
ctx.rotate(Math.atan2(dy,dx));
ctx.fillText(text,0,0);
ctx.restore();
}
仅适用于 Firefox,您还可以选择使用 (已弃用)mozTextAlongPath
.
关于javascript - 沿着 Canvas 上的一条线放置文本标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5068216/