質問編集履歴
1
エラー構文が出ないように修正するも動作せず
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -46,14 +46,14 @@
|
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
--追記--
|
|
50
|
+
|
|
51
|
+
お二人のアドバイスをいただきながらエラーが出ないように修正をしました。エラーは出なくなりましたし、穴が開くほど記述を見返しているのですが、マウス操作ではトリミングできるのにタッチ操作ではトリミングというか矩形生成ができません。解決へのヒントをいただけるとありがたいです。
|
|
52
|
+
|
|
53
|
+
以下修正済み記述
|
|
50
54
|
|
|
51
55
|
```javascript
|
|
52
56
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
57
|
var layer1 = document.getElementById("layer1");
|
|
58
58
|
|
|
59
59
|
var layer1Ctx = layer1.getContext("2d");
|
|
@@ -136,7 +136,7 @@
|
|
|
136
136
|
|
|
137
137
|
var size = {width: this.width * scale, height: this.height * scale};
|
|
138
138
|
|
|
139
|
-
|
|
139
|
+
|
|
140
140
|
|
|
141
141
|
resizeCanvas(size.width, size.height);
|
|
142
142
|
|
|
@@ -150,7 +150,7 @@
|
|
|
150
150
|
|
|
151
151
|
$("#upload_button").show();
|
|
152
152
|
|
|
153
|
-
|
|
153
|
+
|
|
154
154
|
|
|
155
155
|
// load file on base buffer
|
|
156
156
|
|
|
@@ -322,7 +322,7 @@
|
|
|
322
322
|
|
|
323
323
|
end.y = Math.max(begin_pos.y, end_pos.y);
|
|
324
324
|
|
|
325
|
-
|
|
325
|
+
|
|
326
326
|
|
|
327
327
|
highlightTrimmingArea(begin, end);
|
|
328
328
|
|
|
@@ -330,7 +330,7 @@
|
|
|
330
330
|
|
|
331
331
|
});
|
|
332
332
|
|
|
333
|
-
|
|
333
|
+
|
|
334
334
|
|
|
335
335
|
function getMousePos(e) {
|
|
336
336
|
|
|
@@ -344,7 +344,7 @@
|
|
|
344
344
|
|
|
345
345
|
}
|
|
346
346
|
|
|
347
|
-
|
|
347
|
+
|
|
348
348
|
|
|
349
349
|
function updateSelectArea(mouse_pos) {
|
|
350
350
|
|
|
@@ -428,7 +428,7 @@
|
|
|
428
428
|
|
|
429
429
|
end.y = Math.max(begin_pos.y, end_pos.y);
|
|
430
430
|
|
|
431
|
-
|
|
431
|
+
|
|
432
432
|
|
|
433
433
|
highlightTrimmingArea(begin, end);
|
|
434
434
|
|
|
@@ -436,39 +436,27 @@
|
|
|
436
436
|
|
|
437
437
|
});
|
|
438
438
|
|
|
439
|
-
|
|
439
|
+
|
|
440
440
|
|
|
441
441
|
function getTouchPos(e) {
|
|
442
442
|
|
|
443
|
-
document.getElementById( "upload_canvas" ).addEventListener( "touchstart", function( event ) {
|
|
444
|
-
|
|
445
|
-
var touchObject = event.changedTouches[0] ;
|
|
446
|
-
|
|
447
|
-
var touchX = touchObject.pageX ;
|
|
448
|
-
|
|
449
|
-
var touchY = touchObject.pageY ;
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
// 要素の位置を取得
|
|
454
|
-
|
|
455
|
-
|
|
443
|
+
var rect = display.getBoundingClientRect();
|
|
456
|
-
|
|
457
|
-
|
|
444
|
+
|
|
458
|
-
|
|
459
|
-
var positionY = clientRect.top + window.pageYOffset ;
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
445
|
+
return {
|
|
464
|
-
|
|
446
|
+
|
|
465
|
-
|
|
447
|
+
x : e.clientX - rect.left,
|
|
466
|
-
|
|
448
|
+
|
|
467
|
-
|
|
449
|
+
y : e.clientY - rect.top};
|
|
450
|
+
|
|
468
|
-
|
|
451
|
+
}
|
|
469
|
-
|
|
470
|
-
|
|
452
|
+
|
|
453
|
+
|
|
454
|
+
|
|
455
|
+
|
|
456
|
+
|
|
457
|
+
|
|
458
|
+
|
|
471
|
-
|
|
459
|
+
function updateSelectArea(touch_pos) {
|
|
472
460
|
|
|
473
461
|
clear(layer2);
|
|
474
462
|
|
|
@@ -488,11 +476,15 @@
|
|
|
488
476
|
|
|
489
477
|
}
|
|
490
478
|
|
|
479
|
+
|
|
480
|
+
|
|
481
|
+
|
|
482
|
+
|
|
491
483
|
//ここまでタッチ試行
|
|
492
484
|
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
485
|
+
|
|
486
|
+
|
|
487
|
+
|
|
496
488
|
|
|
497
489
|
function highlightTrimmingArea(begin, end) {
|
|
498
490
|
|
|
@@ -582,7 +574,7 @@
|
|
|
582
574
|
|
|
583
575
|
|
|
584
576
|
|
|
585
|
-
|
|
577
|
+
|
|
586
578
|
|
|
587
579
|
})
|
|
588
580
|
|