fabricjs를 사용하여 캔버스의 중심에 세로선을 그립니까?

Question

내 캔버스의 정확한 가운데에 선을 그려 넣으려고합니다. 지금 나는 일종의 해킹 방법을 사용하고 있습니다.

// Centered Line 
fabric.Image.fromURL('https://i.imgur.com/zM63v6J.png', function(myImg) { 
    var img1 = myImg.set({ 
    left: 306, 
    selectable: false, 
    }); 
    canvas.add(img1); 
}); 

이렇게하면 작업이 완료되지만 좀 더 가벼운 방법 일 것입니다.

도움을 주시면 감사하겠습니다. 당신은 수직 중심선에 대한 [canvas.width/2,0,canvas.width/2,canvas.height] 좌표이 라인을 사용할 수 있습니다

Answer 1

var canvas = new fabric.Canvas('c'); 
 
var line = new fabric.Line([canvas.width/2,0,canvas.width/2,canvas.height],{ 
 
    strokeWidth:2, 
 
    stroke: 'red', 
 
}); 
 
canvas.add(line);

canvas{ 
 
border: 2px dotted black; 
 
}

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script> 
 
<canvas id="c" width="500" height="500"></canvas>

미리 감사드립니다.