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