另一塊帆布頂部的面料帆布

有沒有辦法讓兩個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>

來源

2017-08-18 Stoops

檢查這一項：https://stackoverflow.com/a/3008863/7132835 – Observer

我可以堆疊在彼此的頂部帆布div但一旦我開始繪製他們，divs顯示一個另一個 – Stoops

正如我共享的信息如何把使用CSS層從計算器後：https://stackoverflow.com/a/3008863/7132835你需要做同樣的邏輯，但除了你需要以下代碼添加到您的布帆布聲明：

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

您可以添加額外的屬性，背景等

來源

2017-08-21 19:30:57 Observer

另一塊帆布頂部的面料帆布

回答

相關問題