teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問canvasを使用し、複数の画像をドラッグ＆ドロップで自由に配置した後に保存したい

編集履歴

質問編集履歴

3

コードの修正

2019/04/03 05:32

投稿

asr1919
asr1919

スコア16

test CHANGED
File without changes
test CHANGED
@@ -45,54 +45,6 @@
45
45
  ```javascript
46
46
 
47
47
 
48
-
49
- const canvas = document.createElement('canvas');
50
-
51
- const ctx = canvas.getContext('2d');
52
-
53
- const img = new Image();
54
-
55
-
56
-
57
- /** ドラッグで移動 */
58
-
59
- // ドラッグ状態かどうか
60
-
61
- let isDragging = false;
62
-
63
- // ドラッグ開始位置
64
-
65
- let start = {
66
-
67
- x: 0,
68
-
69
- y: 0
70
-
71
- };
72
-
73
- // ドラッグ中の位置
74
-
75
- let diff = {
76
-
77
- x: 0,
78
-
79
- y: 0
80
-
81
- };
82
-
83
- // ドラッグ終了後の位置
84
-
85
- let end = {
86
-
87
- x: 0,
88
-
89
- y: 0
90
-
91
- }
92
-
93
-
94
-
95
- function OnButtonClick() {
96
48
 
97
49
  const canvas = document.createElement('canvas');
98
50
 

2

htmlのコードとjavascriptコード部分を追加・変更してIEでも動くようにした

2019/04/03 05:32

投稿

asr1919
asr1919

スコア16

test CHANGED
File without changes
test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
  ### 発生している問題
24
24
 
25
- ・「試したこと」で記載したサイトの「Step3: 画像をドラッグで移動させる」の以下のコード部分を、画像一つ一つに定義する必要があるのか。その他もっと簡単にできる方法があれば知りたい。
25
+ ・「試したこと」で記載したサイトの「Step3: 画像をドラッグで移動させる」の以下のjavascriptコード部分を、画像一つ一つに定義する必要があるのか。その他もっと簡単にできる方法があれば知りたい。
26
26
 
27
27
 
28
28
 
@@ -30,10 +30,30 @@
30
30
 
31
31
 
32
32
 
33
+ ```html
34
+
35
+ <div id="image">
36
+
37
+ </div>
38
+
39
+ <input type="button" value="canvasを表示" onclick="OnButtonClick();" />
40
+
41
+ ```
42
+
43
+
44
+
33
45
  ```javascript
34
46
 
35
47
 
36
48
 
49
+ const canvas = document.createElement('canvas');
50
+
51
+ const ctx = canvas.getContext('2d');
52
+
53
+ const img = new Image();
54
+
55
+
56
+
37
57
  /** ドラッグで移動 */
38
58
 
39
59
  // ドラッグ状態かどうか
@@ -44,9 +64,9 @@
44
64
 
45
65
  let start = {
46
66
 
47
- x: 0,
67
+ x: 0,
48
-
68
+
49
- y: 0
69
+ y: 0
50
70
 
51
71
  };
52
72
 
@@ -54,9 +74,9 @@
54
74
 
55
75
  let diff = {
56
76
 
57
- x: 0,
77
+ x: 0,
58
-
78
+
59
- y: 0
79
+ y: 0
60
80
 
61
81
  };
62
82
 
@@ -64,51 +84,137 @@
64
84
 
