質問編集履歴
6
修正：タイトル
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
[Chart.js][JavaScript] 再生バーとカーソルの連動：再生バー動かしたらグラフ項目上のカーソルを移動させたい
|
test
CHANGED
|
File without changes
|
5
修正：実現したい内容
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[Chart.js][JavaScript] 再生バーとカーソルの連動：再生バー動かしたらグラフ項目上のカーソルを移動させたい
|
|
1
|
+
jい[Chart.js][JavaScript] 再生バーとカーソルの連動：再生バー動かしたらグラフ項目上のカーソルを移動させたい
|
test
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
|
|
17
17
|
# 実現したいこと
|
|
18
18
|
|
|
19
|
-
-
|
|
19
|
+
- プレーヤーシークバーの移動（再生ボタン押下、シークバードラッグなど）に応じてグラフ頂点のカーソルを連動させたい
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
|
4
追加：seekingイベントの処理ハンドラ
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -52,7 +52,13 @@
|
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
|
|
55
|
-
このうち現在再生時間（currentTime）、全体再生時間（duration）、グラフの順番（index）は取得できました。対象グラフ項目の高さもそれらしい（element.height）のを取得できましたが、それ以降の工程、つまり対象グラフ項目のトップにカーソルを描画するロジックが自分の力ではなかなか思いつきません。皆様のご協力をお待ちしております。
|
|
55
|
+
このうち現在再生時間（currentTime）、全体再生時間（duration）、グラフの順番（index）は取得できました。対象グラフ項目の高さもそれらしい（element.height）のを取得できましたが、それ以降の工程、つまり対象グラフ項目のトップにカーソルを描画するロジックが自分の力だけではなかなか思いつきません。皆様のご協力をお待ちしております。
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
追記：
|
|
60
|
+
|
|
61
|
+
2021.10.12 videoタグ仕様を見るとseekingイベントというのがあるので、ここでseekingイベントハンドラを記載し、そこでdrawCursor関数と同様の処理を書けばいいのではと考えていますがいかがでしょうか。
|
|
56
62
|
|
|
57
63
|
|
|
58
64
|
|
|
@@ -398,10 +404,12 @@
|
|
|
398
404
|
|
|
399
405
|
console.log(e);
|
|
400
406
|
|
|
401
|
-
|
|
402
|
-
|
|
403
407
|
});
|
|
404
408
|
|
|
409
|
+
video_.addEventListener("seeking", (e) => {
|
|
410
|
+
|
|
411
|
+
var currentTime_ = video_.currentTime;
|
|
412
|
+
|
|
405
413
|
}
|
|
406
414
|
|
|
407
415
|
</script>
|
3
追加：前回質問アドバイス
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -40,6 +40,18 @@
|
|
|
40
40
|
|
|
41
41
|
|
|
42
42
|
|
|
43
|
+
また前回の質問でも回答者様より以下の助言いただきました。
|
|
44
|
+
|
|
45
|
+
> ・Barチャートの各要素の高さを取得する方法
|
|
46
|
+
|
|
47
|
+
・リスト特定のindexの要素のBarの頂点位置にカーソルを描画／更新する方法 または
|
|
48
|
+
|
|
49
|
+
・特定の要素のツールチップ位置にカーソルを固定表示する方法
|
|
50
|
+
|
|
51
|
+
が必要になりそうです。
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
43
55
|
このうち現在再生時間（currentTime）、全体再生時間（duration）、グラフの順番（index）は取得できました。対象グラフ項目の高さもそれらしい（element.height）のを取得できましたが、それ以降の工程、つまり対象グラフ項目のトップにカーソルを描画するロジックが自分の力ではなかなか思いつきません。皆様のご協力をお待ちしております。
|
|
44
56
|
|
|
45
57
|
|
2
追記：参考質問内容
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -8,6 +8,10 @@
|
|
|
8
8
|
|
|
9
9
|
https://teratail.com/questions/360753
|
|
10
10
|
|
|
11
|
+
- [Chart.js][JavaScript] グラフ部分をクリックして対応の再生位置に遷移させたい、再生バー動かしたらカーソルも移動させたい
|
|
12
|
+
|
|
13
|
+
https://teratail.com/questions/361574
|
|
14
|
+
|
|
11
15
|
|
|
12
16
|
|
|
13
17
|
# 実現したいこと
|
1
追記：取得項目詳細
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
|
|
39
|
-
このうち現在再生時間、全体再生時間、グラフの順番は取得できました。対象グラフ項目の高さもそれらしいのを取得できましたが、それ以降の工程、つまり対象グラフ項目のトップにカーソルを描画するロジックが自分の力ではなかなか思いつきません。皆様のご協力をお待ちしております。
|
|
39
|
+
このうち現在再生時間（currentTime）、全体再生時間（duration）、グラフの順番（index）は取得できました。対象グラフ項目の高さもそれらしい（element.height）のを取得できましたが、それ以降の工程、つまり対象グラフ項目のトップにカーソルを描画するロジックが自分の力ではなかなか思いつきません。皆様のご協力をお待ちしております。
|
|
40
40
|
|
|
41
41
|
|
|
42
42
|
|