canvas 직선에 평행하는 선 그리기

catch me if u can!·2021년 3월 5일
0

HTML canvas drawing line perpendicular on another line - stackoverflow
Fabric.js is a powerful and simple Javascript HTML5 canvas library

캔버스에서 두객체(동그라미 또는 사각형) 사이에 왕복선을 그리는 기능구현 테스트!

var $canvas = new fabric.Canvas("canvas");

//
function drawParallelLines(x1, y1, x2, y2) {
  var px = y1 - y2;
  var py = x2 - x1;
  var endLen = 10; //distance between two parallel lines
  var len = endLen / Math.hypot(px, py);
  px *= len;
  py *= len;
  $canvas.add(new fabric.Line([x1, y1, x2, y2], { stroke: 'black' }));           
  $canvas.add(new fabric.Line([x1+px, y1+py, x2+px, y2+py], { stroke:'red' });
  $canvas.add(new fabric.Line([x1-px, y1-py, x2-px, y2-py], { stroke:'red' });
}
profile
마쿠투소케 난쿠로나이사

0개의 댓글