質問編集履歴
1
エラー構文が出ないように修正するも動作せず
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -22,10 +22,10 @@
|
|
|
22
22
|
<img src="#" id="i1"><br>
|
|
23
23
|
-->
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
--追記--
|
|
26
|
+
お二人のアドバイスをいただきながらエラーが出ないように修正をしました。エラーは出なくなりましたし、穴が開くほど記述を見返しているのですが、マウス操作ではトリミングできるのにタッチ操作ではトリミングというか矩形生成ができません。解決へのヒントをいただけるとありがたいです。
|
|
27
|
+
以下修正済み記述
|
|
26
28
|
```javascript
|
|
27
|
-
|
|
28
|
-
|
|
29
29
|
var layer1 = document.getElementById("layer1");
|
|
30
30
|
var layer1Ctx = layer1.getContext("2d");
|
|
31
31
|
|
|
@@ -67,14 +67,14 @@
|
|
|
67
67
|
var min_height = Math.min(this.height, max_canvas_size.height);
|
|
68
68
|
var scale = Math.min(min_width / this.width, min_height / this.height);
|
|
69
69
|
var size = {width: this.width * scale, height: this.height * scale};
|
|
70
|
-
|
|
70
|
+
|
|
71
71
|
resizeCanvas(size.width, size.height);
|
|
72
72
|
layer1Ctx.drawImage(image, 0, 0, size.width, size.height);
|
|
73
73
|
updateCanvas();
|
|
74
74
|
|
|
75
75
|
$("#upload_button").attr('filename', file.name);
|
|
76
76
|
$("#upload_button").show();
|
|
77
|
-
|
|
77
|
+
|
|
78
78
|
// load file on base buffer
|
|
79
79
|
base.width = this.width/3;
|
|
80
80
|
base.height = this.height/3;
|
|
@@ -160,18 +160,18 @@
|
|
|
160
160
|
begin.y = Math.min(begin_pos.y, end_pos.y);
|
|
161
161
|
end.x = Math.max(begin_pos.x, end_pos.x);
|
|
162
162
|
end.y = Math.max(begin_pos.y, end_pos.y);
|
|
163
|
-
|
|
163
|
+
|
|
164
164
|
highlightTrimmingArea(begin, end);
|
|
165
165
|
clip(begin, end);
|
|
166
166
|
});
|
|
167
|
-
|
|
167
|
+
|
|
168
168
|
function getMousePos(e) {
|
|
169
169
|
var rect = display.getBoundingClientRect();
|
|
170
170
|
return {
|
|
171
171
|
x: e.clientX - rect.left,
|
|
172
172
|
y: e.clientY - rect.top};
|
|
173
173
|
}
|
|
174
|
-
|
|
174
|
+
|
|
175
175
|
function updateSelectArea(mouse_pos) {
|
|
176
176
|
clear(layer2);
|
|
177
177
|
drawRect(layer2,
|
|
@@ -213,27 +213,21 @@
|
|
|
213
213
|
begin.y = Math.min(begin_pos.y, end_pos.y);
|
|
214
214
|
end.x = Math.max(begin_pos.x, end_pos.x);
|
|
215
215
|
end.y = Math.max(begin_pos.y, end_pos.y);
|
|
216
|
-
|
|
216
|
+
|
|
217
217
|
highlightTrimmingArea(begin, end);
|
|
218
218
|
clip(begin, end);
|
|
219
219
|
});
|
|
220
|
-
|
|
220
|
+
|
|
221
221
|
function getTouchPos(e) {
|
|
222
|
-
document.getElementById( "upload_canvas" ).addEventListener( "touchstart", function( event ) {
|
|
223
|
-
|
|
222
|
+
var rect = display.getBoundingClientRect();
|
|
223
|
+
return {
|
|
224
|
-
|
|
224
|
+
x : e.clientX - rect.left,
|
|
225
|
-
|
|
225
|
+
y : e.clientY - rect.top};
|
|
226
|
+
}
|
|
226
227
|
|
|
227
|
-
// 要素の位置を取得
|
|
228
|
-
var clientRect = this.getBoundingClientRect() ;
|
|
229
|
-
var positionX = clientRect.left + window.pageXOffset ;
|
|
230
|
-
var positionY = clientRect.top + window.pageYOffset ;
|
|
231
228
|
|
|
232
|
-
|
|
229
|
+
|
|
233
|
-
var x = touchX - positionX ;
|
|
234
|
-
var y = touchY - positionY ;
|
|
235
|
-
|
|
236
|
-
|
|
230
|
+
function updateSelectArea(touch_pos) {
|
|
237
231
|
clear(layer2);
|
|
238
232
|
drawRect(layer2,
|
|
239
233
|
trimming_begin_pos.x,
|
|
@@ -243,9 +237,11 @@
|
|
|
243
237
|
3, 'red');
|
|
244
238
|
updateCanvas();
|
|
245
239
|
}
|
|
240
|
+
|
|
241
|
+
|
|
246
242
|
//ここまでタッチ試行
|
|
247
|
-
|
|
248
|
-
|
|
243
|
+
|
|
244
|
+
|
|
249
245
|
function highlightTrimmingArea(begin, end) {
|
|
250
246
|
clear(layer2);
|
|
251
247
|
var fill = "rgba(0, 0, 0, 0.5)";
|
|
@@ -290,7 +286,7 @@
|
|
|
290
286
|
renderCtx.drawImage( base, x, y, width, height, 0, 0, width, height);
|
|
291
287
|
}
|
|
292
288
|
|
|
293
|
-
|
|
289
|
+
|
|
294
290
|
})
|
|
295
291
|
```
|
|
296
292
|
どうかよろしくお願いします。
|