@xpadev-net/niconicomments 0.1.7 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle.js +29 -7
- package/package.json +1 -1
package/dist/bundle.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
niconicomments.js v0.1.
|
|
2
|
+
niconicomments.js v0.1.8
|
|
3
3
|
(c) 2021 xpadev-net https://xpadevn.et
|
|
4
4
|
Released under the MIT License.
|
|
5
5
|
*/
|
|
@@ -14,10 +14,13 @@
|
|
|
14
14
|
* NiconiComments Constructor
|
|
15
15
|
* @param {HTMLCanvasElement} canvas - 描画対象のキャンバス
|
|
16
16
|
* @param {[]} data - 描画用のコメント
|
|
17
|
-
* @param {boolean}
|
|
18
|
-
* @param {boolean} formatted - dataが独自フォーマットに変換されているか
|
|
17
|
+
* @param {{useLegacy: boolean, formatted: boolean, video: HTMLVideoElement|null}} options - 細かい設定類
|
|
19
18
|
*/
|
|
20
|
-
constructor(canvas, data,
|
|
19
|
+
constructor(canvas, data, options = {
|
|
20
|
+
useLegacy: false,
|
|
21
|
+
formatted: false,
|
|
22
|
+
video: null
|
|
23
|
+
}) {
|
|
21
24
|
this.canvas = canvas;
|
|
22
25
|
this.context = canvas.getContext("2d");
|
|
23
26
|
this.context.strokeStyle = "rgba(0,0,0,0.7)";
|
|
@@ -25,7 +28,7 @@
|
|
|
25
28
|
this.context.textBaseline = "top";
|
|
26
29
|
this.context.lineWidth = 4;
|
|
27
30
|
|
|
28
|
-
if (useLegacy) {
|
|
31
|
+
if (options.useLegacy) {
|
|
29
32
|
this.commentYOffset = 0.25;
|
|
30
33
|
} else {
|
|
31
34
|
this.commentYOffset = 0.2;
|
|
@@ -68,12 +71,13 @@
|
|
|
68
71
|
}
|
|
69
72
|
};
|
|
70
73
|
|
|
71
|
-
if (formatted) {
|
|
74
|
+
if (options.formatted) {
|
|
72
75
|
this.data = data;
|
|
73
76
|
} else {
|
|
74
77
|
this.data = this.parseData(data);
|
|
75
78
|
}
|
|
76
79
|
|
|
80
|
+
this.video = options.video ? options.video : null;
|
|
77
81
|
this.showCollision = false;
|
|
78
82
|
this.showFPS = false;
|
|
79
83
|
this.showCommentCount = false;
|
|
@@ -86,7 +90,7 @@
|
|
|
86
90
|
this.collision_left = {};
|
|
87
91
|
this.collision_ue = {};
|
|
88
92
|
this.collision_shita = {};
|
|
89
|
-
this.useLegacy = useLegacy;
|
|
93
|
+
this.useLegacy = options.useLegacy;
|
|
90
94
|
this.preRendering();
|
|
91
95
|
this.fpsCount = 0;
|
|
92
96
|
this.fps = 0;
|
|
@@ -885,6 +889,24 @@
|
|
|
885
889
|
this.fpsCount++;
|
|
886
890
|
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
887
891
|
|
|
892
|
+
if (this.video) {
|
|
893
|
+
let offsetX,
|
|
894
|
+
offsetY,
|
|
895
|
+
scale,
|
|
896
|
+
height = this.canvas.height / this.video.videoHeight,
|
|
897
|
+
width = this.canvas.width / this.video.videoWidth;
|
|
898
|
+
|
|
899
|
+
if (height > width) {
|
|
900
|
+
scale = width;
|
|
901
|
+
} else {
|
|
902
|
+
scale = height;
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
offsetX = (this.canvas.width - this.video.videoWidth * scale) * 0.5;
|
|
906
|
+
offsetY = (this.canvas.height - this.video.videoHeight * scale) * 0.5;
|
|
907
|
+
this.context.drawImage(this.video, offsetX, offsetY, this.video.videoWidth * scale, this.video.videoHeight * scale);
|
|
908
|
+
}
|
|
909
|
+
|
|
888
910
|
if (this.timeline[vpos]) {
|
|
889
911
|
for (let index in this.timeline[vpos]) {
|
|
890
912
|
let comment = this.data[this.timeline[vpos][index]];
|
package/package.json
CHANGED