65
85
  let end = {
66
86
 
67
- x: 0,
68
-
69
- y: 0
70
-
71
- }
72
-
73
- const redraw = () => {
74
-
75
- ctx.clearRect(0, 0, canvas.width, canvas.height);
76
-
77
- ctx.drawImage(img, diff.x, diff.y)
78
-
79
- };
80
-
81
- canvas.addEventListener('mousedown', event => {
82
-
83
- isDragging = true;
84
-
85
- start.x = event.clientX;
86
-
87
- start.y = event.clientY;
88
-
89
- });
90
-
91
- canvas.addEventListener('mousemove', event => {
92
-
93
- if (isDragging) {
94
-
95
- diff.x = (event.clientX - start.x) + end.x;
96
-
97
- diff.y = (event.clientY - start.y) + end.y;
98
-
99
- redraw();
100
-
101
- }
102
-
103
- });
104
-
105
- canvas.addEventListener('mouseup', event => {
106
-
107
- isDragging = false;
108
-
109
- end.x = diff.x;
110
-
111
- end.y = diff.y;
87
+ x: 0,
88
+
89
+ y: 0
90
+
91
+ }
92
+
93
+
94
+
95
+ function OnButtonClick() {
96
+
97
+ const canvas = document.createElement('canvas');
98
+
99
+ const ctx = canvas.getContext('2d');
100
+
101
+ const img = new Image();
102
+
103
+
104
+
105
+ /** ドラッグで移動 */
106
+
107
+ // ドラッグ状態かどうか
108
+
109
+ let isDragging = false;
110
+
111
+ // ドラッグ開始位置
112
+
113
+ let start = {
114
+
115
+ x: 0,
116
+
117
+ y: 0
118
+
119
+ };
120
+
121
+ // ドラッグ中の位置
122
+
123
+ let diff = {
124
+
125
+ x: 0,
126
+
127
+ y: 0
128
+
129
+ };
130
+
131
+ // ドラッグ終了後の位置
132
+
133
+ let end = {
134
+
135
+ x: 0,
136
+
137
+ y: 0
138
+
139
+ }
140
+
141
+
142
+
143
+ function OnButtonClick() {
144
+
145
+ document.getElementById('image').appendChild(canvas);
146
+
147
+
148
+
149
+ img.src = 'img/sample_3.png';　//任意の画像
150
+
151
+ img.crossOrigin = 'anonymous';
152
+
153
+
154
+
155
+ // Canvasを画像のサイズに合わせる
156
+
157
+ canvas.height = 1000; //任意の高さ
158
+
159
+ canvas.width = 1000; //任意の幅
160
+
161
+
162
+
163
+ // Canvasに描画する
164
+
165
+ ctx.drawImage(img, 0, 0);
166
+
167
+
168
+
169
+ canvas.addEventListener("mousedown", function(e){
170
+
171
+ isDragging = true;
172
+
173
+ start.x = event.clientX;
174
+
175
+ start.y = event.clientY;
176
+
177
+ });
178
+
179
+
180
+
181
+ canvas.addEventListener("mousemove", function(e){
182
+
183
+ if (isDragging) {
184
+
185
+ diff.x = (event.clientX - start.x) + end.x;
186
+
187
+ diff.y = (event.clientY - start.y) + end.y;
188
+
189
+ redraw();
190
+
191
+ }
192
+
193
+ });
194
+
195
+
196
+
197
+ canvas.addEventListener("mouseup", function(e){
198
+
199
+ isDragging = false;
200
+
201
+ end.x = diff.x;
202
+
203
+ end.y = diff.y;
204
+
205
+ });
206
+
207
+ }
208
+
209
+
210
+
211
+ function redraw() {
212
+
213
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
214
+
215
+ ctx.drawImage(img, diff.x, diff.y)
216
+
217
+ }
112
218
 
113
219
 
114
220
 

1

対応させたいブラウザを記載

2019/04/03 05:30

投稿

asr1919
asr1919

スコア16

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,6 @@
1
1
  ### 前提・実現したいこと
2
+
3
+ ブラウザ：IE、chrome
2
4
 
3
5
  html5のcanvasを使い、複数の画像をcanvasに配置してドラッグ＆ドロップで自由に配置した後、画像として保存したいです。
4
6
 
@@ -14,13 +16,17 @@
14
16
 
15
17
  ### 試したこと
16
18
 
17
- この[サイト](https://kuroeveryday.blogspot.com/2017/09/zoom-in-out-and-drag-to-move-on-canvas.html)の「Step3: 画像をドラッグで移動させる」を参考にし、ひとつの画像をドラッグ＆ドロップして自由に配置することはできました。
19
+ この[サイト](https://kuroeveryday.blogspot.com/2017/09/zoom-in-out-and-drag-to-move-on-canvas.html)の「Step3: 画像をドラッグで移動させる」を参考にし、ひとつの画像をドラッグ＆ドロップして自由に配置することはできました。(chromeのみ)
18
20
 
19
21
 
20
22
 
21
23
  ### 発生している問題
22
24
 
23
25
  ・「試したこと」で記載したサイトの「Step3: 画像をドラッグで移動させる」の以下のコード部分を、画像一つ一つに定義する必要があるのか。その他もっと簡単にできる方法があれば知りたい。
26
+
27
+
28
+
29
+ ・IEでも動かせるようにしたい。
24
30
 
25
31
 
26
32