如何清除画布的特定元素？

debugcn 发表于 Dev

骇客

canvas.clear如果我只想清除某些元素，如何使用Fabric.js ？我的意图是在按下“删除”按钮后清除背景，但保留字体。我该如何实现？它们都被添加到画布上，因此如果我使用canvas.clear它们，它们都将被删除。

我必须使用两个画布吗？

var canvas = new fabric.Canvas('canvas');

var textObj1 = new fabric.Text('font test', {
  left: 100,
  top: 350,
  fontSize: 30,
  fill: "#FF0000" // Set text color to red
});

canvas.add(textObj1);

fabric.Image.fromURL('http://s17.postimg.org/4740ku7z3/i_Stock_000000284123_XSmall.jpg', function(oImg) {
  // scale image down, and flip it, before adding it onto canvas
  oImg.scale(1);
  oImg.selectable = false;
  canvas.add(oImg);
});

function deleteimg() {
  canvas.clear();
};

<canvas id="canvas" width="800" height="450" style="border:1px solid #000000"></canvas>

<button class="button-big" onclick="deleteimg()">delete</button>

何塞·安东尼奥·里亚扎·瓦尔韦德

您必须重新绘制除背景以外的所有内容：

function draw( background ) {

    var canvas = new fabric.Canvas( 'canvas' );

    canvas.clear();

    var textObj1 = new fabric.Text('font test', {
        left: 100,
        top: 350,
        fontSize: 30,
        fill: "#FF0000" // Set text color to red
    });

    canvas.add(textObj1);

    if ( background ) {
        fabric.Image.fromURL( 'http://s17.postimg.org/4740ku7z3/i_Stock_000000284123_XSmall.jpg', function (oImg) {
            // scale image down, and flip it, before adding it onto canvas
            oImg.scale(1);
            oImg.selectable = false;
            canvas.add(oImg);
        } );
    }

}

// Call function with background
draw( true );

function deleteimg(){

    // Call function without background
    draw( false );

};

http://jsfiddle.net/o6a2uot4/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。