|
@@ -57,62 +57,62 @@ export class SPainter extends SObject {
|
|
|
/** 画笔 */
|
|
|
get pen(): SPen {
|
|
|
return this.engine.state.pen;
|
|
|
- } // Get pen
|
|
|
+ }
|
|
|
set pen(value: SPen) {
|
|
|
this.engine.state.pen = value;
|
|
|
- } // Set pen
|
|
|
+ }
|
|
|
|
|
|
/** 画刷 */
|
|
|
get brush(): SBrush {
|
|
|
return this.engine.state.brush;
|
|
|
- } // Get brush
|
|
|
+ }
|
|
|
set brush(value: SBrush) {
|
|
|
this.engine.state.brush = value;
|
|
|
- } // Set brush
|
|
|
+ }
|
|
|
|
|
|
/** 字体属性 */
|
|
|
get font(): SFont {
|
|
|
return this.engine.state.font;
|
|
|
- } // Get font
|
|
|
+ }
|
|
|
set font(value: SFont) {
|
|
|
this.engine.state.font = value;
|
|
|
this.engine.changeFont(value);
|
|
|
- } // Set font
|
|
|
+ }
|
|
|
|
|
|
/** 融合属性 */
|
|
|
get composite(): number {
|
|
|
return this.engine.state._composite;
|
|
|
- } // Get composite
|
|
|
+ }
|
|
|
set composite(value: number) {
|
|
|
this.engine.state._composite = value;
|
|
|
- } // Set composite
|
|
|
+ }
|
|
|
|
|
|
/** 阴影设置 */
|
|
|
get shadow(): SShadow {
|
|
|
return this.engine.state.shadow;
|
|
|
- } // Get shadow
|
|
|
+ }
|
|
|
set shadow(value: SShadow) {
|
|
|
this.engine.state.shadow = value;
|
|
|
- } // Set shadow
|
|
|
+ }
|
|
|
|
|
|
/** 裁剪设置 */
|
|
|
get clip(): SPath | undefined {
|
|
|
return this.engine.state.clip;
|
|
|
- } // Get clip
|
|
|
+ }
|
|
|
set clip(value: SPath | undefined) {
|
|
|
this.engine.state.clip = value;
|
|
|
- } // Set clip
|
|
|
+ }
|
|
|
|
|
|
/** 变换矩阵 */
|
|
|
get worldTransform(): SMatrix {
|
|
|
return this.engine.state.matrix;
|
|
|
- } // Get worldTransform
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 构造函数
|
|
|
*
|
|
|
* @param engine 绘制引擎
|
|
|
- */
|
|
|
+ */
|
|
|
constructor(engine: SCanvasView | SPaintEngine) {
|
|
|
super();
|
|
|
if (engine instanceof SCanvasView) {
|
|
@@ -127,21 +127,21 @@ export class SPainter extends SObject {
|
|
|
this.font = new SFont();
|
|
|
this.composite = SCompositeType.SourceOver;
|
|
|
this.shadow = new SShadow();
|
|
|
- } // Constructor()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 保存 painter 状态
|
|
|
- */
|
|
|
+ */
|
|
|
save(): void {
|
|
|
this.engine.save();
|
|
|
- } // Function save()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 恢复 painter 状态
|
|
|
- */
|
|
|
+ */
|
|
|
restore(): void {
|
|
|
this.engine.restore();
|
|
|
- } // Function restore()
|
|
|
+ }
|
|
|
|
|
|
// =================================================================================================================
|
|
|
// 变换相关
|
|
@@ -150,29 +150,29 @@ export class SPainter extends SObject {
|
|
|
*
|
|
|
* @param x X 轴方向平移
|
|
|
* @param y Y 轴方向平移
|
|
|
- */
|
|
|
+ */
|
|
|
translate(x: number, y: number): void {
|
|
|
this.engine.translate(x, y);
|
|
|
- } // Function translate()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 缩放
|
|
|
*
|
|
|
* @param x X 轴方向缩放
|
|
|
* @param y Y 轴方向缩放
|
|
|
- */
|
|
|
+ */
|
|
|
scale(x: number, y: number): void {
|
|
|
this.engine.scale(x, y);
|
|
|
- } // Function scale()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 旋转
|
|
|
*
|
|
|
* @param angle 旋转角度(单位弧度)
|
|
|
- */
|
|
|
+ */
|
|
|
rotate(angle: number): void {
|
|
|
this.engine.rotate(angle);
|
|
|
- } // Function rotate()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 将当前的变形矩阵乘上一个基于自身参数的矩阵
|
|
@@ -183,7 +183,7 @@ export class SPainter extends SObject {
|
|
|
* @param m22 竖直方向的缩放
|
|
|
* @param dx 水平方向的移动
|
|
|
* @param dy 竖直方向的移动
|
|
|
- */
|
|
|
+ */
|
|
|
transform(
|
|
|
m11: number,
|
|
|
m12: number,
|
|
@@ -193,7 +193,7 @@ export class SPainter extends SObject {
|
|
|
dy: number
|
|
|
): void {
|
|
|
this.engine.transform(m11, m12, m21, m22, dx, dy);
|
|
|
- } // Function transform()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 将当前的变形矩阵重置为单位矩阵,再将当前的变形矩阵乘上一个基于自身参数的矩阵
|
|
@@ -204,7 +204,7 @@ export class SPainter extends SObject {
|
|
|
* @param m22 竖直方向的缩放
|
|
|
* @param dx 水平方向的移动
|
|
|
* @param dy 竖直方向的移动
|
|
|
- */
|
|
|
+ */
|
|
|
setTransform(
|
|
|
m11: number,
|
|
|
m12: number,
|
|
@@ -214,14 +214,14 @@ export class SPainter extends SObject {
|
|
|
dy: number
|
|
|
): void {
|
|
|
this.engine.setTransform(m11, m12, m21, m22, dx, dy);
|
|
|
- } // Function transform()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 重置当前变形为单位矩阵。等价于调用 setTransform(1, 0, 0, 1, 0, 0)
|
|
|
- */
|
|
|
+ */
|
|
|
resetTransform(): void {
|
|
|
this.engine.resetTransform();
|
|
|
- } // Function resetTransform()
|
|
|
+ }
|
|
|
|
|
|
// =================================================================================================================
|
|
|
// 绘制相关
|
|
@@ -230,7 +230,7 @@ export class SPainter extends SObject {
|
|
|
* 清空矩形区域
|
|
|
*
|
|
|
* @param rect 矩形
|
|
|
- */
|
|
|
+ */
|
|
|
clearRect(rect: SRect): void;
|
|
|
|
|
|
/**
|
|
@@ -238,7 +238,7 @@ export class SPainter extends SObject {
|
|
|
*
|
|
|
* @param leftTop 左上角坐标
|
|
|
* @param rightBottom 右下角坐标
|
|
|
- */
|
|
|
+ */
|
|
|
clearRect(leftTop: SPoint, rightBottom: SPoint): void;
|
|
|
|
|
|
/**
|
|
@@ -246,7 +246,7 @@ export class SPainter extends SObject {
|
|
|
*
|
|
|
* @param leftTop 左上角坐标
|
|
|
* @param size 大小
|
|
|
- */
|
|
|
+ */
|
|
|
clearRect(leftTop: SPoint, size: SSize): void;
|
|
|
|
|
|
/**
|
|
@@ -256,7 +256,7 @@ export class SPainter extends SObject {
|
|
|
* @param y Y 坐标
|
|
|
* @param w 宽度
|
|
|
* @param h 高度
|
|
|
- */
|
|
|
+ */
|
|
|
clearRect(x: number, y: number, w: number, h: number): void;
|
|
|
|
|
|
/**
|
|
@@ -266,7 +266,7 @@ export class SPainter extends SObject {
|
|
|
* @param y Y 坐标 | 右下角坐标 | 大小
|
|
|
* @param w 宽度
|
|
|
* @param h 高度
|
|
|
- */
|
|
|
+ */
|
|
|
clearRect(
|
|
|
x: number | SPoint | SRect,
|
|
|
y?: number | SPoint | SSize,
|
|
@@ -284,13 +284,13 @@ export class SPainter extends SObject {
|
|
|
new SRect(x as number, y as number, w as number, h as number)
|
|
|
);
|
|
|
}
|
|
|
- } // Function clearRect()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 绘制矩形
|
|
|
*
|
|
|
* @param rect 矩形
|
|
|
- */
|
|
|
+ */
|
|
|
drawRect(rect: SRect): void;
|
|
|
|
|
|
/**
|
|
@@ -298,7 +298,7 @@ export class SPainter extends SObject {
|
|
|
*
|
|
|
* @param leftTop 左上角坐标
|
|
|
* @param rightBottom 右下角坐标
|
|
|
- */
|
|
|
+ */
|
|
|
drawRect(leftTop: SPoint, rightBottom: SPoint): void;
|
|
|
|
|
|
/**
|
|
@@ -306,7 +306,7 @@ export class SPainter extends SObject {
|
|
|
*
|
|
|
* @param leftTop 左上角坐标
|
|
|
* @param size 大小
|
|
|
- */
|
|
|
+ */
|
|
|
drawRect(leftTop: SPoint, size: SSize): void;
|
|
|
|
|
|
/**
|
|
@@ -316,7 +316,7 @@ export class SPainter extends SObject {
|
|
|
* @param y Y 坐标
|
|
|
* @param w 宽度
|
|
|
* @param h 高度
|
|
|
- */
|
|
|
+ */
|
|
|
drawRect(x: number, y: number, w: number, h: number): void;
|
|
|
|
|
|
/**
|
|
@@ -326,7 +326,7 @@ export class SPainter extends SObject {
|
|
|
* @param y Y 坐标 | 右下角坐标 | 大小
|
|
|
* @param w 宽度
|
|
|
* @param h 高度
|
|
|
- */
|
|
|
+ */
|
|
|
drawRect(
|
|
|
x: number | SPoint | SRect,
|
|
|
y?: number | SPoint | SSize,
|
|
@@ -350,14 +350,14 @@ export class SPainter extends SObject {
|
|
|
new SRect(x as number, y as number, w as number, h as number)
|
|
|
);
|
|
|
}
|
|
|
- } // Function drawRect()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 绘制带导角矩形
|
|
|
*
|
|
|
* @param rect 矩形
|
|
|
* @param r 导角半径
|
|
|
- */
|
|
|
+ */
|
|
|
drawRoundRect(rect: SRect, r: number): void;
|
|
|
|
|
|
/**
|
|
@@ -366,7 +366,7 @@ export class SPainter extends SObject {
|
|
|
* @param p1 矩形左上角的点
|
|
|
* @param p2 矩形右上角的点
|
|
|
* @param r 导角半径
|
|
|
- */
|
|
|
+ */
|
|
|
drawRoundRect(p1: SPoint, p2: SPoint, r: number): void;
|
|
|
|
|
|
/**
|
|
@@ -375,7 +375,7 @@ export class SPainter extends SObject {
|
|
|
* @param pos 左上角位置
|
|
|
* @param size 大小
|
|
|
* @param r 导角半径
|
|
|
- */
|
|
|
+ */
|
|
|
drawRoundRect(pos: SPoint, size: SSize, r: number): void;
|
|
|
|
|
|
/**
|
|
@@ -386,7 +386,7 @@ export class SPainter extends SObject {
|
|
|
* @param w 宽度
|
|
|
* @param h 高度
|
|
|
* @param r 导角半径
|
|
|
- */
|
|
|
+ */
|
|
|
drawRoundRect(x: number, y: number, w: number, h: number, r: number): void;
|
|
|
|
|
|
/**
|
|
@@ -397,7 +397,7 @@ export class SPainter extends SObject {
|
|
|
* @param w 宽度
|
|
|
* @param h 高度
|
|
|
* @param radius 导角半径
|
|
|
- */
|
|
|
+ */
|
|
|
drawRoundRect(
|
|
|
x: number | SPoint | SRect,
|
|
|
y: number | SSize | SPoint,
|
|
@@ -430,7 +430,7 @@ export class SPainter extends SObject {
|
|
|
if (rect != null && r != null) {
|
|
|
this.engine.drawRoundRect(rect, r);
|
|
|
}
|
|
|
- } // Function drawRoundRect()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 绘制圆形
|
|
@@ -438,10 +438,10 @@ export class SPainter extends SObject {
|
|
|
* @param cx 圆心 X 坐标
|
|
|
* @param cy 圆心 Y 坐标
|
|
|
* @param r 圆半径
|
|
|
- */
|
|
|
+ */
|
|
|
drawCircle(cx: number, cy: number, r: number): void {
|
|
|
this.engine.drawCircle(cx, cy, r);
|
|
|
- } // Function drawCircle()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 绘制椭圆
|
|
@@ -450,16 +450,16 @@ export class SPainter extends SObject {
|
|
|
* @param cy 圆点 Y 坐标
|
|
|
* @param rx 水平半径
|
|
|
* @param ry 垂直半径
|
|
|
- */
|
|
|
+ */
|
|
|
drawEllipse(cx: number, cy: number, rx: number, ry: number): void {
|
|
|
this.engine.drawEllipse(cx, cy, rx, ry);
|
|
|
- } // Function drawEllipse()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 绘制一条线段
|
|
|
*
|
|
|
* @param line 线段
|
|
|
- */
|
|
|
+ */
|
|
|
drawLine(line: SLine): void;
|
|
|
|
|
|
/**
|
|
@@ -467,7 +467,7 @@ export class SPainter extends SObject {
|
|
|
*
|
|
|
* @param p1 启点坐标
|
|
|
* @param p2 终点坐标
|
|
|
- */
|
|
|
+ */
|
|
|
drawLine(p1: SPoint, p2: SPoint): void;
|
|
|
|
|
|
/**
|
|
@@ -477,7 +477,7 @@ export class SPainter extends SObject {
|
|
|
* @param y1 启点 Y 坐标
|
|
|
* @param x2 终点 X 坐标
|
|
|
* @param y2 终点 Y 坐标
|
|
|
- */
|
|
|
+ */
|
|
|
drawLine(x1: number, y1: number, x2: number, y2: number): void;
|
|
|
|
|
|
/**
|
|
@@ -487,7 +487,7 @@ export class SPainter extends SObject {
|
|
|
* @param y1 启点 Y 坐标 | 终点坐标
|
|
|
* @param x2 终点 X 坐标
|
|
|
* @param y2 终点 Y 坐标
|
|
|
- */
|
|
|
+ */
|
|
|
drawLine(
|
|
|
x1: number | SPoint | SLine,
|
|
|
y1?: number | SPoint,
|
|
@@ -508,34 +508,34 @@ export class SPainter extends SObject {
|
|
|
)
|
|
|
);
|
|
|
}
|
|
|
- } // Function drawLine()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 绘制折线
|
|
|
*
|
|
|
* @param points 折线折点
|
|
|
- */
|
|
|
+ */
|
|
|
drawPolyline(points: SPoint[]): void {
|
|
|
this.engine.drawPolyline(points);
|
|
|
- } // Function drawPolyline()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 绘制多边形
|
|
|
*
|
|
|
* @param points 多边形顶点
|
|
|
- */
|
|
|
+ */
|
|
|
drawPolygon(points: SPoint[]): void {
|
|
|
this.engine.drawPolygon(points);
|
|
|
- } // Function drawPolygon()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 绘制路径
|
|
|
*
|
|
|
* @param path 路径
|
|
|
- */
|
|
|
+ */
|
|
|
drawPath(path: SPath): void {
|
|
|
this.engine.drawPath(path);
|
|
|
- } // Function drawPath()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 绘制文本
|
|
@@ -544,10 +544,10 @@ export class SPainter extends SObject {
|
|
|
* @param x X 坐标
|
|
|
* @param y Y 坐标
|
|
|
* @param maxWidth 最大宽度
|
|
|
- */
|
|
|
+ */
|
|
|
drawText(text: string, x: number, y: number, maxWidth?: number): void {
|
|
|
this.engine.drawText(text, x, y, maxWidth);
|
|
|
- } // Function drawText()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 绘制图片
|
|
@@ -557,7 +557,7 @@ export class SPainter extends SObject {
|
|
|
* @param y Y 坐标
|
|
|
* @param width 宽度
|
|
|
* @param height 高度
|
|
|
- */
|
|
|
+ */
|
|
|
drawImage(
|
|
|
img: CanvasImageSource,
|
|
|
x: number,
|
|
@@ -566,23 +566,23 @@ export class SPainter extends SObject {
|
|
|
height?: number
|
|
|
): void {
|
|
|
this.engine.drawImage(img, x, y, width, height);
|
|
|
- } // Function drawImage()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* painter 转实现 view 象素
|
|
|
*
|
|
|
* @param p 绘制坐标
|
|
|
- */
|
|
|
+ */
|
|
|
toPx(p: number): number {
|
|
|
return p / this.engine.state.matrix.a;
|
|
|
- } // Function painterToView()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 预测量文本宽度
|
|
|
*
|
|
|
* @param text 文本字符
|
|
|
* @return 文本所占长度像素
|
|
|
- */
|
|
|
+ */
|
|
|
textWidth(text: string): number {
|
|
|
return this.engine.textWidth(text);
|
|
|
}
|
|
@@ -592,7 +592,7 @@ export class SPainter extends SObject {
|
|
|
*
|
|
|
* @param line 线段
|
|
|
* @param style 末端样式
|
|
|
- */
|
|
|
+ */
|
|
|
drawArrowLine(line: SLine, style?: SArrow): void;
|
|
|
|
|
|
/**
|
|
@@ -601,7 +601,7 @@ export class SPainter extends SObject {
|
|
|
* @param p1 启点坐标
|
|
|
* @param p2 终点坐标
|
|
|
* @param style 末端样式
|
|
|
- */
|
|
|
+ */
|
|
|
drawArrowLine(p1: SPoint, p2: SPoint, style?: SArrow): void;
|
|
|
|
|
|
/**
|
|
@@ -612,7 +612,7 @@ export class SPainter extends SObject {
|
|
|
* @param x2 终点 X 坐标
|
|
|
* @param y2 终点 Y 坐标
|
|
|
* @param style 末端样式
|
|
|
- */
|
|
|
+ */
|
|
|
drawArrowLine(
|
|
|
x1: number,
|
|
|
y1: number,
|
|
@@ -629,7 +629,7 @@ export class SPainter extends SObject {
|
|
|
* @param x2 终点 X 坐标
|
|
|
* @param y2 终点 Y 坐标
|
|
|
* @param st 线段两端样式
|
|
|
- */
|
|
|
+ */
|
|
|
drawArrowLine(
|
|
|
x1: number | SPoint | SLine,
|
|
|
y1?: number | SPoint | SArrow,
|
|
@@ -682,14 +682,14 @@ export class SPainter extends SObject {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- } // Function drawArrowLine()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 私有计算方法-绘制线段末端标准箭头
|
|
|
*
|
|
|
* @param line 要加末端样式的线段
|
|
|
* @param isEnd 是否为结束位置
|
|
|
- */
|
|
|
+ */
|
|
|
private drawBasicArrow(line: SLine, isEnd: boolean = true): void {
|
|
|
// 定义箭头长度
|
|
|
const d = this.toPx(10);
|
|
@@ -721,14 +721,14 @@ export class SPainter extends SObject {
|
|
|
]);
|
|
|
}
|
|
|
this.restore();
|
|
|
- } // Function drawArrow()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 私有计算方法-绘制线段末端三角形箭头
|
|
|
*
|
|
|
* @param line 要加末端样式的线段
|
|
|
* @param isEnd 是否为结束位置
|
|
|
- */
|
|
|
+ */
|
|
|
private drawTriangleArrow(line: SLine, isEnd: boolean = true): void {
|
|
|
// 定义箭头长度
|
|
|
const d = this.toPx(10);
|
|
@@ -760,14 +760,14 @@ export class SPainter extends SObject {
|
|
|
]);
|
|
|
}
|
|
|
this.restore();
|
|
|
- } // Function drawTriangleArrow()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 私有计算方法-绘制线段末端菱形箭头
|
|
|
*
|
|
|
* @param line 要加末端样式的线段
|
|
|
* @param isEnd 是否为结束位置
|
|
|
- */
|
|
|
+ */
|
|
|
private drawDiamondArrow(line: SLine, isEnd: boolean = true): void {
|
|
|
// 定义箭头长度
|
|
|
const d = this.toPx(5);
|
|
@@ -801,14 +801,14 @@ export class SPainter extends SObject {
|
|
|
]);
|
|
|
}
|
|
|
this.restore();
|
|
|
- } // Function drawDiamondArrow()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 私有计算方法-绘制线段末端方形箭头
|
|
|
*
|
|
|
* @param line 要加末端样式的线段
|
|
|
* @param isEnd 是否为结束位置
|
|
|
- */
|
|
|
+ */
|
|
|
private drawSquareArrow(line: SLine, isEnd: boolean = true): void {
|
|
|
// 定义箭头长度
|
|
|
const d = this.toPx(5);
|
|
@@ -839,14 +839,14 @@ export class SPainter extends SObject {
|
|
|
]);
|
|
|
}
|
|
|
this.restore();
|
|
|
- } // Function drawSquareArrow()
|
|
|
+ }
|
|
|
|
|
|
/**
|
|
|
* 私有计算方法-绘制线段末端圆形箭头
|
|
|
*
|
|
|
* @param line 要加末端样式的线段
|
|
|
* @param isEnd 是否为结束位置
|
|
|
- */
|
|
|
+ */
|
|
|
private drawCircleArrow(line: SLine, isEnd: boolean = true): void {
|
|
|
// 定义箭头长度
|
|
|
const d = this.toPx(5);
|
|
@@ -867,5 +867,5 @@ export class SPainter extends SObject {
|
|
|
this.engine.drawCircle(d / 2, 0, d / 2);
|
|
|
}
|
|
|
this.restore();
|
|
|
- } // Function drawCircleArrow()
|
|
|
-} // Class SPainter
|
|
|
+ }
|
|
|
+}
|