fabricjsキャンバス上の関数（テキスト）を置き換えますか？

Question

私は、それぞれがテキストを描画する2つの関数を持っていますが、現在描画されている関数を置き換えるためにクリックされた関数が好きです（そのため、一度に1つしか描画されません）。どうすればこれを達成できますか？前もって感謝します。

var $ = function(id) { 
 
    return document.getElementById(id) 
 
}; 
 

 
var canvas = this.__canvas = new fabric.Canvas('c'); 
 
canvas.setHeight(300); 
 
canvas.setWidth(500); 
 
    
 
function textOne() { 
 
    canvas.add(new fabric.IText('One', { 
 
    left: 50, 
 
    top: 100, 
 
    fontFamily: 'arial', 
 
    fill: '#333', 
 
    fontSize: 50 
 
    })); 
 
} 
 

 
function textTwo() { 
 
    canvas.add(new fabric.IText('Two', { 
 
    left: 200, 
 
    top: 100, 
 
    fontFamily: 'arial black', 
 
    fill: '#333', 
 
    fontSize: 50 
 
    })); 
 
}

canvas { 
 
    border: 1px solid #dddddd; 
 
    border-radius: 3px; 
 
    margin-top: 5px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 
<button onclick="textOne()">One</button> 
 
<button onclick="textTwo()">Two</button> 
 
<canvas id="c"></canvas>

Answer 1

自分の与えられたcanvasコンテキストがあなたのcurrent text drawings

JSコードで内部の内容を消去できるように、あなたはあなたの特定のcanvas要素にclearメソッドを呼び出すことができます。

var $ = function(id) { 
    return document.getElementById(id) 
}; 

var canvas = this.__canvas = new fabric.Canvas('c'); 
canvas.setHeight(300); 
canvas.setWidth(500); 

function textOne() { 
    canvas.clear(); // Clear the given canvas 
    canvas.add(new fabric.IText('One', { 
     left: 50, 
     top: 100, 
     fontFamily: 'arial', 
     fill: '#333', 
     fontSize: 50 
    })); 
} 

function textTwo() { 
    canvas.clear(); // Clear the given canvas 
    canvas.add(new fabric.IText('Two', { 
     left: 200, 
     top: 100, 
     fontFamily: 'arial black', 
     fill: '#333', 
     fontSize: 50 
    })); 
} 

ここにはJSフィドルがあります与えられた例：http://jsfiddle.net/7me0eat3

これはあなたの場合に役立ちます。

Answer 2

var canvas = new fabric.Canvas('c'); 
 
canvas.setHeight(300); 
 
canvas.setWidth(500); 
 
var text = new fabric.IText('One', { 
 
    left: 50, 
 
    top: 100, 
 
    fontFamily: 'arial', 
 
    fill: '#333', 
 
    fontSize: 50 
 
}); 
 
canvas.add(text); 
 
function replaceText(val) { 
 
text.setText(val); 
 
canvas.renderAll(); 
 
}

canvas { 
 
    border: 1px solid #dddddd; 
 
    border-radius: 3px; 
 
    margin-top: 5px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.js"></script> 
 
<button onclick="replaceText('One')">One</button> 
 
<button onclick="replaceText('Two')">Two</button> 
 
<canvas id="c"></canvas>

あなたは、textプロパティでテキストオブジェクトにテキストを設定したり、setText()を使用することができます。