FabricJs：對象邊框增長超出網格單元格

Question

使用FabricJS，我正在製作一個原型，其中的對象是用邊框繪製的。邊框尺寸是可以由用戶改變的暴露的屬性。畫布有網格。對象在網格單元格內繪製。我的問題是，邊界超出了網格單元。請參閱屏幕截圖

覆蓋_render方法從fabricJS減少對象的高度和寬度與邊框尺寸。這裏是代碼..

_render(ctx: CanvasRenderingContext2D, noTransform: boolean) { 
     if (this.width === 1 && this.height === 1) { 
      ctx.fillRect(-0.5, -0.5, 1, 1); 
      return; 
     } 

     var rx = 5, 
      ry = 5, 
      //MODIFIED CODE - START 
      w = this.width - (this.borderThickness * 2), // 2: Left + Right 
      h = this.height - (this.borderThickness * 2),// 2: Top + Bottom 
      //w = this.width, 
      //h = this.height, 
      //MODIFIED CODE - END 
      x = noTransform ? this.left : -this.width/2, 
      y = noTransform ? this.top : -this.height/2, 
      isRounded = rx !== 0 || ry !== 0, 
      k = 1 - 0.5522847498; 

     ctx.beginPath(); 

     ctx.moveTo(x + rx, y); 

     ctx.lineTo(x + w - rx, y); 
     isRounded && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry); 

     ctx.lineTo(x + w, y + h - ry); 
     isRounded && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h); 

     ctx.lineTo(x + rx, y + h); 
     isRounded && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry); 

     ctx.lineTo(x, y + ry); 
     isRounded && ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y); 

     ctx.closePath(); 

     /**** Render Fill *****/ 
     //this._renderFill(ctx); 

     if (!this.fill) { 
      return; 
     } 

     ctx.save(); 
     ctx.fill(); 
     ctx.restore(); 

     /**** Render Fill *****/ 


     //render text 
     var textSize = 16; 
     var textY = y + (h/2) + (textSize/2); 
     var textX = x + (w/2); 

     ctx.fillStyle = "#010101"; 
     ctx.font = textSize + "px Arial"; 

     ctx.fillText(this.currentValue.toString(), textX, textY); 

     this._renderStroke(ctx); 
    } 

但並不如預期的結果..

我的要求是什麼，對象不應該種植更多的是網格單元。如果用戶增加邊框厚度，則對象應縮小並適應網格單元格內的邊框。

在此先感謝。

Answer 1

這裏有一種方法，通過調整對象的寬度做&高度：

var borderSize = 30, //here is a new border width 
    absWidth = rect.width + rect.strokeWidth, 
    absHeight = rect.height + rect.strokeWidth; 

rect.strokeWidth = borderSize; 
rect.width = absWidth - borderSize; 
rect.height = absHeight - borderSize; 
rect.setCoords(); 
canvas.renderAll(); 

見plunker這裏：https://plnkr.co/edit/jlBQoEfShjpS00JobVbY?p=preview