Canvas로 화살표 그리기
소개
Canvas 어느 정도 범용적으로 여러가지 화살표를 그리는 라이브러리를 만들었으므로 소개합니다.
데모 & 라이브러리
결국 이런 느낌으로 여러가지 모양의 화살표를 그릴 수 있게 되었습니다.
결국 이런 느낌으로 여러가지 모양의 화살표를 그릴 수 있게 되었습니다.
사용법
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);
<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>
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 좌표치가 포함됩니다.
좌표치의 의미는 아래 그림과 같습니다.
-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);
(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);
요약
Canvas arrow 에서 검색하면 h tp : / / s tac ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 808826 / d 등 w 이런 식으로 솔루션은 있습니다만, 화살표의 형태를 바꿀 때마다 좌표 변환이나 삼각 함수나 생각을 하는 것은 정신 위생상 좋지 않습니다. 큰 라이브러리에 의존하는 것도 조금, 라고 하는 경우에 도움이 될지도 모릅니다.
Reference
이 문제에 관하여(Canvas로 화살표 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/frogcat/items/2f94b095b4c2d8581ff6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Canvas로 화살표 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/frogcat/items/2f94b095b4c2d8581ff6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
