CODEWITHSUNDEEP
canvasfabricjs
Basavaraj Metri
Basavaraj Metri

Reputation: 836

FabricJs: object border grows beyond grid cell

Using FabricJS, I am working on a prototype where in objects are drawn with border. Border size is an exposed property which can be changed by user. Canvas has Grid. Objects are drawn within grid cell. My issue is, border goes beyond grid cell. Please see the screenshotenter image description here

Overridden _render method from fabricJS to decrease object height and width with that of border size. Here is the code..

_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);
    }

But the result is not as expected.. enter image description here

What my requirement is, object should not grow more that that of grid cell. If user increases border thickness, object should shrink and accommodate border within grid cell.

Thanks in advance.

Upvotes: 1

Views: 319

Answers (1)

janusz
janusz

Reputation: 848

Here is one way to do it by adjusting the object width & height:

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();

See plunker here: https://plnkr.co/edit/jlBQoEfShjpS00JobVbY?p=preview

Upvotes: 1

Related Questions