|
@@ -232,7 +232,8 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
if (maxWidth == undefined) {
|
|
if (maxWidth == undefined) {
|
|
this._canvas.strokeText(text, x, y);
|
|
this._canvas.strokeText(text, x, y);
|
|
this._canvas.fillText(text, x, y);
|
|
this._canvas.fillText(text, x, y);
|
|
- } else { // 绘制时限制最大宽度
|
|
|
|
|
|
+ } else {
|
|
|
|
+ // 绘制时限制最大宽度
|
|
this._canvas.strokeText(text, x, y, maxWidth);
|
|
this._canvas.strokeText(text, x, y, maxWidth);
|
|
this._canvas.fillText(text, x, y, maxWidth);
|
|
this._canvas.fillText(text, x, y, maxWidth);
|
|
}
|
|
}
|
|
@@ -260,10 +261,12 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
// 不传宽度时,绘制图片不限制宽高
|
|
// 不传宽度时,绘制图片不限制宽高
|
|
if (width == undefined) {
|
|
if (width == undefined) {
|
|
this._canvas.drawImage(img, x, y);
|
|
this._canvas.drawImage(img, x, y);
|
|
- } else { // 绘制时限制图片宽高
|
|
|
|
|
|
+ } else {
|
|
|
|
+ // 绘制时限制图片宽高
|
|
this._canvas.drawImage(img, x, y, width, height as number);
|
|
this._canvas.drawImage(img, x, y, width, height as number);
|
|
}
|
|
}
|
|
- } catch (e) { // 捕获 获取图片异常
|
|
|
|
|
|
+ } catch (e) {
|
|
|
|
+ // 捕获 获取图片异常
|
|
console.log(e);
|
|
console.log(e);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
@@ -393,7 +396,8 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
if (this.state.pen.lineDash != null) {
|
|
if (this.state.pen.lineDash != null) {
|
|
this._canvas.setLineDash(this.state.pen.lineDash);
|
|
this._canvas.setLineDash(this.state.pen.lineDash);
|
|
this._canvas.lineDashOffset = this.state.pen.dashOffset;
|
|
this._canvas.lineDashOffset = this.state.pen.dashOffset;
|
|
- } else { // 没有设定画笔的虚线样式
|
|
|
|
|
|
+ } else {
|
|
|
|
+ // 没有设定画笔的虚线样式
|
|
this._canvas.setLineDash([]);
|
|
this._canvas.setLineDash([]);
|
|
this._canvas.lineDashOffset = 0;
|
|
this._canvas.lineDashOffset = 0;
|
|
}
|
|
}
|
|
@@ -415,9 +419,11 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
// 圆头
|
|
// 圆头
|
|
if (style == SLineCapStyle.Round) {
|
|
if (style == SLineCapStyle.Round) {
|
|
this._canvas.lineCap = "round";
|
|
this._canvas.lineCap = "round";
|
|
- } else if (style == SLineCapStyle.Square) { // 方头
|
|
|
|
|
|
+ } else if (style == SLineCapStyle.Square) {
|
|
|
|
+ // 方头
|
|
this._canvas.lineCap = "square";
|
|
this._canvas.lineCap = "square";
|
|
- } else { // 平头
|
|
|
|
|
|
+ } else {
|
|
|
|
+ // 平头
|
|
this._canvas.lineCap = "butt";
|
|
this._canvas.lineCap = "butt";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -432,7 +438,8 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
this.state.brush.color.green
|
|
this.state.brush.color.green
|
|
}, ${this.state.brush.color.blue}, ${this.state.brush.color.alpha /
|
|
}, ${this.state.brush.color.blue}, ${this.state.brush.color.alpha /
|
|
255.0})`;
|
|
255.0})`;
|
|
- } else if (this.state.brush.type == SBrushType.Gradient) { // 渐变画刷
|
|
|
|
|
|
+ } else if (this.state.brush.type == SBrushType.Gradient) {
|
|
|
|
+ // 渐变画刷
|
|
let gradient = this.state.brush.gradient,
|
|
let gradient = this.state.brush.gradient,
|
|
drawGradient: CanvasGradient;
|
|
drawGradient: CanvasGradient;
|
|
// 线性渐变画刷
|
|
// 线性渐变画刷
|
|
@@ -443,7 +450,8 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
gradient.x2,
|
|
gradient.x2,
|
|
gradient.y2
|
|
gradient.y2
|
|
);
|
|
);
|
|
- } else if (gradient instanceof SRadialGradient) { // 径向渐变画刷
|
|
|
|
|
|
+ } else if (gradient instanceof SRadialGradient) {
|
|
|
|
+ // 径向渐变画刷
|
|
drawGradient = this._canvas.createRadialGradient(
|
|
drawGradient = this._canvas.createRadialGradient(
|
|
gradient.x1,
|
|
gradient.x1,
|
|
gradient.y1,
|
|
gradient.y1,
|
|
@@ -454,7 +462,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
);
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
- // TODO:建龙补充
|
|
|
|
|
|
+ // 如果引擎中画刷为渐变类型,将渐变的停点遍历添加到 canvas 渐变中
|
|
// @ts-ignore
|
|
// @ts-ignore
|
|
if (gradient && drawGradient) {
|
|
if (gradient && drawGradient) {
|
|
gradient.stopList.forEach((t: SGradientStop): void => {
|
|
gradient.stopList.forEach((t: SGradientStop): void => {
|
|
@@ -492,7 +500,8 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
}, ${this.state.shadow.shadowColor.alpha / 255.0})`;
|
|
}, ${this.state.shadow.shadowColor.alpha / 255.0})`;
|
|
this._canvas.shadowOffsetX = this.state.shadow.shadowOffsetX;
|
|
this._canvas.shadowOffsetX = this.state.shadow.shadowOffsetX;
|
|
this._canvas.shadowOffsetY = this.state.shadow.shadowOffsetY;
|
|
this._canvas.shadowOffsetY = this.state.shadow.shadowOffsetY;
|
|
- } else { // 否则
|
|
|
|
|
|
+ } else {
|
|
|
|
+ // 否则
|
|
this._canvas.shadowBlur = 0;
|
|
this._canvas.shadowBlur = 0;
|
|
this._canvas.shadowColor = "";
|
|
this._canvas.shadowColor = "";
|
|
this._canvas.shadowOffsetX = 0;
|
|
this._canvas.shadowOffsetX = 0;
|
|
@@ -523,13 +532,17 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
// 文本在指定的位置开始
|
|
// 文本在指定的位置开始
|
|
if (value === STextAlign.Start) {
|
|
if (value === STextAlign.Start) {
|
|
this._canvas.textAlign = "start";
|
|
this._canvas.textAlign = "start";
|
|
- } else if (value === STextAlign.End) { // 文本在指定的位置结束
|
|
|
|
|
|
+ } else if (value === STextAlign.End) {
|
|
|
|
+ // 文本在指定的位置结束
|
|
this._canvas.textAlign = "end";
|
|
this._canvas.textAlign = "end";
|
|
- } else if (value === STextAlign.Left) { // 左对齐
|
|
|
|
|
|
+ } else if (value === STextAlign.Left) {
|
|
|
|
+ // 左对齐
|
|
this._canvas.textAlign = "left";
|
|
this._canvas.textAlign = "left";
|
|
- } else if (value === STextAlign.Center) { // 文本的中心被放置在指定的位置
|
|
|
|
|
|
+ } else if (value === STextAlign.Center) {
|
|
|
|
+ // 文本的中心被放置在指定的位置
|
|
this._canvas.textAlign = "center";
|
|
this._canvas.textAlign = "center";
|
|
- } else { // 右对齐
|
|
|
|
|
|
+ } else {
|
|
|
|
+ // 右对齐
|
|
this._canvas.textAlign = "right";
|
|
this._canvas.textAlign = "right";
|
|
}
|
|
}
|
|
}
|
|
}
|