Question

有没有办法让两个fabricJS画布彼此叠加？我希望能够在两幅画布上画画，但我希望我的画线只包含在Canvas Top上。 Canvas Bottom将具有无法在Canvas Top上绘制的标签。

Crude image of what I'm trying to go for

我以为我可以将两个画布分层，一个在另一个上面使用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>

我的脚本只渲染底部画布。在这一点上，我想要做的只是展示两幅画布，但在画布上方有我的线条。

<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>

Answer 1

我分享了如何使用来自stackoverflow post：https://stackoverflow.com/a/3008863/7132835的CSS来放置图层的信息，你需要做同样的逻辑，但另外你需要在你的光纤画布声明中添加以下代码：

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

您可以添加其他属性作为背景等。

另一个画布上的织物帆布

1 个答案: