回答編集履歴
1
修正点に対するヒントを追加
test
CHANGED
|
@@ -13,3 +13,73 @@
|
|
|
13
13
|
NOTE:
|
|
14
14
|
|
|
15
15
|
この作業は苦痛この上ないので, 古くから「コピペはするな」とか「メソッドは短くしろ」とか「共通部分はまとめろ」とか言われているのです.
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
コード修正後の回答
|
|
22
|
+
|
|
23
|
+
NOTE:
|
|
24
|
+
|
|
25
|
+
筆者はタッチイベントを確認できる環境をもっていないので, 勝手ながらヒントの提示だけに留めさせていただきます.(ググればサンプルがたくさん出てくる筈)
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
`TouchEvent`オブジェクトは**マルチタッチ**をサポートするために`MouseEvent`オブジェクトと構成が全く異なります(`clientX/clientY`プロパティを持たない！)
|
|
30
|
+
|
|
31
|
+
そのため, 下記の部分でタッチ位置が取得できていないのです.
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
```JavaScript
|
|
36
|
+
|
|
37
|
+
$('#upload_canvas').on("touchend", function(e) {
|
|
38
|
+
|
|
39
|
+
is_down = false;
|
|
40
|
+
|
|
41
|
+
trimming_end_pos = getTouchPos(e);//←---TouchEventオブジェクトを直接渡している！
|
|
42
|
+
|
|
43
|
+
//以下略
|
|
44
|
+
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
function getTouchPos(e) {
|
|
50
|
+
|
|
51
|
+
var rect = display.getBoundingClientRect();
|
|
52
|
+
|
|
53
|
+
return {
|
|
54
|
+
|
|
55
|
+
x : e.clientX - rect.left,//←--e.clientXはundefined!
|
|
56
|
+
|
|
57
|
+
y : e.clientY - rect.top};//←--e.clientYもundefined!
|
|
58
|
+
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
ではどうすればよいのか？
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
`TouchEvent`オブジェクトの`touches/changedTouches`プロパティから一つ`Touch`オブジェクトを取得し, この`Touch`オブジェクトの`clinetX/clientY`値から座標を求めればよい(以降は`MouseEvent`版と同様)のです.
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
但し, `TouchEvent`から取得される`Touch`オブジェクトは**一つとは限らない**ため, 常に`Touch`オブジェクトの識別子(`identifier `プロパティ)の値から**現在追跡中のタッチ位置を検出するようにします**.
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
※そのためには, `touchstart`(タッチの記憶), `touchmove`(タッチの追跡), `touchend`/`touchcancel`(タッチの開放)イベントの全てで適切にタッチ位置の選択を行う必要があります.
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
参考
|
|
82
|
+
|
|
83
|
+
[https://developer.mozilla.org/ja/docs/Web/API/TouchEvent](https://developer.mozilla.org/ja/docs/Web/API/TouchEvent)
|
|
84
|
+
|
|
85
|
+
[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)
|