javascript - 如何使用fabricjs Canvas 选择IText对象(文本段落)之间的 "toggle"？

Question

我希望能够从下拉列表中进行选择，以在 Fabricjs Canvas 上的样式化 IText 段落之间进行“切换”，但在实现这一点时遇到困难。我尝试借鉴此方法，对图像进行类似的操作，但没有成功:

//oImgObj bread and butter, kudos @grunt
function replaceImage(oImgObj, imgUrl) {
  if (!isImageLoaded) return; //return if initial image not loaded
  var imgElem = oImgObj._element; //reference to actual image element
  imgElem.src = imgUrl; //set image source
  imgElem.onload = () => canvas.renderAll(); //render on image load
}

如何使用可编辑的文本 block 来实现此目的？

Answer 1

您可以将文本设置为具有属性text的文本对象。

var canvas = new fabric.Canvas('c');
var text = new fabric.IText('FabricJs is Awsome',{
  left:50,top:50
});
canvas.add(text);
function replace(option){
 var val = document.getElementsByTagName('textarea')[0].value;
 text.set('text',val);
 canvas.renderAll();
}

canvas {
 border: blue dotted 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>
<br>
<textarea></textarea><button onclick='replace()'>Replace</button>