FabricJs：オブジェクト境界がグリッドセルを超えて拡大

Question

FabricJSを使用して、オブジェクト内に境界線が描画されるプロトタイプを作成しています。境界線のサイズは、ユーザーが変更できる公開されたプロパティです。キャンバスにはグリッドがあります。オブジェクトはグリッドセル内に描画されます。私の問題は、境界線がグリッドセルを超えていることです。スクリーンショットを参照してください

オーバーライド_renderファブリックからのメソッドは、オブジェクトの高さと幅を境界線のサイズで縮小します。ここに私の要件は、オブジェクトがグリッドセルのことをより多くを育ててはならない、とは何のコードは...

_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