如何在FabricJS v2中插入文本?

时间:2017-11-29 19:38:27

标签: fabricjs

在版本2中,insertChars函数不再存在。 知道如何以编程方式将文本插入文本框元素吗?

http://jsfiddle.net/redlive/jvuvm2qg/

var canvas = new fabric.Canvas('paper');
canvas.setHeight(300);
canvas.setWidth(500);

var text = new fabric.Textbox('Heo world', {
  left: 50,
  top: 10,
  fontFamily: 'arial',
  fill: '#333',
  fontSize: 50
});

canvas.add(text);

const style = {
	textBackgroundColor: 'red'
};

const chars = "ll", selectionStart = 2;

//Need help with the function, since it doesn't exists anymore
text.insertChars(chars, selectionStart, style);
//////////////////////////////////////////////////////////////

canvas.renderAll();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.3/fabric.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

1 个答案:

答案 0 :(得分:0)

您可以尝试将字符的插入和样式分开,如下所示:

text.insertChars(chars, null, selectionStart);

text.setSelectionStyles(style, selectionStart, selectionStart + chars.length);

http://jsfiddle.net/6wzLb2cL/