fabric.js:我的fabric.Object子类的_render方法永远不会被调用

问题描述

调用initialize方法，但不调用render方法.我在 fabricjs网站上了解了有关子类化的内容，并查看了演示.我真的不明白我的代码中缺少什么.

The initialize method is called but render method is not.I read about subclassing on the fabricjs website and looked at that demo.I really don't understand what is missing in my code.

var CustomCircle = fabric.util.createClass(fabric.Object, {

type: "customCircle",

initialize: function (options) {
    this.callSuper('initialize', options);
},

_render: function (ctx) {
    ctx.beginPath();
    ctx.arc(100, 250, 50, 0, 2 * Math.PI, false);
    ctx.fillStyle = 'green';
    ctx.fill();
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#003300';
    ctx.stroke();

}
});

  var customCircle = new CustomCircle();
  canvas.add(customCircle);

这里是一个小提琴.

推荐答案

要创建自定义对象，您可以自行计算和设置最新对象的宽度和高度.为此，您可以在初始化函数内调用 this.set({width:...，height:...}).

When you want to create a custom object it is up to you to calculate and set the width and height of this latest. To do so you can call this.set({width: ..., height: ...}) inside the initialize function.

var canvas = new fabric.Canvas('c');

var CustomCircle = fabric.util.createClass(fabric.Object, {

    radius: 50, 

    type: "customCircle",

    initialize: function (options) {
        this.callSuper('initialize', options);
       this.set({ width: 2 * this.radius, height: 2 * this.radius });
   },

    _render: function (ctx) {
        ctx.beginPath();
        ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'green';
        ctx.fill();
        ctx.lineWidth = 5;
        ctx.strokeStyle = '#003300';
       ctx.stroke();

     }
 });

var customCircle = new CustomCircle({left:50, top:50});

canvas.add(customCircle);

看到小提琴

还请注意，在 _render 函数内部，画布已被平移到自定义对象的中心.

Also note that inside the _render function, the canvas has already been translated to the center of your custom object.

这篇关于fabric.js:我的fabric.Object子类的_render方法永远不会被调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！