|
@@ -49,8 +49,7 @@ import { SShadow } from "./SShadow";
|
|
* @author 庞利祥 <sybotan@126.com>
|
|
* @author 庞利祥 <sybotan@126.com>
|
|
*/
|
|
*/
|
|
export class SPainter extends SObject {
|
|
export class SPainter extends SObject {
|
|
- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
|
|
- // 属性定义
|
|
|
|
|
|
+
|
|
/** 绘制引擎 */
|
|
/** 绘制引擎 */
|
|
private readonly engine: SPaintEngine;
|
|
private readonly engine: SPaintEngine;
|
|
|
|
|
|
@@ -115,10 +114,11 @@ export class SPainter extends SObject {
|
|
*/
|
|
*/
|
|
constructor(engine: SCanvasView | SPaintEngine) {
|
|
constructor(engine: SCanvasView | SPaintEngine) {
|
|
super();
|
|
super();
|
|
|
|
+ // 入参是 SCanvasView
|
|
if (engine instanceof SCanvasView) {
|
|
if (engine instanceof SCanvasView) {
|
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
this.engine = new SCanvasPaintEngine(engine.canvas!!);
|
|
this.engine = new SCanvasPaintEngine(engine.canvas!!);
|
|
- } else {
|
|
|
|
|
|
+ } else { // 入参是 绘制引擎
|
|
this.engine = engine;
|
|
this.engine = engine;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -143,8 +143,6 @@ export class SPainter extends SObject {
|
|
this.engine.restore();
|
|
this.engine.restore();
|
|
}
|
|
}
|
|
|
|
|
|
- // =================================================================================================================
|
|
|
|
- // 变换相关
|
|
|
|
/**
|
|
/**
|
|
* 平移变换
|
|
* 平移变换
|
|
*
|
|
*
|
|
@@ -223,9 +221,6 @@ export class SPainter extends SObject {
|
|
this.engine.resetTransform();
|
|
this.engine.resetTransform();
|
|
}
|
|
}
|
|
|
|
|
|
- // =================================================================================================================
|
|
|
|
- // 绘制相关
|
|
|
|
-
|
|
|
|
/**
|
|
/**
|
|
* 清空矩形区域
|
|
* 清空矩形区域
|
|
*
|
|
*
|
|
@@ -273,13 +268,14 @@ export class SPainter extends SObject {
|
|
w?: number,
|
|
w?: number,
|
|
h?: number
|
|
h?: number
|
|
): void {
|
|
): void {
|
|
|
|
+ // 重载 clearRect(rect: SRect): void;
|
|
if (x instanceof SRect) {
|
|
if (x instanceof SRect) {
|
|
this.engine.clearRect(x);
|
|
this.engine.clearRect(x);
|
|
- } else if (x instanceof SPoint && y instanceof SPoint) {
|
|
|
|
|
|
+ } else if (x instanceof SPoint && y instanceof SPoint) { // 重载 clearRect(leftTop: SPoint, rightBottom: SPoint): void;
|
|
this.engine.clearRect(new SRect(x, y));
|
|
this.engine.clearRect(new SRect(x, y));
|
|
- } else if (x instanceof SPoint && y instanceof SSize) {
|
|
|
|
|
|
+ } else if (x instanceof SPoint && y instanceof SSize) { // 重载 clearRect(leftTop: SPoint, size: SSize): void;
|
|
this.engine.clearRect(new SRect(x, y));
|
|
this.engine.clearRect(new SRect(x, y));
|
|
- } else {
|
|
|
|
|
|
+ } else { // 重载 clearRect(x: number, y: number, w: number, h: number): void;
|
|
this.engine.clearRect(
|
|
this.engine.clearRect(
|
|
new SRect(x as number, y as number, w as number, h as number)
|
|
new SRect(x as number, y as number, w as number, h as number)
|
|
);
|
|
);
|
|
@@ -333,19 +329,20 @@ export class SPainter extends SObject {
|
|
w?: number,
|
|
w?: number,
|
|
h?: number
|
|
h?: number
|
|
): void {
|
|
): void {
|
|
|
|
+ // 重载 drawRect(rect: SRect): void;
|
|
if (x instanceof SRect) {
|
|
if (x instanceof SRect) {
|
|
// 判断2点是否有效
|
|
// 判断2点是否有效
|
|
if (x.x < x.right && x.y < x.bottom) {
|
|
if (x.x < x.right && x.y < x.bottom) {
|
|
this.engine.drawRect(x);
|
|
this.engine.drawRect(x);
|
|
}
|
|
}
|
|
- } else if (x instanceof SPoint && y instanceof SPoint) {
|
|
|
|
|
|
+ } else if (x instanceof SPoint && y instanceof SPoint) { // 重载 drawRect(leftTop: SPoint, rightBottom: SPoint): void;
|
|
// 判断2点是否有效
|
|
// 判断2点是否有效
|
|
if (x.x < y.x && x.y < y.y) {
|
|
if (x.x < y.x && x.y < y.y) {
|
|
this.engine.drawRect(new SRect(x, y));
|
|
this.engine.drawRect(new SRect(x, y));
|
|
}
|
|
}
|
|
- } else if (x instanceof SPoint && y instanceof SSize) {
|
|
|
|
|
|
+ } else if (x instanceof SPoint && y instanceof SSize) { // 重载 drawRect(leftTop: SPoint, size: SSize): void;
|
|
this.engine.drawRect(new SRect(x, y));
|
|
this.engine.drawRect(new SRect(x, y));
|
|
- } else {
|
|
|
|
|
|
+ } else { // 重载 drawRect(x: number, y: number, w: number, h: number): void;
|
|
this.engine.drawRect(
|
|
this.engine.drawRect(
|
|
new SRect(x as number, y as number, w as number, h as number)
|
|
new SRect(x as number, y as number, w as number, h as number)
|
|
);
|
|
);
|
|
@@ -408,16 +405,17 @@ export class SPainter extends SObject {
|
|
let rect: SRect | null;
|
|
let rect: SRect | null;
|
|
let r: number | null;
|
|
let r: number | null;
|
|
|
|
|
|
|
|
+ // 重载 drawRoundRect(rect: SRect, r: number): void;
|
|
if (x instanceof SRect) {
|
|
if (x instanceof SRect) {
|
|
rect = x;
|
|
rect = x;
|
|
r = y as number;
|
|
r = y as number;
|
|
- } else if (x instanceof SPoint && y instanceof SSize) {
|
|
|
|
|
|
+ } else if (x instanceof SPoint && y instanceof SSize) { // 重载 drawRoundRect(pos: SPoint, size: SSize, r: number): void;
|
|
rect = new SRect(x, y);
|
|
rect = new SRect(x, y);
|
|
r = w as number;
|
|
r = w as number;
|
|
- } else if (x instanceof SPoint && y instanceof SPoint) {
|
|
|
|
|
|
+ } else if (x instanceof SPoint && y instanceof SPoint) { // 重载 drawRoundRect(p1: SPoint, p2: SPoint, r: number): void;
|
|
rect = new SRect(x, y);
|
|
rect = new SRect(x, y);
|
|
r = w as number;
|
|
r = w as number;
|
|
- } else {
|
|
|
|
|
|
+ } else { // 重载 drawRoundRect(x: number, y: number, w: number, h: number, r: number): void;
|
|
rect = new SRect(
|
|
rect = new SRect(
|
|
x as number,
|
|
x as number,
|
|
y as number,
|
|
y as number,
|
|
@@ -427,6 +425,7 @@ export class SPainter extends SObject {
|
|
r = radius as number;
|
|
r = radius as number;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ // 存在矩形和导角半径,绘制导角矩形
|
|
if (rect != null && r != null) {
|
|
if (rect != null && r != null) {
|
|
this.engine.drawRoundRect(rect, r);
|
|
this.engine.drawRoundRect(rect, r);
|
|
}
|
|
}
|
|
@@ -494,11 +493,12 @@ export class SPainter extends SObject {
|
|
x2?: number,
|
|
x2?: number,
|
|
y2?: number
|
|
y2?: number
|
|
): void {
|
|
): void {
|
|
|
|
+ // 重载 drawLine(line: SLine): void;
|
|
if (x1 instanceof SLine) {
|
|
if (x1 instanceof SLine) {
|
|
this.engine.drawLine(x1);
|
|
this.engine.drawLine(x1);
|
|
- } else if (x1 instanceof SPoint && y1 instanceof SPoint) {
|
|
|
|
|
|
+ } else if (x1 instanceof SPoint && y1 instanceof SPoint) { // 重载 drawLine(p1: SPoint, p2: SPoint): void;
|
|
this.engine.drawLine(new SLine(x1, y1));
|
|
this.engine.drawLine(new SLine(x1, y1));
|
|
- } else {
|
|
|
|
|
|
+ } else { // 重载 drawLine(x1: number, y1: number, x2: number, y2: number): void;
|
|
this.engine.drawLine(
|
|
this.engine.drawLine(
|
|
new SLine(
|
|
new SLine(
|
|
x1 as number,
|
|
x1 as number,
|
|
@@ -569,9 +569,10 @@ export class SPainter extends SObject {
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
/**
|
|
- * painter 转实现 view 象素
|
|
|
|
|
|
+ * painter 转实现 view 像素,缩放时,转换成实际宽
|
|
*
|
|
*
|
|
* @param p 绘制坐标
|
|
* @param p 绘制坐标
|
|
|
|
+ * @return 返回 view 像素
|
|
*/
|
|
*/
|
|
toPx(p: number): number {
|
|
toPx(p: number): number {
|
|
return p / this.engine.state.matrix.a;
|
|
return p / this.engine.state.matrix.a;
|
|
@@ -638,13 +639,14 @@ export class SPainter extends SObject {
|
|
st?: SArrow
|
|
st?: SArrow
|
|
): void {
|
|
): void {
|
|
let line: SLine, style: SArrow;
|
|
let line: SLine, style: SArrow;
|
|
|
|
+ // 重载 drawArrowLine(line: SLine, style?: SArrow): void;
|
|
if (x1 instanceof SLine) {
|
|
if (x1 instanceof SLine) {
|
|
line = x1;
|
|
line = x1;
|
|
style = y1 as SArrow;
|
|
style = y1 as SArrow;
|
|
- } else if (x1 instanceof SPoint && y1 instanceof SPoint) {
|
|
|
|
|
|
+ } else if (x1 instanceof SPoint && y1 instanceof SPoint) { // 重载 drawArrowLine(p1: SPoint, p2: SPoint, style?: SArrow): void;
|
|
line = new SLine(x1, y1);
|
|
line = new SLine(x1, y1);
|
|
style = x2 as SArrow;
|
|
style = x2 as SArrow;
|
|
- } else {
|
|
|
|
|
|
+ } else { // 重载 drawArrowLine(x1: number, y1: number, x2: number, y2: number,style?: SArrow): void;
|
|
line = new SLine(
|
|
line = new SLine(
|
|
x1 as number,
|
|
x1 as number,
|
|
y1 as number,
|
|
y1 as number,
|
|
@@ -654,30 +656,36 @@ export class SPainter extends SObject {
|
|
style = st as SArrow;
|
|
style = st as SArrow;
|
|
}
|
|
}
|
|
this.engine.drawLine(line);
|
|
this.engine.drawLine(line);
|
|
|
|
+
|
|
|
|
+ // 存在线段两端样式
|
|
if (style) {
|
|
if (style) {
|
|
|
|
+ // 存在线段起始点样式
|
|
if (style.begin) {
|
|
if (style.begin) {
|
|
|
|
+ // 起始点为基本类型
|
|
if (style.begin == SArrowStyleType.Basic) {
|
|
if (style.begin == SArrowStyleType.Basic) {
|
|
this.drawBasicArrow(line, false);
|
|
this.drawBasicArrow(line, false);
|
|
- } else if (style.begin == SArrowStyleType.Triangle) {
|
|
|
|
|
|
+ } else if (style.begin == SArrowStyleType.Triangle) { // 起始点为三角型类型
|
|
this.drawTriangleArrow(line, false);
|
|
this.drawTriangleArrow(line, false);
|
|
- } else if (style.begin == SArrowStyleType.Diamond) {
|
|
|
|
|
|
+ } else if (style.begin == SArrowStyleType.Diamond) { // 起始点为菱形类型
|
|
this.drawDiamondArrow(line, false);
|
|
this.drawDiamondArrow(line, false);
|
|
- } else if (style.begin == SArrowStyleType.Square) {
|
|
|
|
|
|
+ } else if (style.begin == SArrowStyleType.Square) { // 起始点为正方形类型
|
|
this.drawSquareArrow(line, false);
|
|
this.drawSquareArrow(line, false);
|
|
- } else if (style.begin == SArrowStyleType.Circle) {
|
|
|
|
|
|
+ } else if (style.begin == SArrowStyleType.Circle) { // 起始点为圆形类型
|
|
this.drawCircleArrow(line, false);
|
|
this.drawCircleArrow(line, false);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ // 存在线段结束点样式
|
|
if (style.end) {
|
|
if (style.end) {
|
|
|
|
+ // 结束点为基本类型
|
|
if (style.end == SArrowStyleType.Basic) {
|
|
if (style.end == SArrowStyleType.Basic) {
|
|
this.drawBasicArrow(line, true);
|
|
this.drawBasicArrow(line, true);
|
|
- } else if (style.end == SArrowStyleType.Triangle) {
|
|
|
|
|
|
+ } else if (style.end == SArrowStyleType.Triangle) { // 结束点为三角型类型
|
|
this.drawTriangleArrow(line, true);
|
|
this.drawTriangleArrow(line, true);
|
|
- } else if (style.end == SArrowStyleType.Diamond) {
|
|
|
|
|
|
+ } else if (style.end == SArrowStyleType.Diamond) { // 结束点为菱形类型
|
|
this.drawDiamondArrow(line, true);
|
|
this.drawDiamondArrow(line, true);
|
|
- } else if (style.end == SArrowStyleType.Square) {
|
|
|
|
|
|
+ } else if (style.end == SArrowStyleType.Square) { // 结束点为正方形类型
|
|
this.drawSquareArrow(line, true);
|
|
this.drawSquareArrow(line, true);
|
|
- } else if (style.end == SArrowStyleType.Circle) {
|
|
|
|
|
|
+ } else if (style.end == SArrowStyleType.Circle) { // 结束点为圆形类型
|
|
this.drawCircleArrow(line, true);
|
|
this.drawCircleArrow(line, true);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -702,7 +710,7 @@ export class SPainter extends SObject {
|
|
// 线段与x轴夹角
|
|
// 线段与x轴夹角
|
|
const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
|
|
const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
|
|
this.save();
|
|
this.save();
|
|
- // 是否为终点画箭头
|
|
|
|
|
|
+ // 为终点画箭头
|
|
if (isEnd) {
|
|
if (isEnd) {
|
|
this.translate(line.x2, line.y2);
|
|
this.translate(line.x2, line.y2);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
@@ -711,7 +719,7 @@ export class SPainter extends SObject {
|
|
new SPoint(0, 0),
|
|
new SPoint(0, 0),
|
|
new SPoint(-x1, -y1)
|
|
new SPoint(-x1, -y1)
|
|
]);
|
|
]);
|
|
- } else {
|
|
|
|
|
|
+ } else { // 终点不绘画箭头
|
|
this.translate(line.x1, line.y1);
|
|
this.translate(line.x1, line.y1);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
this.engine.drawPolyline([
|
|
this.engine.drawPolyline([
|
|
@@ -741,7 +749,7 @@ export class SPainter extends SObject {
|
|
// 线段与x轴夹角
|
|
// 线段与x轴夹角
|
|
const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
|
|
const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
|
|
this.save();
|
|
this.save();
|
|
- // 是否为终点画箭头
|
|
|
|
|
|
+ // 为终点画箭头
|
|
if (isEnd) {
|
|
if (isEnd) {
|
|
this.translate(line.x2, line.y2);
|
|
this.translate(line.x2, line.y2);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
@@ -750,7 +758,7 @@ export class SPainter extends SObject {
|
|
new SPoint(0, 0),
|
|
new SPoint(0, 0),
|
|
new SPoint(-x1, -y1)
|
|
new SPoint(-x1, -y1)
|
|
]);
|
|
]);
|
|
- } else {
|
|
|
|
|
|
+ } else { // 终点不绘制箭头
|
|
this.translate(line.x1, line.y1);
|
|
this.translate(line.x1, line.y1);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
this.engine.drawPolygon([
|
|
this.engine.drawPolygon([
|
|
@@ -780,7 +788,7 @@ export class SPainter extends SObject {
|
|
// 线段与x轴夹角
|
|
// 线段与x轴夹角
|
|
const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
|
|
const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
|
|
this.save();
|
|
this.save();
|
|
- // 是否为终点画箭头
|
|
|
|
|
|
+ // 为终点画箭头
|
|
if (isEnd) {
|
|
if (isEnd) {
|
|
this.translate(line.x2, line.y2);
|
|
this.translate(line.x2, line.y2);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
@@ -790,7 +798,7 @@ export class SPainter extends SObject {
|
|
new SPoint(-x1, -y1),
|
|
new SPoint(-x1, -y1),
|
|
new SPoint(-Math.sqrt(2) * d, 0)
|
|
new SPoint(-Math.sqrt(2) * d, 0)
|
|
]);
|
|
]);
|
|
- } else {
|
|
|
|
|
|
+ } else { // 终点不绘画箭头
|
|
this.translate(line.x1, line.y1);
|
|
this.translate(line.x1, line.y1);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
this.engine.drawPolygon([
|
|
this.engine.drawPolygon([
|
|
@@ -813,12 +821,11 @@ export class SPainter extends SObject {
|
|
// 定义箭头长度
|
|
// 定义箭头长度
|
|
const d = this.toPx(5);
|
|
const d = this.toPx(5);
|
|
// 线段与x轴夹角
|
|
// 线段与x轴夹角
|
|
- // 线段与x轴夹角
|
|
|
|
const tempFo = Math.atan(line.dy / line.dx);
|
|
const tempFo = Math.atan(line.dy / line.dx);
|
|
// 线段与x轴夹角
|
|
// 线段与x轴夹角
|
|
const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
|
|
const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
|
|
this.save();
|
|
this.save();
|
|
- // 是否为终点画箭头
|
|
|
|
|
|
+ // 为终点画箭头
|
|
if (isEnd) {
|
|
if (isEnd) {
|
|
this.translate(line.x2, line.y2);
|
|
this.translate(line.x2, line.y2);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
@@ -828,7 +835,7 @@ export class SPainter extends SObject {
|
|
new SPoint(0, -d / 2),
|
|
new SPoint(0, -d / 2),
|
|
new SPoint(-d, -d / 2)
|
|
new SPoint(-d, -d / 2)
|
|
]);
|
|
]);
|
|
- } else {
|
|
|
|
|
|
+ } else { // 终点不绘画箭头
|
|
this.translate(line.x1, line.y1);
|
|
this.translate(line.x1, line.y1);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
this.engine.drawPolygon([
|
|
this.engine.drawPolygon([
|
|
@@ -851,17 +858,16 @@ export class SPainter extends SObject {
|
|
// 定义箭头长度
|
|
// 定义箭头长度
|
|
const d = this.toPx(5);
|
|
const d = this.toPx(5);
|
|
// 线段与x轴夹角
|
|
// 线段与x轴夹角
|
|
- // 线段与x轴夹角
|
|
|
|
const tempFo = Math.atan(line.dy / line.dx);
|
|
const tempFo = Math.atan(line.dy / line.dx);
|
|
// 线段与x轴夹角
|
|
// 线段与x轴夹角
|
|
const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
|
|
const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
|
|
- // 是否为终点画箭头
|
|
|
|
this.save();
|
|
this.save();
|
|
|
|
+ // 为终点画箭头
|
|
if (isEnd) {
|
|
if (isEnd) {
|
|
this.translate(line.x2, line.y2);
|
|
this.translate(line.x2, line.y2);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
this.engine.drawCircle(-d / 2, 0, d / 2);
|
|
this.engine.drawCircle(-d / 2, 0, d / 2);
|
|
- } else {
|
|
|
|
|
|
+ } else { // 不绘画箭头
|
|
this.translate(line.x1, line.y1);
|
|
this.translate(line.x1, line.y1);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
this.rotate((fo * 180) / Math.PI);
|
|
this.engine.drawCircle(d / 2, 0, d / 2);
|
|
this.engine.drawCircle(d / 2, 0, d / 2);
|