回答編集履歴
1
修正点に対するヒントを追加
answer
CHANGED
|
@@ -5,4 +5,39 @@
|
|
|
5
5
|
この手の問題を解決する最も効率の良い方法は**問題のあるコードブロック全体を漫然と眺めるのではなく**, 1メソッドずつコードに追加していき**その都度文法エラーが存在しないかをコンソールで確認する**ことです. いかにJavaScriptエンジンの性能が向上したとは言え, 常に問題のある箇所を的確に指摘できるわけではありませんから, 結局は**人力で虱潰しに確認する必要がある**のです.
|
|
6
6
|
|
|
7
7
|
NOTE:
|
|
8
|
-
この作業は苦痛この上ないので, 古くから「コピペはするな」とか「メソッドは短くしろ」とか「共通部分はまとめろ」とか言われているのです.
|
|
8
|
+
この作業は苦痛この上ないので, 古くから「コピペはするな」とか「メソッドは短くしろ」とか「共通部分はまとめろ」とか言われているのです.
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
コード修正後の回答
|
|
12
|
+
NOTE:
|
|
13
|
+
筆者はタッチイベントを確認できる環境をもっていないので, 勝手ながらヒントの提示だけに留めさせていただきます.(ググればサンプルがたくさん出てくる筈)
|
|
14
|
+
|
|
15
|
+
`TouchEvent`オブジェクトは**マルチタッチ**をサポートするために`MouseEvent`オブジェクトと構成が全く異なります(`clientX/clientY`プロパティを持たない！)
|
|
16
|
+
そのため, 下記の部分でタッチ位置が取得できていないのです.
|
|
17
|
+
|
|
18
|
+
```JavaScript
|
|
19
|
+
$('#upload_canvas').on("touchend", function(e) {
|
|
20
|
+
is_down = false;
|
|
21
|
+
trimming_end_pos = getTouchPos(e);//←---TouchEventオブジェクトを直接渡している！
|
|
22
|
+
//以下略
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
function getTouchPos(e) {
|
|
26
|
+
var rect = display.getBoundingClientRect();
|
|
27
|
+
return {
|
|
28
|
+
x : e.clientX - rect.left,//←--e.clientXはundefined!
|
|
29
|
+
y : e.clientY - rect.top};//←--e.clientYもundefined!
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
ではどうすればよいのか？
|
|
34
|
+
|
|
35
|
+
`TouchEvent`オブジェクトの`touches/changedTouches`プロパティから一つ`Touch`オブジェクトを取得し, この`Touch`オブジェクトの`clinetX/clientY`値から座標を求めればよい(以降は`MouseEvent`版と同様)のです.
|
|
36
|
+
|
|
37
|
+
但し, `TouchEvent`から取得される`Touch`オブジェクトは**一つとは限らない**ため, 常に`Touch`オブジェクトの識別子(`identifier `プロパティ)の値から**現在追跡中のタッチ位置を検出するようにします**.
|
|
38
|
+
|
|
39
|
+
※そのためには, `touchstart`(タッチの記憶), `touchmove`(タッチの追跡), `touchend`/`touchcancel`(タッチの開放)イベントの全てで適切にタッチ位置の選択を行う必要があります.
|
|
40
|
+
|
|
41
|
+
参考
|
|
42
|
+
[https://developer.mozilla.org/ja/docs/Web/API/TouchEvent](https://developer.mozilla.org/ja/docs/Web/API/TouchEvent)
|
|
43
|
+
[https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Events/Touch_events#Example](https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Events/Touch_events#Example)
|