Размещение текстовой метки вдоль линии на холсте

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.

Answer 2

Я использовал его, и это сработало =) Я просто что-то изменил, чтобы при вращении узла метка всегда находилась в хорошем положении для чтения:

В своей функции перерисовки я поместил что-то вродеэто:

particleSystem.eachEdge(function(edge, pt1, pt2){
      // edge: {source:Node, target:Node, length:#, data:{}}
      // pt1:  {x:#, y:#}  source position in screen coords
      // pt2:  {x:#, y:#}  target position in screen coords
      // draw a line from pt1 to pt2

     var dx = (pt2.x - pt1.x);
     var dy = (pt2.y - pt1.y);
     var p, pad;
     var alignment = "center";


      //ctx.label(edge.data.role,dx,dy,5,90,14);
      ctx.strokeStyle = "rgba(0,0,0, .333)";
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.moveTo(pt1.x, pt1.y);
      ctx.lineTo(pt2.x, pt2.y);
      ctx.stroke();


     p = pt1;
     pad = 1/2;
     ctx.save();
 ctx.textAlign = alignment;
 ctx.translate(p.x+dx*pad,p.y+dy*pad);
     if(dx < 0)
     {
     ctx.rotate(Math.atan2(dy,dx) - Math.PI);  //to avoid label upside down
     }
     else
     {
     ctx.rotate(Math.atan2(dy,dx));

 }
     ctx.fillStyle = "black"
     ctx.fillText(edge.data.role,0,0);

 ctx.restore();
    })          

Спасибо,

Дамарис.