fabric canvas on top of another canvas

问题

Is there a way to have two fabricJS canvases one top of each other? I want to be able to draw on both canvases, but I want my lines contained only on Canvas Top. Canvas Bottom will have labels that will not be able to be drawn on Canvas Top.

Crude image of what I'm trying to go for

I thought I could layer two canvases together, one on top of another using css:

<style>
.div {
    width: 1550px;
    height: 512px;
    border: solid 0px #4a7497;
    margin-top: -512px;
    margin-left: 100px;
    position: relative;
}
</style>

<canvas id="canvasBottom" width="1650" height="612"</canvas>
<canvas id="canvasTop" class="div" width="1550" height="512"></canvas>

My script just renders the bottom canvas. At this point, all i want to do is display both canvases but have my lines on canvas top.

<script type="text/javascript">
$( document ).ready(function() {
    var canvasBottom = new fabric.Canvas('canvasBottom', { selection: false, backgroundColor: 'black', targetFindTolerance: 20});
    var canvas = new fabric.Canvas('canvasTop', { selection: false, backgroundColor: 'white', targetFindTolerance: 20});

    canvas.setBackgroundImage('http://website/image/background.png', 
    canvas.renderAll.bind(canvas));

    var grid = 15;
    var d = document,
    ge = 'getElementById';

    //draws vertical lines
    for (var i = 1; i <= (<?php echo $yLines; ?>); i++) {
        canvas.add(new fabric.Line([ i * grid+100, 0, i * grid+100, 612],{stroke: 'yellow',strokeWidth: 1}));
    }

    canvas.renderAll();
    canvasBottom.renderAll();
});
</script>

回答1:

As I shared information how to put layers using CSS from stackoverflow post: https://stackoverflow.com/a/3008863/7132835 you need to do the same logic, but in addition you will need to add code below to your fabric canvas declaration:

var canvasBottom = new fabric.Canvas('layer1',{position: absolute});
var canvas = new fabric.Canvas('layer2',{position: absolute});

You can add additional properties as a background, etc.

来源：https://stackoverflow.com/questions/45759866/fabric-canvas-on-top-of-another-canvas

标签

canvas

fabricjs