BS版图形系统 - 矩形

BS版图形系统 - 矩形


QQ: 282397369

Html5的Canvas,最基本的功能可以支持画矩形,其实也就那几个参数来回设置。

export class TRectangle extends TTwoPointMeta {
    cornerRadius: number = 0;    // 圆角半径
    Initial() {
        this.setClassType(CbwClassType.Rectangle);
        super.Initial();
    }

    doDraw(ctx: CanvasRenderingContext2D) {
        if (!this.LastPoint.IsValid) return;
        let fillStatus = this.ApplyBrush(ctx);
        let strokeStatus = this.ApplyPen(ctx);
        if (fillStatus != strokeStatus) {
            let drawRect = this.toCanvasRect(this.boundRect);
            if (!this.Finished)
                drawRect = this.toCanvasRect(drawRect.From(this.points[0], this.points[1]));
            if (this.cornerRadius <= 0)
                DrGraph.TCanvas.Rectangle(ctx, drawRect, strokeStatus | fillStatus);
            else {
                ctx.moveTo((drawRect.left + drawRect.right) / 2, drawRect.top);
                let radius = this.cornerRadius * this.paintBox!.Ratio;
                ctx.arcTo(drawRect.right, drawRect.top, drawRect.right, drawRect.bottom, radius);
                ctx.arcTo(drawRect.right, drawRect.bottom, drawRect.left, drawRect.bottom, radius);
                ctx.arcTo(drawRect.left, drawRect.bottom, drawRect.left, drawRect.top, radius);
                ctx.arcTo(drawRect.left, drawRect.top, drawRect.right, drawRect.top, radius);
                ctx.arcTo(drawRect.right, drawRect.top, drawRect.right, drawRect.bottom, radius);
                if (fillStatus > 0)
                    ctx.fill();
                if (strokeStatus > 0)
                    ctx.stroke();
            }
        }
    }
}

这里一并把圆角矩形考虑在内。画圆角矩形的时候,由圆弧方式连接成封闭区域。
其实很简单,不过画出来可以花里胡哨的而已。
BS版图形系统 - 矩形_第1张图片

你可能感兴趣的:(原理示教,DrGraph,canvas,typescript)