Question

使用FabricJS，我正在研究一个用边框绘制对象的原型。边框大小是一个可以由用户更改的公开属性。 Canvas有Grid。在网格单元格中绘制对象。我的问题是，边界超越网格单元格。请参阅屏幕截图

从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：对象边框超出网格单元格

1 个答案: