|
@@ -1,15 +1,20 @@
|
|
|
import { SPaintEngine } from "./SPaintEngine";
|
|
|
import {
|
|
|
+ SBrushType,
|
|
|
+ SGradientStop,
|
|
|
SLine,
|
|
|
+ SLinearGradient,
|
|
|
SLineCapStyle,
|
|
|
SPaintEngineType,
|
|
|
SPoint,
|
|
|
+ SRadialGradient,
|
|
|
SRect,
|
|
|
STextAlign,
|
|
|
STextBaseLine,
|
|
|
STextDirection
|
|
|
} from "..";
|
|
|
import { SPath2D } from "../SPath2D";
|
|
|
+import { SCompositeType } from "../enums/SCompositeType";
|
|
|
|
|
|
/**
|
|
|
* Canvas绘制引擎基类
|
|
@@ -78,6 +83,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
|
this.setMatrix();
|
|
|
this.setPen();
|
|
|
this.setBrush();
|
|
|
+ this.setComposite();
|
|
|
this._canvas.fillRect(rect.x, rect.y, rect.width, rect.height);
|
|
|
this._canvas.strokeRect(rect.x, rect.y, rect.width, rect.height);
|
|
|
} // Function drawRect()
|
|
@@ -93,6 +99,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
|
this.setMatrix();
|
|
|
this.setPen();
|
|
|
this.setBrush();
|
|
|
+ this.setComposite();
|
|
|
this._canvas.beginPath();
|
|
|
this._canvas.arc(cx, cy, r, 0, 2 * Math.PI, true);
|
|
|
this._canvas.fill();
|
|
@@ -111,6 +118,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
|
this.setMatrix();
|
|
|
this.setPen();
|
|
|
this.setBrush();
|
|
|
+ this.setComposite();
|
|
|
this._canvas.beginPath();
|
|
|
this._canvas.ellipse(cx, cy, rx, ry, 0.5, 0, 2 * Math.PI, true);
|
|
|
} // Function drawEllipse()
|
|
@@ -136,6 +144,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
|
this.setMatrix();
|
|
|
this.setPen();
|
|
|
this.setBrush();
|
|
|
+ this.setComposite();
|
|
|
let p = SPath2D.arc(x, y, width, height, startAngle, endAngle);
|
|
|
let path = new Path2D(
|
|
|
SPath2D.arc(x, y, width, height, startAngle, endAngle)
|
|
@@ -164,6 +173,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
|
this.setMatrix();
|
|
|
this.setPen();
|
|
|
this.setBrush();
|
|
|
+ this.setComposite();
|
|
|
let path = new Path2D(
|
|
|
SPath2D.chord(x, y, width, height, startAngle, endAngle)
|
|
|
);
|
|
@@ -193,6 +203,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
|
this.setMatrix();
|
|
|
this.setPen();
|
|
|
this.setBrush();
|
|
|
+ this.setComposite();
|
|
|
let path = new Path2D(
|
|
|
SPath2D.pie(x, y, width, height, startAngle, endAngle)
|
|
|
);
|
|
@@ -209,6 +220,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
|
this.setMatrix();
|
|
|
this.setPen();
|
|
|
this.setBrush();
|
|
|
+ this.setComposite();
|
|
|
this._canvas.beginPath();
|
|
|
this._canvas.moveTo(line.x1, line.y1);
|
|
|
this._canvas.lineTo(line.x2, line.y2);
|
|
@@ -229,6 +241,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
|
this.setMatrix();
|
|
|
this.setPen();
|
|
|
this.setBrush();
|
|
|
+ this.setComposite();
|
|
|
|
|
|
this._canvas.beginPath();
|
|
|
this._canvas.moveTo(points[0].x, points[0].y);
|
|
@@ -253,6 +266,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
|
this.setMatrix();
|
|
|
this.setPen();
|
|
|
this.setBrush();
|
|
|
+ this.setComposite();
|
|
|
|
|
|
this._canvas.beginPath();
|
|
|
this._canvas.moveTo(points[0].x, points[0].y);
|
|
@@ -274,6 +288,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
|
this.setMatrix();
|
|
|
this.setPen();
|
|
|
this.setBrush();
|
|
|
+ this.setComposite();
|
|
|
|
|
|
this._canvas.fill(path._path);
|
|
|
this._canvas.stroke(path._path);
|
|
@@ -292,6 +307,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
|
this.setPen();
|
|
|
this.setBrush();
|
|
|
this.setFont();
|
|
|
+ this.setComposite();
|
|
|
|
|
|
if (maxWidth == undefined) {
|
|
|
this._canvas.fillText(text, x, y);
|
|
@@ -397,13 +413,90 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
|
*/
|
|
|
private setBrush(): void {
|
|
|
// this._canvas.fillStyle = this.state.brush.color.value;
|
|
|
- this._canvas.fillStyle = `rgba(${this.state.brush.color.red}, ${
|
|
|
- this.state.brush.color.green
|
|
|
- }, ${this.state.brush.color.blue}, ${this.state.brush.color.alpha /
|
|
|
- 255.0})`;
|
|
|
+ if (this.state.brush.type == SBrushType.Color) {
|
|
|
+ this._canvas.fillStyle = `rgba(${this.state.brush.color.red}, ${
|
|
|
+ this.state.brush.color.green
|
|
|
+ }, ${this.state.brush.color.blue}, ${this.state.brush.color.alpha /
|
|
|
+ 255.0})`;
|
|
|
+ } else if (this.state.brush.type == SBrushType.Gradient) {
|
|
|
+ let gradient = this.state.brush.gradient,
|
|
|
+ drawGradient: CanvasGradient;
|
|
|
+ if (gradient instanceof SLinearGradient) {
|
|
|
+ drawGradient = this._canvas.createLinearGradient(
|
|
|
+ gradient.x1,
|
|
|
+ gradient.y1,
|
|
|
+ gradient.x2,
|
|
|
+ gradient.y2
|
|
|
+ );
|
|
|
+ } else if (gradient instanceof SRadialGradient) {
|
|
|
+ drawGradient = this._canvas.createRadialGradient(
|
|
|
+ gradient.x1,
|
|
|
+ gradient.y1,
|
|
|
+ gradient.r1,
|
|
|
+ gradient.x2,
|
|
|
+ gradient.y2,
|
|
|
+ gradient.r2
|
|
|
+ );
|
|
|
+ }
|
|
|
+ // @ts-ignore
|
|
|
+ if (gradient && drawGradient) {
|
|
|
+ gradient.stopList.forEach((t: SGradientStop): void => {
|
|
|
+ drawGradient.addColorStop(
|
|
|
+ t.pos,
|
|
|
+ `rgba(${t.color.red},${t.color.green},${t.color.blue},${t.color.alpha})`
|
|
|
+ );
|
|
|
+ });
|
|
|
+ this._canvas.fillStyle = drawGradient;
|
|
|
+ }
|
|
|
+ }
|
|
|
} // Function setBrush()
|
|
|
|
|
|
/**
|
|
|
+ * 设置融合
|
|
|
+ */
|
|
|
+ private setComposite(): void {
|
|
|
+ const type = this.state._composite;
|
|
|
+ switch (type) {
|
|
|
+ case SCompositeType.SourceOver:
|
|
|
+ this._canvas.globalCompositeOperation = "source-over";
|
|
|
+ return;
|
|
|
+ case SCompositeType.Copy:
|
|
|
+ this._canvas.globalCompositeOperation = "copy";
|
|
|
+ return;
|
|
|
+ case SCompositeType.DestinationAtop:
|
|
|
+ this._canvas.globalCompositeOperation = "destination-atop";
|
|
|
+ return;
|
|
|
+ case SCompositeType.DestinationIn:
|
|
|
+ this._canvas.globalCompositeOperation = "destination-in";
|
|
|
+ return;
|
|
|
+ case SCompositeType.DestinationOut:
|
|
|
+ this._canvas.globalCompositeOperation = "destination-out";
|
|
|
+ return;
|
|
|
+ case SCompositeType.DestinationOver:
|
|
|
+ this._canvas.globalCompositeOperation = "destination-over";
|
|
|
+ return;
|
|
|
+ case SCompositeType.Lighter:
|
|
|
+ this._canvas.globalCompositeOperation = "lighter";
|
|
|
+ return;
|
|
|
+ case SCompositeType.SourceAtop:
|
|
|
+ this._canvas.globalCompositeOperation = "source-atop";
|
|
|
+ return;
|
|
|
+ case SCompositeType.SourceIn:
|
|
|
+ this._canvas.globalCompositeOperation = "source-in";
|
|
|
+ return;
|
|
|
+ case SCompositeType.SourceOut:
|
|
|
+ this._canvas.globalCompositeOperation = "source-out";
|
|
|
+ return;
|
|
|
+ case SCompositeType.Xor:
|
|
|
+ this._canvas.globalCompositeOperation = "xor";
|
|
|
+ return;
|
|
|
+ default:
|
|
|
+ this._canvas.globalCompositeOperation = "source-over";
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ } // Function setComposite()
|
|
|
+
|
|
|
+ /**
|
|
|
* 设置字体
|
|
|
*/
|
|
|
private setFont(): void {
|
|
@@ -416,7 +509,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
|
|
|
/**
|
|
|
* 文本对齐选项
|
|
|
*
|
|
|
- * @param style 对齐方式
|
|
|
+ * @param value 对齐方式
|
|
|
*/
|
|
|
private setTextAlign(value: STextAlign): void {
|
|
|
// TODO: 找原因,去下边一行
|