Fabric.js指南/出血线

Question

我正在使用fabric.js构建一个可以输出图像进行打印的编辑​​器。这些将是完全出血的打印，我需要一种方法来显示画布上其他所有内容的出血边距。

到目前为止，我发现的最佳解决方案是在画布上绘制4条线，但它们不断被放在其他对象后面并且弄乱对象堆叠顺序。

似乎应该有一个简单的解决方案。有什么想法吗？

Answer 1

所以你最好的选择可能是制作这4行的一组，每次你向页面添加一个新对象时，你需要将这组行放在前面。

＆＃13;

＆＃13;

var canvas = new fabric.Canvas('c', { 
	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([
	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();

＆＃13;

canvas {
    border: 1px solid #ccc;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;