使用fabric js克隆画布并继续编辑

Clone canvas with fabric js and continue editing

本文关键字：继续 编辑 fabric js 使用      更新时间：2023-09-26

我想用fabric js克隆画布，并继续编辑克隆画布中现有的fabric js对象，但它不起作用。这表明setBackgroundImage未定义。

$('#btnClick').on('click touchstart', function () {
    var canvas = document.getElementsByTagName("canvas");
    // canvas context
    var context = canvas[0].getContext("2d");
    // get the current ImageData for the canvas
    var data = context.getImageData(0, 0, canvas[0].width, canvas[0].height);
    // store the current globalCompositeOperation
    var compositeOperation = context.globalCompositeOperation;
    // set to draw behind current content
    context.globalCompositeOperation = "destination-over";
    //set background color
    context.fillStyle = "#FFFFFF";
    // draw background/rectangle on entire canvas
    context.fillRect(0,0,canvas[0].width,canvas[0].height);
    var tempCanvas = document.createElement("canvas"),
    tCtx = tempCanvas.getContext("2d");
    
    tempCanvas.width = 640;
    tempCanvas.height = 480;
  
    tempCanvas.setBackgroundImage('');
}
<canvas><canvas>

使用结构库的想法是使用它的方法来简化您的工作。您不会直接与画布元素交互。

画布loadFromJSON和toJSON方法可用于克隆画布的副本，包括背景图像。

var canvas = new fabric.Canvas('canvas');
var canvas2 = new fabric.Canvas('canvas2');
$(document).ready(function() {
    var rect = new fabric.Rect({width: 100, height:200, fill: 'red'});
    canvas.add(rect);
    var circle = new fabric.Circle({radius: 80, fill: 'blue'});
    canvas.add(circle);        
    $('#clone').click(
      function(){canvas2.loadFromJSON(JSON.stringify(canvas), function(){canvas2.renderAll()}); })
});
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;">
</canvas>
 <input id="clone" type="button" value="clone canvas">
<canvas id='canvas2' width="500" height="400" style="border:#000 1px solid;">
</canvas>

相关文章：