作者:hbl91707(深海異音)
發錯了,請看下個回覆
新增HiDPI適配
主要就是把Canvas尺寸放大window.devicePixelRatio倍
但是在Safari上有預放大問題
所以再根據Safari預放大倍率ctx.webkitBackingStorePixelRatio縮小
文字處理也會相應放大縮小其位置及大小
然後用CSS定位其在頁面的大小
令其在頁面的大小不變
這樣在HiDPI下不會因為放大而模糊
修正透明度Range拖動無效的bug
發現用Object.defineProperty();設定getter/setter會令被設定的Range拖動無效
所以還是用回傳統的input和change事件處理
找Class name DanmuOpacityRange能找完所有透明度Range
再用for迴圈把所有Range都加上input和change事件
這樣無論那條Range拖動都會觸發fun_set_opacity();
優化腳本的運行邏輯
把一些用
setTimeout();檢查的地方改為觸發執行減少CPU無意義空轉的情況
由於找不到你的Github所以只能把修改後腳本放上來
請自行用WinMerge等軟件檢查修改處
請在這裡下載修改後腳本
主要是修改三處用
setTimeout();的地方第一是改用
MutationObserver檢查document.getElementsByClassName("vjs-danmu")[0]存在只有在DOM變化時才會檢查
當
document.getElementsByClassName("vjs-danmu")[0]存在並執行了fun_creat_canvas();後便會移除MutationObserver檢查項第二是改用
ResizeObserver檢查document.getElementsByClassName("vjs-danmu")[0]的大小改用
Object.defineProperty();設定getter/setter函數去檢查document.getElementsByClassName("DanmuOpacityRange")[0].value的值因為分開檢查
執行函數也拆分為
fun_auto_size();和fun_set_opacity();但由於
ResizeObserver是比較新的函數只有Chrome 64+才支持
在不能用
ResizeObserver時會改回setInterval();定時檢查第三是改用
requestAnimationFrame();取代fun_div_to_canvas();中的setTimeout();令執行周期配合螢幕的fps
也是Chrome的建議做法