Canvas FabricJs：对象边界超出网格单元

使用FabricJS，我正在开发一个原型，其中使用边框绘制in对象。边框大小是一个可由用户更改的公开属性。画布有网格。对象在网格单元中绘制。我的问题是，边界超出了网格单元。请看截图

重写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);
    }

但结果并不像预期的那样。。

我的要求是，对象的增长不应超过网格单元的增长。若用户增加边框厚度，对象应缩小并适应网格单元内的边框

---

提前感谢。

这里有一种方法可以通过调整对象的宽度和高度来实现：

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：