Question

我正在尝试使用fabricJS中的自定义对象。我是从自己画的一条线开始的。我知道已有一个对象，但我想了解背后会发生什么以及我可以在多大程度上修改内容。所以，我在开头使用了一条简单的线条，但无论如何它都没有画在画布上。

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

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函数不会被调用。

fabricJS - 自定义对象未在画布上绘制

1 个答案: