Нарисуйте стрелку на HTML5 Canvas между двумя объектами - PullRequest
Новая
       4

Нарисуйте стрелку на HTML5 Canvas между двумя объектами

9 голосов
/ 21 ноября 2011

Я работаю над приложением концептуальных карт, которое имеет набор узлов и ссылок. Я подключил ссылки к узлам, используя центр узла в качестве ссылки. Поскольку у меня есть узлы с различным размером и формой, не рекомендуется рисовать наконечник стрелки для ссылки, указав высоту или ширину формы. Мой подход заключается в том, чтобы нарисовать ссылку, начиная с одного узла, пиксель за пикселем, пока не будет достигнут следующий узел (здесь узлы имеют другой цвет, чем у фона), а затем, используя значение пикселя, я хочу определить точку пересечения ссылки и узла, который фактически является координатой для рисования наконечника стрелки.

Было бы здорово, если бы я мог помочь с этим.

Пример кода: http://jsfiddle.net/9tUQP/4/

Здесь зеленые квадраты - это узлы, а линия, начинающаяся с левого и входящая в правый квадрат, - это ссылка. Я хочу, чтобы стрелка была нарисована в точке пересечения ссылки и правого квадрата.

1 Ответ

16 голосов
/ 21 ноября 2011

Я создал пример, который делает это. Я использую Алгоритм линии Брезенхема , чтобы пройти линию целых пикселей холста и проверить альфа в каждой точке; всякий раз, когда он пересекает «пороговую» точку, я записываю это в качестве кандидата. Затем я использую первую и последнюю такие точки, чтобы нарисовать стрелку (с правильно повернутой стрелкой).

Вот пример: http://phrogz.net/tmp/canvas_shape_edge_arrows.html

Обновите пример, чтобы увидеть новый случайный тестовый пример. Он «потерпит неудачу», если у вас есть другая «фигура», уже перекрывающая одну из конечных точек. Один из способов решить эту проблему - нарисовать фигуры сначала на чистом холсте, а затем скопировать результат (drawImage) на конечный холст.

Для потомков Stack Overflow (в случае, если мой сайт не работает) вот соответствующий код: 

<!DOCTYPE html>
<html><head>
  <meta charset="utf-8">
  <title>HTML5 Canvas Shape Edge Detection (for Arrow)</title>
  <style type="text/css">
    body { background:#eee; margin:2em 4em; text-align:center; }
    canvas { background:#fff; border:1px solid #666 }
  </style>
</head><body>
  <canvas width="800" height="600"></canvas>
  <script type="text/javascript">
    var ctx = document.querySelector('canvas').getContext('2d');

    for (var i=0;i<20;++i) randomCircle(ctx,'#999');

    var start = randomDiamond(ctx,'#060');
    var end   = randomDiamond(ctx,'#600');
    ctx.lineWidth = 2;
    ctx.fillStyle = ctx.strokeStyle = '#099';
    arrow(ctx,start,end,10);

    function arrow(ctx,p1,p2,size){
      ctx.save();

      var points = edges(ctx,p1,p2);
      if (points.length < 2) return 
      p1 = points[0], p2=points[points.length-1];

      // Rotate the context to point along the path
      var dx = p2.x-p1.x, dy=p2.y-p1.y, len=Math.sqrt(dx*dx+dy*dy);
      ctx.translate(p2.x,p2.y);
      ctx.rotate(Math.atan2(dy,dx));

      // line
      ctx.lineCap = 'round';
      ctx.beginPath();
      ctx.moveTo(0,0);
      ctx.lineTo(-len,0);
      ctx.closePath();
      ctx.stroke();

      // arrowhead
      ctx.beginPath();
      ctx.moveTo(0,0);
      ctx.lineTo(-size,-size);
      ctx.lineTo(-size, size);
      ctx.closePath();
      ctx.fill();

      ctx.restore();
    }

    // Find all transparent/opaque transitions between two points
    // Uses http://en.wikipedia.org/wiki/Bresenham's_line_algorithm
    function edges(ctx,p1,p2,cutoff){
      if (!cutoff) cutoff = 220; // alpha threshold
      var dx = Math.abs(p2.x - p1.x), dy = Math.abs(p2.y - p1.y),
          sx = p2.x > p1.x ? 1 : -1,  sy = p2.y > p1.y ? 1 : -1;
      var x0 = Math.min(p1.x,p2.x), y0=Math.min(p1.y,p2.y);
      var pixels = ctx.getImageData(x0,y0,dx+1,dy+1).data;
      var hits=[], over=null;
      for (x=p1.x,y=p1.y,e=dx-dy; x!=p2.x||y!=p2.y;){
        var alpha = pixels[((y-y0)*(dx+1)+x-x0)*4 + 3];
        if (over!=null && (over ? alpha<cutoff : alpha>=cutoff)){
          hits.push({x:x,y:y});
        }
        var e2 = 2*e;
        if (e2 > -dy){ e-=dy; x+=sx }
        if (e2 <  dx){ e+=dx; y+=sy  }
        over = alpha>=cutoff;
      }
      return hits;
    }

    function randomDiamond(ctx,color){
      var x = Math.round(Math.random()*(ctx.canvas.width  - 100) + 50),
          y = Math.round(Math.random()*(ctx.canvas.height - 100) + 50);
      ctx.save();
      ctx.fillStyle = color;
      ctx.translate(x,y);
      ctx.rotate(Math.random() * Math.PI);
      var scale = Math.random()*0.8 + 0.4;
      ctx.scale(scale,scale);
      ctx.lineWidth = 5/scale;
      ctx.fillRect(-50,-50,100,100);
      ctx.strokeRect(-50,-50,100,100);
      ctx.restore();
      return {x:x,y:y};
    }

    function randomCircle(ctx,color){
      ctx.save();
      ctx.beginPath();
      ctx.arc(
        Math.round(Math.random()*(ctx.canvas.width  - 100) + 50),
        Math.round(Math.random()*(ctx.canvas.height - 100) + 50),
        Math.random()*20 + 10,
        0, Math.PI * 2, false
      );
      ctx.fillStyle = color;
      ctx.fill();
      ctx.lineWidth = 2;
      ctx.stroke();
      ctx.restore();
    }

  </script>
</body></html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...