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 );
};
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다