Fabric.js：画像を切り取った後の選択ボックス

Question

Fabric.js 1.7.3を使用すると、画像を切り抜くときに奇妙な動作が発生しました。基本的に、私は画像の中心部で唯一の小さな正方形を表示するための画像でclipTo方法を設定している：

しかし、問題は、画像の選択ボックスは、まだかなり元のサイズを占めていることです切り取られたサイズよりも大きい。画像をクリックすると、コーナーが画像の端のすぐ隣にくることが予想されます。同様に、切り取った画像をクリックすると選択が有効になります。

これは、画像の切り抜いた部分をbase64形式で書き出し、古い画像を削除して、代わりに切り取ったバージョンを追加する方法です。しかし、これはむしろ実用的ではなく、過度の攻撃のように感じます。私は単にトリミングされたサイズを尊重するために選択ボックスを調整することができる方法はありますか？

Answer 1

で表され、ここで私は_renderメソッドをオーバーライドしている私の完全なソリューションです。私はイメージを作成するたびに、私はそれをペイントする方法を正確に_render伝えたことに「のSizeMode」属性を追加します。

fabric.Image.prototype._render = function(ctx, noTransform) { 
    /* This is the default behavior. I haven't modified anything in this part. */ 
    let 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, true); 
    } 
    else { 
     elementToDraw = this._element; 
    } 

    /* My changes begin here. */ 
    if (elementToDraw && elementToDraw.naturalHeight > 0) { 
     if (this.sizeMode === BadgingImageSizeMode.CenterImage) { 
      drawCenterImage.apply(this, [ctx, elementToDraw, imageMargins, x, y]); 
     } else { 
      // Default _render behavior 
      ctx.drawImage(elementToDraw, 
       x + imageMargins.marginX, 
       y + imageMargins.marginY, 
       imageMargins.width, 
       imageMargins.height); 
     } 
    } 

    /* And they finish here. */ 
    this._stroke(ctx); 
    this._renderStroke(ctx); 
}; 

私が定義したdrawCenterImage機能はここにある：

const drawCenterImage = function(ctx, elementToDraw, imageMargins, x, y) { 
    const sx = (elementToDraw.naturalWidth - this.width)/2; 
    const sy = (elementToDraw.naturalHeight - this.height)/2; 
    ctx.drawImage(elementToDraw, 
     sx, 
     sy, 
     imageMargins.width, 
     imageMargins.height, 
     x + imageMargins.marginX, 
     y + imageMargins.marginY, 
     imageMargins.width, 
     imageMargins.height); 
}; 

この一方で（私の元の質問と同じように）イメージをセンタリングするために働くと、ctx.drawImageへの別の呼び出しは異なる効果をもたらします。 Here is the documentation for the drawImage method。

Answer 2

実際にはfabricjsにはcropToメソッドはありません。

説明したように動作するclipToメソッドがあります。

クロッピングは基本的なファブリック機能ではありません。おそらく、2.0リリースではもっと楽になるでしょうが、今はそれを得る唯一の方法は、レンダリングメソッドをサブクラス化して自分で完全に行うことです。

• ctx.drawImage（this._element、sx、sy、sw、sh、dx、dy、dw、dh）の式を使用します。
• 作物のための独自のinforamtionをmantain AndreaBogazziの答えにビルドするには、SX、SY、SW、SH