Fabric.js 가이드/윤곽선

Question

fabric.js를 사용하여 인쇄용 이미지를 출력하는 편집기를 작성하고 있습니다. 이것들은 완전한 흘림 인쇄물이 될 것이고 나는 캔버스에있는 모든 것 위에 흘림 마진을 보여줄 수있는 방법이 필요합니다.

내가 지금까지 발견 한 가장 좋은 해결책은 캔버스에 4 개의 선을 그 으려는 것인데, 끊임없이 다른 물체 뒤에 놓고 물체를 쌓아 올리는 순서를 고수하고 있습니다.

간단한 해결책이있는 것처럼 보입니다. 이견있는 사람?

Answer 1

그래서 가장 좋은 방법은 그 4 개 라인과 당신이 또한 전면 라인의 그룹을 가지고 필요한 페이지에 새 개체를 추가 할 때마다 그룹을 만들기 위해 아마.

var canvas = new fabric.Canvas('c', { 
 
\t selection: true, 
 
    preserveObjectStacking: true, 
 
}); 
 
window.canvas = canvas; 
 

 
var line1 = new fabric.Line([ 
 
    10, 0, 
 
    10, canvas.height 
 
],{ 
 
    stroke: '#000', 
 
}) 
 
var line2 = new fabric.Line([ 
 
    canvas.width - 10, 0, 
 
    canvas.width - 10, canvas.height 
 
],{ 
 
    stroke: '#000', 
 
}) 
 
var line3 = new fabric.Line([ 
 
    0, 10, 
 
    canvas.width, 10 
 
],{ 
 
    stroke: '#000', 
 
}) 
 
var line4 = new fabric.Line([ 
 
    0, canvas.height - 10, 
 
    canvas.width, canvas.height - 10 
 
],{ 
 
    stroke: '#000', 
 
}); 
 

 
var group = new fabric.Group([ 
 
\t line1, 
 
    line2, 
 
    line3, 
 
    line4 
 
]); 
 
group.selectable = false; 
 
group.evented = false; 
 

 
canvas.add(group); 
 

 
canvas.add(new fabric.Circle({ 
 
    left: 300, 
 
    top: 300, 
 
    radius: 50, 
 
    fill: '#9f9', 
 
    originX: 'left', 
 
    originY: 'top', 
 
    centeredRotation: true 
 
})); 
 
group.bringToFront();

canvas { 
 
    border: 1px solid #ccc; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script> 
 

 
<canvas id="c" width="600" height="600"></canvas>