キャンバス全体を消去せずに関数を置き換える？

Question

私はすべての描画テキストをクリアすることなく、関数でテキストを置き換えようとしています。今は関数を置き換えることができますが、キャンバス全体をクリアするだけです。私はそれがもう少しダイナミックなので、（例えば）第3の機能が残るようにしたいと思います。

これまで私がこれまでに得たことは次のとおりです。事前に

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(); 
 
    canvas.add(new fabric.IText('One', { 
 
    left: 50, 
 
    top: 100, 
 
    fontFamily: 'arial', 
 
    fill: '#333', 
 
    fontSize: 50 
 
    })); 
 
} 
 
    
 
// Text that should stay 
 
canvas.add(new fabric.IText('This Should Stay The Same\nEdited Or Not', { 
 
    left: 300, 
 
    top: 45, 
 
    fontFamily: 'Monsieur La Doulaise', 
 
    fontSize: 27, 
 
    hasBorders: false, 
 
    hasControls: false, 
 
    selectable: true, 
 
    lockRotation: true, 
 
    lockMovementX: true, 
 
    lockMovementY: true, 
 
    align: 'mid', 
 
    originX: 'center', 
 
    originY: 'center', 
 
    centeredScaling: true, 
 
})); 
 

 
function textTwo() { 
 
    canvas.clear(); 
 
    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.renderAllを実行してください。参考までに、私はfabric.jsでゼロの経験があります。

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

 
var canvas = this.__canvas = new fabric.Canvas('c'); 
 
canvas.setHeight(300); 
 
canvas.setWidth(500); 
 
    
 
var dynamicText = new fabric.IText('', { 
 
    left: 50, 
 
    top: 100, 
 
    fontFamily: 'arial', 
 
    fill: '#333', 
 
    fontSize: 50 
 
}) 
 
    
 
canvas.add(dynamicText); 
 
    
 
function textOne() { 
 
    dynamicText.setText('ONE'); 
 
    canvas.renderAll(); 
 
} 
 
    
 
// Text that should stay 
 
canvas.add(new fabric.IText('This Should Stay The Same\nEdited Or Not', { 
 
    left: 300, 
 
    top: 45, 
 
    fontFamily: 'Monsieur La Doulaise', 
 
    fontSize: 27, 
 
    hasBorders: false, 
 
    hasControls: false, 
 
    selectable: true, 
 
    lockRotation: true, 
 
    lockMovementX: true, 
 
    lockMovementY: true, 
 
    align: 'mid', 
 
    originX: 'center', 
 
    originY: 'center', 
 
    centeredScaling: true, 
 
})); 
 

 
function textTwo() { 
 
    dynamicText.setText('TWO'); 
 
    canvas.renderAll(); 
 
}

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>

[それがキャンバスに追加されると変更テキスト]（の