作者: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的建議做法