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>