我如何制作 或fabric.Text（）中的项目符号？

Question

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

Answer 1

canvas.fillText不接受HTML标记。画布是位图，它与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();
}