Question

我正在寻找一个示例应用程序，它接受用户输入并将其插入到使用fabric.js的内部画布中。这可能吗？我无法在fabric.js示例中找到列表。

Answer 1

canvas.fillText不接受HTML标记。 Canvas是一个位图，它与HTML标记无关。您可以按照here所述控制字体样式。

有libraries将XML标记转换为canvas.fillText次调用，也许您可以调整一次。

Answer 2

我意识到解决这个问题的一个更好的方法是在半径2处绘制与文本相同高度的圆圈，以模拟一个子弹点。对任何感兴趣的人来说都很容易：

var EDU1 = new fabric.IText("SOME TEXT GOES HERE", {fontSize: 20, fontStyle:                        
'italic',fontFamily: 'Hoefler Text', left: 149, top: 390});

var bullet = new fabric.Circle({
radius: 2, fill: 'black', left: 135, top: 400
});

然后将它们组合在一起，你有一个子弹点。

Answer 3

function ListStyle (textObject,type,canvas) {
  var styles=['\u25CF','\u25C8','\u25D8','\u25BA','\u25CB','\u25A0','-'];
  var allStyles={'bullet':'\u25CF','diamond':'\u25C8','invertedBullet':'\u25D8','triangularBullet':'\u25BA','disced':'\u25CB','squared':'\u25A0','dashed':'-','none':''};
  var text = textObject.text;
  var textArray = text.split('\n')
  var tempStr = [];
    textArray.forEach((text, i) => {
      if(styles.includes(text.substr(0,1))){
        tempStr.push(text.replace(text.substr(0,1),allStyles[type]));
      }else{
        tempStr.push(allStyles[type]+''+text);
      }
    })
  textObject['text'] = tempStr.join('\n');
  canvas.renderAll();
}

如何在fabric.Text（）？</ul>中创建<ul>或项目符号

3 个答案: