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

这里一并把圆角矩形考虑在内。画圆角矩形的时候,由圆弧方式连接成封闭区域。
其实很简单,不过画出来可以花里胡哨的而已。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值