FabricJS - 为自定义文本框渲染文本答案

【问题标题】：FabricJS - Render Text for Custom TextboxFabricJS - 为自定义文本框渲染文本
【发布时间】：2019-07-18 07:24:34
【问题描述】：

寻找有关如何呈现传递到自定义文本框的文本的一些建议。我正在探索创建具有不同类型边框（圆形、菱形等）的文本框，并且使用下面的代码，我可以创建一个内部带有文本框的圆圈。但是，文本没有显示/呈现到页面。

  addCustom2() {
    let customObj2 = fabric.util.createClass(fabric.Textbox, {
      type: 'customObj2',
      radius: 50,
      
      initialize: function(element, options) {
        console.log(this)
        this.callSuper('initialize', element, options);
        this.set({ width: 2 * this.radius, height: 2 * this.radius});
      },
      
      _render: function(ctx) {
        console.log("inside render 2")
        ctx.beginPath();
        ctx.arc(0, 0 , this.radius, 0, 2 * Math.PI, false);
        ctx.lineWidth = 5;
        ctx.strokeStyle = '#003300';
        ctx.stroke();
      }
    });

    this.canvas.add(new customObj2('Hello', {
      left: 100, 
      top:10,
      fontSize: 21,
      stroke: 'rgba(50,80,220)',
      textAlign: 'center',
      fill: 'rgba(100,80,220)'
    }));

使用this post 我能够让圆圈出现，但是没有显示文字（这是我看到的：）

通过检查元素，我可以在我输入时看到文本的变化，所以我知道它附加到了圆圈上。在这里的任何帮助将不胜感激！

【问题讨论】：

标签： javascript html5-canvas fabricjs

【解决方案1】：

将_render 更改为_renderBackground。

【讨论】：