teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問JavaScript Canvas ポリゴン図形を線を繋げて作りたい

編集履歴

質問編集履歴

5

訂正

2020/03/02 07:04

投稿

bwrs1
bwrs1

スコア9

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  現在、Canvas APIを使用して
2
2
 
3
- ポリゴン図形を書きたいのですが
3
+ Google Map上にポリゴン図形を書きたいのですが
4
4
 
5
5
  方法が分からなくて困っています。
6
6
 
@@ -10,6 +10,18 @@
10
10
 
11
11
 
12
12
 
13
+ 今後、ポリゴン図形以外も
14
+
15
+ Canvas APIを使用して制作していくので
16
+
17
+ Canvas APIを使用した解決策を頂けたらと思います。
18
+
19
+
20
+
21
+ 宜しくお願いします。
22
+
23
+
24
+
13
25
 
14
26
 
15
27
  ### 該当のソースコード
@@ -268,4 +280,6 @@
268
280
 
269
281
  ### 試したこと
270
282
 
283
+ 現在
284
+
271
285
  直線,短形、円などの描画は出来ています。

4

誤字

2020/03/02 07:04

投稿

bwrs1
bwrs1

スコア9

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,8 @@
1
- 現在、Google map に Canvasで図形描画ができるプログラムを
1
+ 現在、Canvas APIを使用して
2
-
2
+
3
- 書いているんですが
3
+ ポリゴン図形を書きたいのですが
4
-
4
+
5
- ポリゴン図形が書けなくて困っています。
5
+ 方法が分からなくて困っています。
6
6
 
7
7
 
8
8
 
@@ -10,12 +10,6 @@
10
10
 
11
11
 
12
12
 
13
- Google Map API のPolyline class などは
14
-
15
- 使えません。
16
-
17
-
18
-
19
13
 
20
14
 
21
15
  ### 該当のソースコード

3

あ

2020/03/02 07:01

投稿

bwrs1
bwrs1

スコア9

test CHANGED
@@ -1 +1 @@
1
- （大至急）JavaScript Canvas ポリゴン図形を線を繋げて作りたい
1
+ JavaScript Canvas ポリゴン図形を線を繋げて作りたい
test CHANGED
File without changes

2

誤字

2020/03/02 06:37

投稿

bwrs1
bwrs1

スコア9

test CHANGED
@@ -1 +1 @@
1
- JavaScript Canvas ポリゴン図形を線を繋げて作りたい
1
+ （大至急）JavaScript Canvas ポリゴン図形を線を繋げて作りたい
test CHANGED
File without changes

1

誤字

2020/03/02 06:33

投稿

bwrs1
bwrs1

スコア9

test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
  ```ここに言語名を入力
26
26
 
27
- $('#' + this.shapeButtons.pori).click(function() { //ポリゴンの中身
27
+ $('#' + this.shapeButtons.pori).click(function() { //ポリゴンの中身
28
28
 
29
29
  self.createLayer().done(function(newLayer) {
30
30
 
@@ -40,25 +40,17 @@
40
40
 
41
41
  //配列
42
42
 
43
+ var Points = new Array();
44
+
45
+
46
+
47
+ //クリック判定
48
+
43
- var arr = [
49
+ var clickCount = 0;
44
-
45
- {no:1, x:}
50
+
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
- ]
51
+
58
-
59
-
60
-
52
+
61
- if (clickCount < 4) {
53
+ if (clickCount = 1) {
62
54
 
63
55
 
64
56
 
@@ -70,7 +62,7 @@
70
62
 
71
63
 
72
64
 
73
- isMouseDown = true;
65
+ isMouseDown = false;
74
66
 
75
67
 
76
68
 
@@ -88,11 +80,7 @@
88
80
 
89
81
 
90
82
 
91
-
92
-
93
-
94
-
95
- }, true);
83
+ }, { once: false });
96
84
 
97
85
 
98
86
 
@@ -122,7 +110,7 @@
122
110
 
123
111
 
124
112
 
125
- newLayer.context.clearRect(x, y, newLayer.canvas.width, newLayer.canvas.height);
113
+ newLayer.context.clearRect(x, y, newLayer.canvas.width, newLayer.canvas.height)
126
114
 
127
115
 
128
116
 
@@ -130,10 +118,6 @@
130
118
 
131
119
 
132
120
 
133
- newLayer.context.moveTo(x, y);
134
-
135
-
136
-
137
121
  newLayer.context.lineTo(ux, uy);
138
122
 
139
123
 
@@ -150,7 +134,7 @@
150
134
 
151
135
  }
152
136
 
153
- }, true);
137
+ }, { once: false });
154
138
 
155
139
 
156
140
 
@@ -182,9 +166,39 @@
182
166
 
183
167
 
184
168
 
169
+
170
+
171
+ newLayer.context.moveTo(x, y);
172
+
173
+
174
+
175
+ newLayer.context.lineTo(ux, uy);
176
+
177
+
178
+
179
+ newLayer.context.closePath();
180
+
181
+
182
+
183
+ newLayer.context.strokeStyle = "red";
184
+
185
+
186
+
187
+ newLayer.context.lineWidth = 5;
188
+
189
+
190
+
191
+ newLayer.context.stroke();
192
+
193
+
194
+
195
+
196
+
185
- newLayer.context.clearRect(x, y, newLayer.canvas.width, newLayer.canvas.height);
197
+ newLayer.context.fillStyle = "rgba(50,0,0,0.8)";
198
+
199
+
200
+
186
-
201
+ newLayer.context.fill();
187
-
188
202
 
189
203
 
190
204
 
@@ -196,24 +210,50 @@
196
210
 
197
211
  */
198
212
 
199
- }, false);
213
+ }, { once: false });
200
-
201
-
202
-
214
+
215
+
216
+
203
- /*----------------------------------------------------------------------*/
217
+ /*----------------------------------------------------------------------*/
218
+
219
+
220
+
221
+ newLayer.canvas.addEventListener('mousedown', e => { //マウスダウン
222
+
223
+
224
+
225
+ isMouseDown = false;
226
+
227
+
228
+
229
+ self.map.setOptions({ draggable: false });
230
+
231
+ var rect = e.target.getBoundingClientRect();
232
+
233
+ x = e.clientX - rect.left;
234
+
235
+ y = e.clientY - rect.top;
236
+
237
+
238
+
239
+ console.log('mousedown x:' + x + ' y:' + y);
240
+
241
+
242
+
243
+ Points.add(x, y);
244
+
245
+
246
+
247
+ }, { once: false });
248
+
249
+
250
+
251
+
204
252
 
205
253
  }
206
254
 
207
255
 
208
256
 
209
- newLayer.context.clearRect(x, y, newLayer.canvas.width, newLayer.canvas.height);
210
-
211
-
212
-
213
- newLayer.context.beginPath();
214
-
215
-
216
-
217
257
  newLayer.context.fillStyle = "rgba(50,0,0,0.8)";
218
258
 
219
259