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();
}
}
}
}
这里一并把圆角矩形考虑在内。画圆角矩形的时候,由圆弧方式连接成封闭区域。
其实很简单,不过画出来可以花里胡哨的而已。