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

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

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

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

1 个答案: