26 | WebPaint
27 |
31 |
51 |
40 |
49 |
50 |
30 |
31 |
37 |
38 |
39 |
40 |
44 | 铅笔
45 | 直线
46 | 矩形
47 | 正圆
48 |
49 |
50 |
51 |
52 | (this.store.lineWidth = e)}
59 | />
60 | }
61 | arrowPointAtCenter>
62 |
63 |
64 | this.onLineColorChange(e)}
70 | />
71 | }
72 | arrowPointAtCenter
73 | mouseLeaveDelay={0.2}>
74 |
75 |
76 | this.onFillColorChange(e)}
83 | />
84 | }
85 | arrowPointAtCenter>
86 |
87 |
88 |
89 |
90 |
91 |
97 |
98 |
99 |
100 |
106 |
107 |
108 | );
109 | }
110 |
111 | private onLineColorChange(e: ColorResult) {
112 | this.store.lineColor = e.hex;
113 | }
114 |
115 | private onFillColorChange(e: ColorResult) {
116 | this.store.fillColor = e.hex;
117 | }
118 |
119 | private onBtnClearClick(e: React.FormEvent
59 |
71 | this.onSaveOk(e)}
75 | onCancel={e => this.onSaveCancel(e)}>
76 | (this.store.fileName = e.target.value)}
81 | />
82 |
83 |
84 | );
85 | }
86 |
87 | public componentDidMount() {
88 | this.drawDisposer = autorun(() => {
89 | this.draw(this.store.drawCommands);
90 | });
91 | EventBus.$on("canvas:clearCommands", this.clearCommands.bind(this));
92 | EventBus.$on("canvas:undo", this.undo.bind(this));
93 | EventBus.$on("canvas:save", this.save.bind(this));
94 | }
95 |
96 | public componentWillUnmount() {
97 | this.drawDisposer();
98 | }
99 |
100 | private get Position(): IPoint {
101 | const rect = ReactDOM.findDOMNode(this.canvas).getBoundingClientRect();
102 | return { x: rect.left, y: rect.top };
103 | }
104 |
105 | private get canvas(): HTMLCanvasElement {
106 | const canvas = document.getElementById(this.props.id);
107 | if (!canvas) {
108 | throw new Error("[FATAL] Canvas is null");
109 | }
110 | return canvas as HTMLCanvasElement;
111 | }
112 |
113 | private get ctx(): CanvasRenderingContext2D {
114 | const ctx = this.canvas.getContext("2d");
115 | if (!ctx) {
116 | throw new Error("[FATAL] ctx is null");
117 | }
118 | return ctx;
119 | }
120 |
121 | private drawCommand(command: IDrawCommand) {
122 | const ctx = this.ctx;
123 | const { fillColor, lineColor, lineWidth, type, path } = command;
124 |
125 | ctx.beginPath();
126 | ctx.lineWidth = lineWidth;
127 | ctx.strokeStyle = lineColor;
128 | ctx.fillStyle = fillColor;
129 | switch (type) {
130 | case PenType.Point: {
131 | const point = path[0];
132 | ctx.fillRect(point.x, point.y, 1, 1);
133 | break;
134 | }
135 | case PenType.Line: {
136 | const start = path[0];
137 | const end = path[1];
138 | ctx.moveTo(start.x, start.y);
139 | ctx.lineTo(end.x, end.y);
140 | break;
141 | }
142 | case PenType.Lines: {
143 | const fstPoint = path[0];
144 | ctx.moveTo(fstPoint.x, fstPoint.y);
145 | let prev = fstPoint;
146 | let cur: IPoint;
147 | for (let i = 1; i < path.length; i++) {
148 | cur = path[i];
149 | ctx.lineTo(cur.x, cur.y);
150 | ctx.moveTo(cur.x, cur.y);
151 | prev = cur;
152 | }
153 | break;
154 | }
155 | case PenType.Rect: {
156 | let { x, y } = path[0];
157 | let x1 = path[1].x;
158 | let y1 = path[1].y;
159 |
160 | const width = Math.abs(x1 - x);
161 | const height = Math.abs(y1 - y);
162 |
163 | if (x1 < x && y1 < y) {
164 | [x, x1] = [x1, x];
165 | [y, y1] = [y1, y];
166 | }
167 |
168 | if (x1 < x && y1 > y) {
169 | [x, y] = [x - width, y];
170 | [x1, y1] = [x1 + width, y1];
171 | }
172 |
173 | if (x1 > x && y1 < y) {
174 | [x, y] = [x, y - height];
175 | [x1, y1] = [x1, y1 + height];
176 | }
177 |
178 | ctx.fillStyle = lineColor;
179 | ctx.fillRect(
180 | x - lineWidth,
181 | y - lineWidth,
182 | width + lineWidth * 2,
183 | height + lineWidth * 2,
184 | );
185 | ctx.fillStyle = fillColor;
186 | ctx.fillRect(x, y, width, height);
187 |
188 | break;
189 | }
190 | case PenType.Circle: {
191 | const origin = path[0];
192 | const p = path[1];
193 | const offsetX = origin.x - p.x;
194 | const offsetY = origin.y - p.y;
195 | const radius = Math.sqrt(
196 | Math.abs(offsetX) ** 2 + Math.abs(offsetY) ** 2,
197 | );
198 | ctx.arc(origin.x, origin.y, radius, 0, 2 * Math.PI);
199 | ctx.fill();
200 | break;
201 | }
202 | }
203 | ctx.stroke();
204 | }
205 |
206 | private createDrawCommand(path: IPoint[]): IDrawCommand {
207 | const clone = (e: string) => JSON.parse(JSON.stringify({ str: e })).str;
208 |
209 | const type = this.store.drawType;
210 | const lineWidth = this.store.lineWidth;
211 | const lineColor = clone(this.store.lineColor);
212 | const fillColor = clone(this.store.fillColor);
213 |
214 | switch (type) {
215 | case PenType.Line: {
216 | return {
217 | type,
218 | path: [path[0], path[path.length - 1]],
219 | lineWidth,
220 | lineColor,
221 | fillColor,
222 | };
223 | }
224 | case PenType.Lines: {
225 | if (path.length === 1) {
226 | return {
227 | type: PenType.Point,
228 | path: [path[path.length - 1]],
229 | lineWidth,
230 | lineColor,
231 | fillColor,
232 | };
233 | }
234 | return { type, path, lineWidth, lineColor, fillColor };
235 | }
236 | case PenType.Rect: {
237 | return {
238 | type,
239 | path: [path[0], path[path.length - 1]],
240 | lineWidth,
241 | lineColor,
242 | fillColor,
243 | };
244 | }
245 | case PenType.Circle: {
246 | return {
247 | type,
248 | path: [path[0], path[path.length - 1]],
249 | lineWidth,
250 | lineColor,
251 | fillColor,
252 | };
253 | }
254 | default: {
255 | throw new Error("Cannot reach here");
256 | }
257 | }
258 | }
259 |
260 | private onMouseEnter(e: React.MouseEvent