首页 文章

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

提问于
浏览 次
0

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

看起来 _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);
    }
});

EDIT:

In this question有同样的问题 . 似乎必须将 width 和 height 属性设置为 > 0 ，但我也不会在fabricJS源中找到此解决方法 .

javascript canvas html5-canvas fabricjs

1 回答

  • 2

    所以 _render 函数调用了 _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 函数 .

    回复于

相关问题