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

Question

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

覆盖了 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

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

FabricJs: object border grows beyond grid cell

canvas

fabricjs