添加调试用项目

iamscottxu · Sep 9, 2020 · a956a6f · a956a6f
1 parent 292b2f0
commit a956a6f
Show file tree

Hide file tree

Showing 7 changed files with 539 additions and 0 deletions.
diff --git a/debug/contextmenu.js b/debug/contextmenu.js
@@ -0,0 +1,52 @@
+window.contextmenu = function (bindElement, contextmenuElement) {
+    let _getContextmenuState = function () {
+        return contextmenuElement.style.display != 'none';
+    }
+    /**
+     * 获取上下文菜单的状态
+     * @function
+     * @returns {boolean} 指示上下文菜单是否正处于激活/显示状态。
+     */
+    this.getContextmenuState = _getContextmenuState;
+    /**
+     * 关闭上下文菜单：如果当前上下文菜单正处于激活/显示状态则立即关闭。
+     */
+    this.closeContextmenu = () => {
+        if (_getContextmenuState()) {
+            contextmenuElement.style.display = 'none';
+        }
+    }
+
+    contextmenuElement.style.position = 'fixed';
+    contextmenuElement.style.display = 'none';
+    contextmenuElement.oncontextmenu = () => false;
+
+    let isParent = function(element, parentElement) {
+        do if (element === parentElement) return true;
+        while(document != (element = element.parentNode))
+        return false;
+    }
+
+    let _closeContextmenu = function (e) {
+        if (_getContextmenuState() && !isParent(e.target,contextmenuElement)) {
+            contextmenuElement.style.display = 'none';
+            if (e.type === 'click') e.stopPropagation();
+        }
+    }
+
+    window.addEventListener('click', _closeContextmenu, true);
+    window.addEventListener('contextmenu', _closeContextmenu, true);
+    window.addEventListener('scroll', _closeContextmenu, true);
+
+
+    bindElement.oncontextmenu = function (e) {
+        e.stopPropagation();
+        contextmenuElement.style.display = '';
+        let top = e.clientY, left = e.clientX;
+        if (top + contextmenuElement.clientHeight > document.documentElement.clientHeight) top -= contextmenuElement.clientHeight;
+        if (left + contextmenuElement.clientWidth > document.documentElement.clientWidth) left -= contextmenuElement.clientWidth;
+        contextmenuElement.style.top = `${top}px`;
+        contextmenuElement.style.left = `${left}px`;
+        return false;
+    }
+}
diff --git a/debug/images/background.jpg b/debug/images/background.jpg
diff --git a/debug/openBSEDemo.html b/debug/openBSEDemo.html
@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>openBSE Demo</title>
+    <link href="style.css" rel="stylesheet" type="text/css">
+    <script src="../dist/openBSE.all.js"></script>
+    <script src="stats.js"></script>
+    <script src="contextmenu.js"></script>
+    <script src="openBSEDemo.js"></script>
+</head>
+
+<body>
+    <p style="font-size: 70%">引擎版本：<b id="version"></b>&nbsp;构建时间：<b id="buildDate"></b></p>
+    <div class="stage" id="stage">
+        <div class="stage-el" id="BulletScreensDiv"></div>
+        <div class="debug-info" id="debug_info" style="display:none;">
+            <div class="close" id="debug_info_close">[x]</div>
+            <div class="text">Time: <b id="time"></b>ms</div>
+            <div class="text">Delay Bullet-Screen Count: <b id="delayBulletScreenCount"></b></div>
+            <div class="text">Buffer Bullet-Screen Count: <b id="bufferBulletScreenCount"></b></div>
+            <div class="chart" id="fps"></div>
+            <div class="chart" id="delay"></div>
+            <div class="chart" id="realTimeBulletScreenCount"></div>
+        </div>
+    </div>
+    <p><input type="text" style="width:500px;" id="BulletScreenText">&nbsp;<a href="javascript:void(0)"
+            onclick="sendBulletScreen();">发送</a></p>
+    <p>
+        渲染模式：
+        <form id="renderModes" onclick="setRenderModes();">
+            <input type="radio" value="canvas" name="renderModes">Canvas&nbsp;
+            <input type="radio" value="css3" name="renderModes">CSS3&nbsp;
+            <input type="radio" value="webgl" name="renderModes">WebGL&nbsp;
+            <input type="radio" value="svg" name="renderModes">SVG&nbsp;
+        </form>
+    </p>
+    <p>
+        隐藏弹幕：
+        <form id="hiddenTypes" onclick="sethiddenTypes();">
+            <input type="checkbox" value="1" name="hiddenTypes">普通&nbsp;
+            <input type="checkbox" value="2" name="hiddenTypes">逆向&nbsp;
+            <input type="checkbox" value="4" name="hiddenTypes">顶部&nbsp;
+            <input type="checkbox" value="8" name="hiddenTypes">底部&nbsp;
+        </form>
+    </p>
+    <p>上次单击的弹幕内容：<b id="clickText">无</b></p>
+    <a href="javascript:void(0)" onclick="generalEngine.play();">开始</a>&nbsp;<a href="javascript:void(0)" onclick="generalEngine.pause();">暂停</a>
+    &nbsp;<a href="javascript:void(0)"
+        onclick="generalEngine.stop();">停止</a>&nbsp;
+    <a href="javascript:void(0)" onclick="generalEngine.visibility = true;">显示弹幕</a>&nbsp;<a href="javascript:void(0)"
+        onclick="generalEngine.visibility = false;">隐藏弹幕</a>&nbsp;
+    <a href="javascript:void(0)" onclick="generalEngine.cleanBuffer();loadData(generalEngine);">重新加载弹幕</a>&nbsp;<a href="javascript:void(0)"
+        onclick="generalEngine.cleanScreen();">清空屏幕</a>&nbsp;<br>
+    <a href="javascript:void(0)" onclick="set('playSpeed', 1);">1倍速</a>&nbsp;<a href="javascript:void(0)" onclick="set('playSpeed', 1.5);">1.5倍数</a>&nbsp;
+    <a href="javascript:void(0)" onclick="set('playSpeed', 2);">2倍速</a>&nbsp;<a href="javascript:void(0)" onclick="set('playSpeed', 2.5);">2.5倍数</a>&nbsp;
+    <a href="javascript:void(0)" onclick="set('scaling', 1);">1倍缩放</a>&nbsp;<a href="javascript:void(0)" onclick="set('scaling', 1.5);">1.5倍缩放</a>&nbsp;
+    <a href="javascript:void(0)" onclick="set('scaling', 2);">2倍缩放</a>&nbsp;<a href="javascript:void(0)"
+        onclick="set('scaling', 0.75);">0.75倍缩放</a>&nbsp;<br>
+    <a href="javascript:void(0)" onclick="set('opacity', 0);">100%透明</a>&nbsp;<a href="javascript:void(0)" onclick="set('opacity', 0.25);">75%透明</a>&nbsp;
+    <a href="javascript:void(0)" onclick="set('opacity', 0.5);">50%透明</a>&nbsp;<a href="javascript:void(0)"
+        onclick="set('opacity', 0.75);">25%透明</a>&nbsp;
+    <a href="javascript:void(0)" onclick="set('opacity', 1);">不透明</a>
+    <div class="contextmenu" id="bullet_screen_contextmenu" style="display:none;">
+        <div class="item canselect">举报</div>
+        <div class="item canselect">举报并屏蔽</div>
+        <div class="item canselect">复制</div>
+    </div>
+    <div class="contextmenu" id="stage_contextmenu" style="display:none;">
+        <div class="item">openBSE v<b id="contextmenu_item_version"></b></div>
+        <div class="item canselect" id="contextmenu_item_debug_info">弹幕详细统计信息</div>
+    </div>
+</body>
+
+</html>
diff --git a/debug/openBSEDemo.js b/debug/openBSEDemo.js
@@ -0,0 +1,147 @@
+window.onload = function () {
+    window.renderMode = "canvas";
+    window.fpsStats = new stats("FPS", 55, 65, "#75F8FB", document.getElementById('fps'));
+    window.delayStats = new stats("Delay", 0, 10, "#7DEE3A", document.getElementById('delay'));
+    window.realTimeBulletScreenCountStats = new stats("Real Time Bullet-Screen Count", 0, 10, "#EA5798", document.getElementById('realTimeBulletScreenCount'));
+
+    var versionInfo = openBSE.getVersion();
+    document.getElementById("version").innerText = document.getElementById("contextmenu_item_version").innerText = versionInfo.version;
+    document.getElementById("buildDate").innerText = versionInfo.buildDate;
+
+    window.generalEngine = new openBSE.GeneralEngine(document.getElementById('BulletScreensDiv'), {
+        defaultStyle: {
+            fontFamily: '"Microsoft YaHei","PingFang SC",SimHei,"Heiti SC",sans-serif',
+            borderColor: 'rgba(0,0,0,0.4)',
+            fontWeight: 'normal',
+            shadowBlur: 4
+        }
+    }, getRenderMode());
+
+    setRenderModeRadioDefault();
+
+    var bulletScreenContextmenu = new openBSE.Contextmenu(generalEngine, document.getElementById('bullet_screen_contextmenu'));
+    var stageContextmenu = new contextmenu(document.getElementById('stage'), document.getElementById('stage_contextmenu'));
+
+    generalEngine.bind('click', function (e) {
+        document.getElementById("clickText").innerText = e.getBulletScreen().text;
+        e.setBulletScreen({
+            style: { color: 'red' },
+            layer: 2
+        }, true);
+    });
+
+
+
+    document.getElementById('contextmenu_item_debug_info').onclick = function(e) {
+        stageContextmenu.closeContextmenu();
+        var debugInfo = document.getElementById('debug_info');
+        if (debugInfo.style.display != 'none') return;
+        debugInfo.style.display = '';
+        fpsStats.reSize();fpsStats.clean();
+        delayStats.reSize();delayStats.clean();
+        realTimeBulletScreenCountStats.reSize();realTimeBulletScreenCountStats.clean();
+        setTimeout(showDebugInfo, 0);
+    }
+    document.getElementById('debug_info_close').onclick = function(e) {
+        document.getElementById('debug_info').style.display = 'none';
+    }
+
+    loadData();
+}
+
+function loadData() {
+    var _startTime = 1000;
+    for (var i = 0; i < 10000; i++) {
+        if (Math.random() > 0.6)
+            generalEngine.add({
+                text: "这是一个长长长长长长长长长长长长长长长长长长长长长长长长的测试(^_^)",
+                startTime: _startTime,
+                type: openBSE.GeneralType.rightToLeft,
+                style: {
+                    speed: 0.15 + Math.random() / 90,
+                    size: 23,
+                    color: 'white'
+                }
+            });
+        else
+            generalEngine.add({
+                text: "橘里橘气",
+                startTime: _startTime,
+                type: (Math.random() > 0.4) ? openBSE.GeneralType.rightToLeft : openBSE.GeneralType.top,
+                style: {
+                    speed: 0.1 + Math.random() / 90,
+                    color: '#FFCC66'
+                }
+            });
+        _startTime += Math.round(Math.random() * 500);
+    }
+}
+
+function showDebugInfo() {
+    var debugInfo = generalEngine.debugInfo;
+    document.getElementById("time").innerText = debugInfo.time.toFixed(2);
+    document.getElementById("bufferBulletScreenCount").innerText = debugInfo.bufferBulletScreenCount;
+    document.getElementById("delayBulletScreenCount").innerText = debugInfo.delayBulletScreenCount;
+    delayStats.update(debugInfo.delay, debugInfo.delay.toFixed(2) + 'ms');
+    fpsStats.update(debugInfo.fps, debugInfo.fps);
+    realTimeBulletScreenCountStats.update(debugInfo.realTimeBulletScreenCount, debugInfo.realTimeBulletScreenCount);
+    if (document.getElementById('debug_info').style.display != 'none') setTimeout(showDebugInfo, 100);
+}
+
+function sendBulletScreen() {
+    var bulletScreenText = document.getElementById("BulletScreenText").value;
+    document.getElementById("BulletScreenText").value = '';
+    generalEngine.add({
+        text: bulletScreenText,
+        style: {
+            boxColor: 'white'
+        },
+        layer: 1,
+        canDiscard: false
+    });
+}
+
+function sethiddenTypes() {
+    var formData = new FormData(document.getElementById("hiddenTypes"));
+    var hiddenTypesList = formData.getAll('hiddenTypes');
+    var hiddenTypes = 0;
+    for (var index in hiddenTypesList) hiddenTypes += parseInt(hiddenTypesList[index]);
+    generalEngine.options = {
+        hiddenTypes: hiddenTypes
+    };
+}
+
+function getRenderMode() {
+    switch (location.hash) {
+        case "#css3":
+            return "css3";
+        case "#webgl":
+            return "webgl";
+        case "#svg":
+            return "svg";
+        default:
+            return "canvas";
+    }
+}
+
+function setRenderModeRadioDefault() {
+    var renderMode = getRenderMode();
+    var radios = document.getElementById("renderModes");
+    for (var index = 0;index < radios.length; index++)
+    {
+        if(radios[index].value == renderMode)
+            radios[index].checked = "checked";
+    }    
+}
+
+function setRenderModes() {
+    var formData = new FormData(document.getElementById("renderModes"));
+    location.replace("#" + formData.get('renderModes'));
+    location.reload();
+}
+
+function set(key, value) {
+    var object = {};
+    object[key] = value;
+    generalEngine.options = object;
+}
diff --git a/debug/openBSESpecialDemo.html b/debug/openBSESpecialDemo.html
@@ -0,0 +1,97 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>弹幕引擎Demo</title>
+    <script src="//openbse.netlify.app/openbse.all.min.js"></script>
+    <script>
+        window.onload = function () {
+            var versionInfo = openBSE.getVersion();
+            document.getElementById("version").innerText = versionInfo.version;
+            document.getElementById("buildDate").innerText = versionInfo.buildDate;
+            window.specialEngine = new openBSE.SpecialEngine(document.getElementById('BulletScreensDiv'), {}, 'canvas');
+
+            loadData(specialEngine);
+            setInterval(showDebugInfo, 500);
+        }
+        var loadData = function (specialEngine) {
+            specialEngine.add({
+                text: '测试测试测试测试',
+                startTime: 1000,
+                endTime: 100000000,
+                renderCode: 'setStyle({transform: "translate(100px,100px)rotate(" + Math.floor(time / 10) % 360 + "deg)"});'
+            });
+            specialEngine.add({
+                text: '测试测试测试测试测试测试',
+                startTime: 1000,
+                endTime: 100000000,
+                renderCode: 'setStyle({transform: "translate(200px,200px)rotate(" + (360 - Math.floor(time / 10) % 360) + "deg)"});'
+            });
+            specialEngine.add({
+                text: '测试测试测试测',
+                startTime: 1000,
+                endTime: 100000000,
+                renderCode: 'setStyle({transform: "translate(300px,300px)rotate(" + (360 - Math.floor(time) % 360) + "deg)"});'
+            });
+            specialEngine.add({
+                text: '测试',
+                startTime: 1000,
+                endTime: 100000000,
+                renderCode: 'setStyle({text:"测试" + Math.floor(time / 500) % 500, transform: "translate(" + Math.floor(time / 10) % 500 + "px," + (500 - Math.floor(time / 100) % 500) + "px)"});'
+            });
+            specialEngine.add({
+                text: '测试',
+                startTime: 1000,
+                endTime: 100000000,
+                renderCode: 'setStyle({text:"测试" + Math.floor(time / 500) % 500, transform: "translate(" + (500 - Math.floor(time / 10) % 500) + "px," + Math.floor(time / 100) % 500 + "px)"});'
+            });
+            specialEngine.add({
+                text: 'AAAAAAAAAAAAAAAAAAAAAAAAAA',
+                startTime: 1000,
+                endTime: 100000000,
+                renderCode: 'setStyle({text: Math.floor(time / 1000) % 2 == 1 ? "AAAAAAAAAAAAAAAAAAAAAAAAAA" : "", transform: "translate(350px, 450px)"});'
+            });
+        }
+        var showDebugInfo = function () {
+            var debugInfo = specialEngine.debugInfo;
+            document.getElementById("time").innerText = debugInfo.time.toString();
+            document.getElementById("delay").innerText = debugInfo.delay.toString();
+            document.getElementById("fps").innerText = debugInfo.fps.toString();
+            document.getElementById("BulletScreensOnScreenCount").innerText = debugInfo.realTimeBulletScreenCount.toString();
+            document.getElementById("BulletScreensCount").innerText = debugInfo.bufferBulletScreenCount.toString();
+            document.getElementById("delayBulletScreensCount").innerText = debugInfo.delayBulletScreenCount.toString();
+        }
+        function set(key, value) {
+            var object = {};
+            object[key] = value;
+            specialEngine.options = object;
+        }
+    </script>
+</head>
+
+<body>
+    <p style="font-size: 70%">引擎版本：<b id="version"></b>&nbsp;构建时间：<b id="buildDate"></b></p>
+    <div style="width:936px;height:526.5px;position:relative;">
+        <div style="left:0;top:0;right:0;bottom:0;position:absolute;background:url(./images/background.jpg);background-size: 100%;"></div>
+        <div id="BulletScreensDiv" style="left:0;top:0;right:0;bottom:0;position:absolute;"></div>
+    </div>
+    <p>时间：<b id="time"></b> fps：<b id="fps"></b></p>
+    <p>实时弹幕数：<b id="BulletScreensOnScreenCount"></b>&nbsp;缓冲区弹幕数：<b id="BulletScreensCount"></b></p>
+    <p>延迟：<b id="delay"></b>ms 延迟丢弃丢弃弹幕数：<b id="delayBulletScreensCount"></b></p>
+    <a href="#" onclick="specialEngine.play();">开始</a>&nbsp;<a href="#" onclick="specialEngine.pause();">暂停</a>&nbsp;<a
+        href="#" onclick="specialEngine.stop();">停止</a>&nbsp;
+    <a href="#" onclick="specialEngine.visibility = true;">显示弹幕</a>&nbsp;<a href="#" onclick="specialEngine.visibility = false;">隐藏弹幕</a>&nbsp;
+    <a href="#" onclick="specialEngine.cleanBuffer();loadData(generalEngine);">重新加载弹幕</a>&nbsp;<a
+        href="#" onclick="specialEngine.cleanScreen();">清空屏幕</a>&nbsp;<br>
+    <a href="#" onclick="set('playSpeed', 1);">1倍速</a>&nbsp;<a href="#" onclick="set('playSpeed', 1.5);">1.5倍数</a>&nbsp;
+    <a href="#" onclick="set('playSpeed', 2);">2倍速</a>&nbsp;<a href="#" onclick="set('playSpeed', 2.5);">2.5倍数</a>&nbsp;
+    <a href="#" onclick="set('scaling', 1);">1倍缩放</a>&nbsp;<a href="#" onclick="set('scaling', 1.5);">1.5倍缩放</a>&nbsp;
+    <a href="#" onclick="set('scaling', 2);">2倍缩放</a>&nbsp;<a href="#" onclick="set('scaling', 0.75);">0.75倍缩放</a>&nbsp;<br>
+    <a href="#" onclick="set('opacity', 0);">100%透明</a>&nbsp;<a href="#" onclick="set('opacity', 0.25);">75%透明</a>&nbsp;
+    <a href="#" onclick="set('opacity', 0.5);">50%透明</a>&nbsp;<a href="#" onclick="set('opacity', 0.75);">25%透明</a>&nbsp;
+    <a href="#" onclick="set('opacity', 1);">不透明</a>
+    <div id="contextmenu" style="padding:3px;width:120px;height:19px;position:fixed;border:1px solid black;background:rgba(255, 255, 255, 0.9);font-size: 13px;display:none;cursor: default;">上下文菜单</div>
+</body>
+
+</html>