fabric.js 扩展了 fabric.Image.prototype_render 子类

Question

我只想使用 _render 将自定义标签属性添加到现有 Image 对象。 fabric.Image.prototype 有 _render 方法，所以我从 fabric.js 库中复制并将其覆盖为

       fabric.util.object.extend(fabric.Image.prototype, {

           _render: function(ctx, noTransform) {
           var x, y, imageMargins = this._findMargins(), elementToDraw;

           x = (noTransform ? this.left : -this.width / 2);
           y = (noTransform ? this.top : -this.height / 2);

           if (this.meetOrSlice === 'slice') {
            ctx.beginPath();
            ctx.rect(x, y, this.width, this.height);
            ctx.clip();
           }

           if (this.isMoving === false && this.resizeFilters.length &&                                              this._needsResize()) {
               this._lastScaleX = this.scaleX;
               this._lastScaleY = this.scaleY;
               elementToDraw = this.applyFilters(null, this.resizeFilters, this._filteredEl || this._originalElement, false);
           }else {
               elementToDraw = this._element;
           }
           elementToDraw && ctx.drawImage(elementToDraw,
                                 x + imageMargins.marginX,
                                 y + imageMargins.marginY,
                                 imageMargins.width,
                                 imageMargins.height
                                );
           this._renderStroke(ctx);  

            // Custom code added
            ctx.font = '12px Ubuntu';
            ctx.fillStyle = 'grey';
            ctx.style = '1px dashed';
            ctx.fillText(this.label, this.width/2-10, -(this.height/2) - 10);

        }
   }); 

我知道这不是正确的做法。 有没有办法扩展当前的 _render 函数并添加

  ctx.font = '12px Ubuntu';
  ctx.fillStyle = 'grey';
  ctx.style = '1px dashed';
  ctx.fillText(this.label, this.width/2-10, -(this.height/2) - 10);

使用 JavaScript 原型继承

任何帮助都会很好

Answer 1

在您的扩展类中，首先在您覆盖的 _render 函数中添加一个 callSuper，然后添加您自己的代码。像这样……

_render: function(ctx) {
  this.callSuper('_render', ctx);
  /* your code */
}