Я использую Fabric.js для создания редактора, который будет выводить изображения для печати. Это будут отпечатки под обрез, и мне нужен способ показать поля под обрез поверх всего остального на холсте.
Лучшее решение, которое я нашел до сих пор, — это просто нарисовать 4 линии на холсте, но они постоянно помещаются за другими объектами и нарушают порядок расположения объектов.
Кажется, что для этого должно быть простое решение. Какие-нибудь мысли?
Так что лучше всего, вероятно, сделать группу из этих 4 строк, и каждый раз, когда вы добавляете новый объект на страницу, вам также нужно выводить группу строк на передний план.
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();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>