在另一幅画布上的织物画布答案

【问题标题】：fabric canvas on top of another canvas在另一幅画布上的织物画布
【发布时间】：2018-01-27 07:55:24
【问题描述】：

有没有办法让两个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>

【问题讨论】：

查看这个：stackoverflow.com/a/3008863/7132835
我可以将画布 div 堆叠在一起，但是一旦我开始在它们上面绘图，这些 div 就会显示在另一个之上

标签： canvas fabricjs

【解决方案1】：

我分享了如何使用来自 stackoverflow 帖子的 CSS 放置图层的信息：https://stackoverflow.com/a/3008863/7132835 您需要执行相同的逻辑，但此外您需要将以下代码添加到您的织物画布声明中：

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

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

【讨论】：