Canvas로 화살표 그리기

소개



Canvas 어느 정도 범용적으로 여러가지 화살표를 그리는 라이브러리를 만들었으므로 소개합니다.

데모 & 라이브러리



결국 이런 느낌으로 여러가지 모양의 화살표를 그릴 수 있게 되었습니다.


  • 데모 htps : // f 여과 또는 t. 기주 b. 이오
  • GitHub htps : // 기주 b. 이 m / f 로 g 또는 t / 칸 ゔ s - 아로 w

  • 사용법



    example.html
    <script src="https://frogcat.github.io/canvas-arrow/canvas-arrow.js"></script>
    
    ...
    <script>
    var context = canvas.getContext("2d");
    context.beginPath();
    context.arrow(0, 0, 200, 100, [0, 5, -20, 5, -20, 15]);
    context.fill();
    </script>
    
    
    https://frogcat.github.io/canvas-arrow/canvas-arrow.js는 CanvasRenderingContext2D의 prototype에 arrow 메서드를 추가합니다.
    arrow 메서드의 API는 이런 식입니다.
    context.arrow(startX,startY,endX,endY,controlPoints);
    

  • startX : 시작점의 X 좌표

  • startY : 시작점의 Y 좌표

  • endX : 종점의 X 좌표

  • endY : 종점의 Y 좌표

  • controlPoints : 화살표 모양을 지정하기위한 제어점 배열

  • controlPoints 에는 [x1,y1,x2,y2,x3,y3...] 와 같이 제어점의 X,Y 좌표치가 포함됩니다.
    좌표치의 의미는 아래 그림과 같습니다.


  • x 좌표가 양수이면 시작에서 상대 좌표로, 음수이면 end에서 상대 좌표로 간주됩니다.
  • 끝점 바로 위와 아래를 지정하려면 -Number.MIN_VALUE와 같은 매우 작은 음수 값을 지정하십시오.

    해설



    상당히 짧은 코드입니다.

    canvas-arrow.js
    (function(target) {
      if (!target || !target.prototype)
        return;
      target.prototype.arrow = function(startX, startY, endX, endY, controlPoints) {
        var dx = endX - startX;
        var dy = endY - startY;
        var len = Math.sqrt(dx * dx + dy * dy);
        var sin = dy / len;
        var cos = dx / len;
        var a = [];
        a.push(0, 0);
        for (var i = 0; i < controlPoints.length; i += 2) {
          var x = controlPoints[i];
          var y = controlPoints[i + 1];
          a.push(x < 0 ? len + x : x, y);
        }
        a.push(len, 0);
        for (var i = controlPoints.length; i > 0; i -= 2) {
          var x = controlPoints[i - 2];
          var y = controlPoints[i - 1];
          a.push(x < 0 ? len + x : x, -y);
        }
        a.push(0, 0);
        for (var i = 0; i < a.length; i += 2) {
          var x = a[i] * cos - a[i + 1] * sin + startX;
          var y = a[i] * sin + a[i + 1] * cos + startY;
          if (i === 0) this.moveTo(x, y);
          else this.lineTo(x, y);
        }
      };
    })(CanvasRenderingContext2D);
    
  • 일단 제어점 좌표계로 화살표의 다각형을 만듭니다
  • 다각형을 아핀 변환하여 시작점과 끝점 좌표계에 투영합니다.
  • moveTo/lineTo 로 결과를 그립니다

  • 요약



    Canvas arrow 에서 검색하면 h tp : / / s tac ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 808826 / d 등 w 이런 식으로 솔루션은 있습니다만, 화살표의 형태를 바꿀 때마다 좌표 변환이나 삼각 함수나 생각을 하는 것은 정신 위생상 좋지 않습니다. 큰 라이브러리에 의존하는 것도 조금, 라고 하는 경우에 도움이 될지도 모릅니다.

    좋은 웹페이지 즐겨찾기