Fabric.js：裁剪後的選擇框圖像

關於使用Fabric.js 1.7.3，裁剪圖像時我注意到了一個奇怪的現象。從本質上講，我已經設置了圖像中的clipTo方法在圖像的中心只顯示一個小廣場：Fabric.js：裁剪後的選擇框圖像

然而，問題是圖像的選擇框仍然採用了原來的大小，而比裁剪的大小。當點擊圖片時，我會希望角落緊挨着圖片的邊緣;同樣，只有當我點擊裁剪圖片時才能激活選擇。

一個可能的解決方案包括將圖像的裁剪部分導出爲base64，刪除舊圖像並添加裁剪版本。然而，這是不切實際的，感覺像是過度殺傷。有沒有一種方法可以簡單地調整選擇框來尊重裁剪的尺寸？

2017-06-20 unpollito

請包括迄今爲止完成的工作。 – Observer

要建立在AndreaBogazzi的答案，這是我在我重寫_render方法完整的解決方案。每當我創建一個圖像，我添加了一個「sizeMode」屬性，它告訴_render究竟是如何把它漆成：

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。

來源

2017-06-27 10:30:29 unpollito

fabricjs中實際上沒有cropTo方法。

有一個clipTo方法，其行爲如您所述。

裁剪不是基本的fabricjs功能。使用2.0版本可能會更容易，但現在獲得它的唯一方法是對render方法進行子類化並完全由您自己完成。

使用ctx.drawImage（this._element，sx，sy，sw，sh，dx，dy，dw，dh）公式。
十個分量自己inforamtion的作物被SX，SY，SW代表，SH

來源

2017-06-21 06:21:24 AndreaBogazzi

謝謝！並道歉 - 我寫了「cropTo」而不是「clipTo」;我顯然是指第二個。我已經編輯了我的問題來反映這一點。 – unpollito

Fabric.js：裁剪後的選擇框圖像

回答

相關問題