在另一个画布上的织物画布 [英] fabric canvas on top of another canvas

问题描述

有没有办法让两个fabricJS画布彼此叠置？我希望能够在两个画布上绘制，但我希望线条仅包含在画布顶部中。 画布底部将具有无法在画布顶部上绘制的标签。

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.

我要尝试的粗糙图像

我以为我可以将两个画布叠在一起，一个

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>

推荐答案

当我共享信息时，如何使用CSS stackoverflow帖子： https://stackoverflow.com/a/3008863/7132835 您需要执行相同的逻辑，但是在此外，您需要在面料画布声明中添加以下代码：

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.

这篇关于在另一个画布上的织物画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！