Използвам 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>