javascript - FabricJS - 自定义对象未绘制在 Canvas 上

Question

我正在尝试 FabricJS 中的自定义对象。我从自己画的一条线开始。我知道已经有一个对象，但我想了解背后发生了什么以及我可以在多大程度上修改事物。因此，我在开始时使用了一条简单的线条，但出于某种原因它没有绘制在 Canvas 上。

看起来_render函数没有被调用，而initialize工作正常。你能告诉我我的代码有什么问题吗？

JSFiddle

fabric.CustomLine = fabric.util.createClass(fabric.Object, {

    type: 'customline',

    pos : {
        x1 : 0,
        y1 : 0,
        x2 : 0,
        y2 : 0
    },

    initialize: function (options) {
        options = options || {};

        this.callSuper('initialize', options);

        this.pos.x1 = options.x1 || 0;
        this.pos.y1 = options.y1 || 0;
        this.pos.x2 = options.x2 || 0;
        this.pos.y2 = options.y2 || 0;
    },

    _render : function (ctx) {
        ctx.beginPath();
        ctx.moveTo(this.pos.x1, this.pos.y1);
        ctx.lineTo(this.pos.x2, this.pos.y2);
        ctx.closePath();

        this._renderFill(ctx);
        this._renderStroke(ctx);
    }
});

<小时/>

编辑:

In this question有同样的问题。似乎必须将 width 和 height 属性设置为 > 0 但我不明白为什么。我在fabricJS源代码中也找不到这个解决方法。

Answer 1

因此 _render 函数由 Object.render 函数调用。

Object.render 开始如下:

    render: function(ctx, noTransform) {
      // do not render if width/height are zeros or object is not visible
      if ((this.width === 0 && this.height === 0) || !this.visible) {
        return;
      }
     ...
    }

您的对象没有在 initialize 函数中初始化任何宽度和高度，因此 render 方法立即返回，而您的 _render 函数则返回没有接到电话。