沿着画布上的一行放置文本标签

Question

我设法使用html5在画布上绘制一条线:

ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();

这有效.我现在想用文本"注释"该行.所以基本上,我希望有自定义(例如,无论我传入什么)文本沿着行的长度出现.难点在于线可以以任何方向出现(例如,具有任何斜率),因此文本需要相应地定向.任何想法如何开始？

Answer 1

我在我的网站上创建了一个这样的例子.一般来说,你想:

1. translate 那么,文本锚点的上下文
2. rotate 你希望的数量(以弧度表示)的上下文然后
3. fillText 像平常一样.

我在下面列出了我的例子中的相关部分; 我将它作为练习留给读者,以检测文本何时颠倒并按需要处理. 编辑:查看我网站上的源代码,以获取保持文本直立的其他代码,并自动截断它.

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.