1 | import { __awaiter } from '../../node_modules/.pnpm/registry.npmjs.org_tslib@2.5.0/node_modules/tslib/tslib.es6.js';
|
2 |
|
3 | const TextBaseLineMap = {
|
4 | top: 'top',
|
5 | bottom: 'bottom',
|
6 | middle: 'middle',
|
7 | normal: 'alphabetic'
|
8 | };
|
9 | class CanvasContext {
|
10 | constructor(canvas, ctx) {
|
11 | this.actions = [];
|
12 | this.canvas = canvas;
|
13 | this.ctx = ctx;
|
14 | }
|
15 | set ctx(e) {
|
16 | this.__raw__ = e;
|
17 | }
|
18 | get ctx() {
|
19 | return this.__raw__ || {};
|
20 | }
|
21 | emptyActions() {
|
22 | this.actions.length = 0;
|
23 | }
|
24 | enqueueActions(func, ...args) {
|
25 | this.actions.push({
|
26 | func,
|
27 | args
|
28 | });
|
29 | }
|
30 | set fillStyle(e) { this.enqueueActions(() => { this.ctx.fillStyle = e; }); }
|
31 | get fillStyle() { return this.ctx.fillStyle; }
|
32 | set font(e) { this.ctx.font = e; }
|
33 | get font() { return this.ctx.font; }
|
34 | set globalAlpha(e) { this.enqueueActions(() => { this.ctx.globalAlpha = e; }); }
|
35 | get globalAlpha() { return this.ctx.globalAlpha; }
|
36 | set globalCompositeOperation(e) { this.enqueueActions(() => { this.ctx.globalCompositeOperation = e; }); }
|
37 | get globalCompositeOperation() { return this.ctx.globalCompositeOperation; }
|
38 | set lineCap(e) { this.enqueueActions(() => { this.ctx.lineCap = e; }); }
|
39 | get lineCap() { return this.ctx.lineCap; }
|
40 | set lineDashOffset(e) { this.enqueueActions(() => { this.ctx.lineDashOffset = e; }); }
|
41 | get lineDashOffset() { return this.ctx.lineDashOffset; }
|
42 | set lineJoin(e) { this.enqueueActions(() => { this.ctx.lineJoin = e; }); }
|
43 | get lineJoin() { return this.ctx.lineJoin; }
|
44 | set lineWidth(e) { this.enqueueActions(() => { this.ctx.lineWidth = e; }); }
|
45 | get lineWidth() { return this.ctx.lineWidth; }
|
46 | set miterLimit(e) { this.enqueueActions(() => { this.ctx.miterLimit = e; }); }
|
47 | get miterLimit() { return this.ctx.miterLimit; }
|
48 | set shadowBlur(e) { this.enqueueActions(() => { this.ctx.shadowBlur = e; }); }
|
49 | get shadowBlur() { return this.ctx.shadowBlur; }
|
50 | set shadowColor(e) { this.enqueueActions(() => { this.ctx.shadowColor = e; }); }
|
51 | get shadowColor() { return this.ctx.shadowColor; }
|
52 | set shadowOffsetX(e) { this.enqueueActions(() => { this.ctx.shadowOffsetX = e; }); }
|
53 | get shadowOffsetX() { return this.ctx.shadowOffsetX; }
|
54 | set shadowOffsetY(e) { this.enqueueActions(() => { this.ctx.shadowOffsetY = e; }); }
|
55 | get shadowOffsetY() { return this.ctx.shadowOffsetY; }
|
56 | set strokeStyle(e) { this.enqueueActions(() => { this.ctx.strokeStyle = e; }); }
|
57 | get strokeStyle() { return this.ctx.strokeStyle; }
|
58 |
|
59 | set textAlign(e) { this.ctx.textAlign = e; }
|
60 | get textAlign() { return this.ctx.textAlign; }
|
61 | set textBaseline(e) { this.ctx.textBaseline = e; }
|
62 | get textBaseline() { return this.ctx.textBaseline; }
|
63 | set direction(e) { this.ctx.direction = e; }
|
64 | get direction() { return this.ctx.direction; }
|
65 | set imageSmoothingEnabled(e) { this.enqueueActions(() => { this.ctx.imageSmoothingEnabled = e; }); }
|
66 | get imageSmoothingEnabled() { return this.ctx.imageSmoothingEnabled; }
|
67 | set imageSmoothingQuality(e) { this.enqueueActions(() => { this.ctx.imageSmoothingQuality = e; }); }
|
68 | get imageSmoothingQuality() { return this.ctx.imageSmoothingQuality; }
|
69 | set filter(e) { this.enqueueActions(() => { this.ctx.filter = e; }); }
|
70 | get filter() { return this.ctx.filter; }
|
71 |
|
72 | arc(...args) { return this.enqueueActions(this.ctx.arc, ...args); }
|
73 | arcTo(...args) { return this.enqueueActions(this.ctx.arcTo, ...args); }
|
74 | beginPath(...args) { return this.enqueueActions(this.ctx.beginPath, ...args); }
|
75 | bezierCurveTo(...args) { return this.enqueueActions(this.ctx.bezierCurveTo, ...args); }
|
76 | clearRect(...args) { return this.enqueueActions(this.ctx.clearRect, ...args); }
|
77 | clip(...args) { return this.enqueueActions(this.ctx.clip, ...args); }
|
78 | closePath(...args) { return this.enqueueActions(this.ctx.closePath, ...args); }
|
79 | createPattern(image, repetition) {
|
80 | return this.createPattern(image, repetition);
|
81 | }
|
82 | |
83 |
|
84 |
|
85 |
|
86 | draw(reserve, callback) {
|
87 | return __awaiter(this, void 0, void 0, function* () {
|
88 | try {
|
89 | if (!reserve) {
|
90 | this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
91 | }
|
92 |
|
93 | for (const { func, args } of this.actions) {
|
94 | yield func.apply(this.ctx, args);
|
95 | }
|
96 | this.emptyActions();
|
97 | callback && callback();
|
98 | }
|
99 | catch (e) {
|
100 |
|
101 | throw {
|
102 | errMsg: e.message
|
103 | };
|
104 | }
|
105 | });
|
106 | }
|
107 | drawImage(imageResource, ...extra) {
|
108 | this.enqueueActions(() => {
|
109 |
|
110 | if (typeof imageResource === 'string') {
|
111 | const img = new Image();
|
112 | img.src = imageResource;
|
113 | return new Promise((resolve, reject) => {
|
114 | img.onload = () => {
|
115 | this.ctx.drawImage(img, ...extra);
|
116 | resolve();
|
117 | };
|
118 | img.onerror = reject;
|
119 | });
|
120 | }
|
121 | this.ctx.drawImage(imageResource, ...extra);
|
122 | });
|
123 | }
|
124 | fill(...args) { return this.enqueueActions(this.ctx.fill, ...args); }
|
125 | fillRect(...args) { return this.enqueueActions(this.ctx.fillRect, ...args); }
|
126 | fillText(...args) { return this.enqueueActions(this.ctx.fillText, ...args); }
|
127 | lineTo(...args) { return this.enqueueActions(this.ctx.lineTo, ...args); }
|
128 | moveTo(...args) { return this.enqueueActions(this.ctx.moveTo, ...args); }
|
129 | quadraticCurveTo(...args) { return this.enqueueActions(this.ctx.quadraticCurveTo, ...args); }
|
130 | rect(...args) { return this.enqueueActions(this.ctx.rect, ...args); }
|
131 | restore(...args) { return this.enqueueActions(this.ctx.restore, ...args); }
|
132 | rotate(...args) { return this.enqueueActions(this.ctx.rotate, ...args); }
|
133 | save(...args) { return this.enqueueActions(this.ctx.save, ...args); }
|
134 | scale(...args) { return this.enqueueActions(this.ctx.scale, ...args); }
|
135 | setFillStyle(color) {
|
136 | this.enqueueActions(() => { this.ctx.fillStyle = color; });
|
137 | }
|
138 | setFontSize(fontSize) {
|
139 | this.font = `${fontSize}px`;
|
140 | }
|
141 | setGlobalAlpha(alpha) {
|
142 | this.globalAlpha = alpha;
|
143 | }
|
144 | setLineCap(lineCap) {
|
145 | this.lineCap = lineCap;
|
146 | }
|
147 | setLineDash(pattern, offset) {
|
148 | this.enqueueActions(() => {
|
149 | this.ctx.setLineDash(pattern);
|
150 | this.ctx.lineDashOffset = offset;
|
151 | });
|
152 | }
|
153 | setLineJoin(lineJoin) {
|
154 | this.lineJoin = lineJoin;
|
155 | }
|
156 | setLineWidth(lineWidth) {
|
157 | this.lineWidth = lineWidth;
|
158 | }
|
159 | setMiterLimit(miterLimit) {
|
160 | this.miterLimit = miterLimit;
|
161 | }
|
162 | setShadow(offsetX, offsetY, blur, color) {
|
163 | this.enqueueActions(() => {
|
164 | this.ctx.shadowOffsetX = offsetX;
|
165 | this.ctx.shadowOffsetY = offsetY;
|
166 | this.ctx.shadowColor = color;
|
167 | this.ctx.shadowBlur = blur;
|
168 | });
|
169 | }
|
170 | setStrokeStyle(color) {
|
171 | this.enqueueActions(() => { this.ctx.strokeStyle = color; });
|
172 | }
|
173 | setTextAlign(align) {
|
174 | this.textAlign = align;
|
175 | }
|
176 | setTextBaseline(textBaseline) {
|
177 | this.textBaseline = TextBaseLineMap[textBaseline] || 'alphabetic';
|
178 | }
|
179 | setTransform(...args) { return this.enqueueActions(this.ctx.setTransform, ...args); }
|
180 | stroke(...args) { return this.enqueueActions(this.ctx.stroke, ...args); }
|
181 | strokeRect(...args) { return this.enqueueActions(this.ctx.strokeRect, ...args); }
|
182 | strokeText(...args) { return this.enqueueActions(this.ctx.strokeText, ...args); }
|
183 | transform(...args) { return this.enqueueActions(this.ctx.transform, ...args); }
|
184 | translate(...args) { return this.enqueueActions(this.ctx.translate, ...args); }
|
185 | measureText(text) {
|
186 | return this.ctx.measureText(text);
|
187 | }
|
188 | createCircularGradient(x, y, r) {
|
189 | const radialGradient = this.ctx.createRadialGradient(x, y, 0, x, y, r);
|
190 | return radialGradient;
|
191 | }
|
192 | createLinearGradient(x0, y0, x1, y1) {
|
193 | return this.ctx.createLinearGradient(x0, y0, x1, y1);
|
194 | }
|
195 | }
|
196 |
|
197 | export { CanvasContext };
|
198 |
|