From 5d0abf5ac9f06c3a4e1a7e4fca816e027110f19d Mon Sep 17 00:00:00 2001 From: Miao_Spring <539943419@qq.com> Date: Mon, 31 Mar 2025 17:13:51 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0FPS=E6=8F=92=E4=BB=B6?= =?UTF-8?q?=EF=BC=8C=E6=98=BE=E7=A4=BA=E5=B8=A7=E7=8E=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugins/fps/export_hide.ts | 25 ++++++++++++++ src/plugins/fps/export_show.ts | 24 ++++++++++++++ src/plugins/fps/hideFps.ts | 18 ++++++++++ src/plugins/fps/hideFpsExport.ts | 25 ++++++++++++++ src/plugins/fps/index.ts | 5 +++ src/plugins/fps/shared.ts | 14 ++++++++ src/plugins/fps/showFps.ts | 57 ++++++++++++++++++++++++++++++++ 7 files changed, 168 insertions(+) create mode 100644 src/plugins/fps/export_hide.ts create mode 100644 src/plugins/fps/export_show.ts create mode 100644 src/plugins/fps/hideFps.ts create mode 100644 src/plugins/fps/hideFpsExport.ts create mode 100644 src/plugins/fps/index.ts create mode 100644 src/plugins/fps/shared.ts create mode 100644 src/plugins/fps/showFps.ts diff --git a/src/plugins/fps/export_hide.ts b/src/plugins/fps/export_hide.ts new file mode 100644 index 0000000..1a9ad58 --- /dev/null +++ b/src/plugins/fps/export_hide.ts @@ -0,0 +1,25 @@ +import { Plugin, PluginGroup } from '@/class/PluginCenter' +import hideFps from './hideFps' +import { EyeOffOutline } from '@vicons/ionicons5' +import { PluginExportType } from '@/types/type' +import { shallowRef } from 'vue' +import { fpsElement } from './shared' + +const pluginConfig: Plugin = { + name: '隐藏FPS', + icon: shallowRef(EyeOffOutline), + filter: () => { + // 只有当FPS显示元素存在时才显示此按钮 + return fpsElement.value !== null + }, + disable: false, + group: [PluginGroup.mainMenu], + func: hideFps, + priority: 0 +} + +export default pluginConfig + +export const type = PluginExportType.default + +export const key = 'hideFps' \ No newline at end of file diff --git a/src/plugins/fps/export_show.ts b/src/plugins/fps/export_show.ts new file mode 100644 index 0000000..dc6b9e1 --- /dev/null +++ b/src/plugins/fps/export_show.ts @@ -0,0 +1,24 @@ +import { Plugin, PluginGroup } from '@/class/PluginCenter' +import showFps from './showFps' +import { SpeedometerOutline } from '@vicons/ionicons5' +import { PluginExportType } from '@/types/type' +import { shallowRef } from 'vue' +import { fpsElement } from './shared' + +const pluginConfig: Plugin = { + name: '显示FPS', + icon: shallowRef(SpeedometerOutline), + filter: () => { + return fpsElement.value === null + }, + disable: false, + group: [PluginGroup.mainMenu], + func: showFps, + priority: 0 +} + +export default pluginConfig + +export const type = PluginExportType.default + +export const key = 'showFps' \ No newline at end of file diff --git a/src/plugins/fps/hideFps.ts b/src/plugins/fps/hideFps.ts new file mode 100644 index 0000000..fc7c307 --- /dev/null +++ b/src/plugins/fps/hideFps.ts @@ -0,0 +1,18 @@ +// 引入共享变量 +import { fpsElement, animationFrameId, setFpsElement, setAnimationFrameId } from '../fps/shared'; + +const hideFps = () => { + // 停止帧率计算 + if (animationFrameId.value !== null) { + cancelAnimationFrame(animationFrameId.value); + setAnimationFrameId(null); + } + + // 移除FPS显示元素 + if (fpsElement.value) { + document.body.removeChild(fpsElement.value); + setFpsElement(null); + } +}; + +export default hideFps; \ No newline at end of file diff --git a/src/plugins/fps/hideFpsExport.ts b/src/plugins/fps/hideFpsExport.ts new file mode 100644 index 0000000..e66148e --- /dev/null +++ b/src/plugins/fps/hideFpsExport.ts @@ -0,0 +1,25 @@ +import { Plugin, PluginGroup } from '@/class/PluginCenter' +import hideFps from './hideFps' +import { EyeOffOutline } from '@vicons/ionicons5' +import { PluginExportType } from '@/types/type' +import { shallowRef } from 'vue' +import { fpsElement } from '../fps/shared' + +const pluginConfig: Plugin = { + name: '隐藏FPS', + icon: shallowRef(EyeOffOutline), + filter: () => { + // 只有当FPS显示元素存在时才显示此按钮 + return fpsElement.value !== null + }, + disable: false, + group: [PluginGroup.mainMenu], + func: hideFps, + priority: 0 +} + +export default pluginConfig + +export const type = PluginExportType.default + +export const key = 'hideFps' \ No newline at end of file diff --git a/src/plugins/fps/index.ts b/src/plugins/fps/index.ts new file mode 100644 index 0000000..f82873d --- /dev/null +++ b/src/plugins/fps/index.ts @@ -0,0 +1,5 @@ +export * from './shared'; +export { default as showFps } from './showFps'; +export { default as hideFps } from './hideFps'; +export { default as showFpsPlugin } from './export_show'; +export { default as hideFpsPlugin } from './export_hide'; \ No newline at end of file diff --git a/src/plugins/fps/shared.ts b/src/plugins/fps/shared.ts new file mode 100644 index 0000000..0ee3092 --- /dev/null +++ b/src/plugins/fps/shared.ts @@ -0,0 +1,14 @@ +import { shallowRef } from 'vue'; + +// 使用shallowRef包装状态 +export const fpsElement = shallowRef(null); +export const animationFrameId = shallowRef(null); + +// 更新设置函数 +export const setFpsElement = (el: HTMLDivElement | null) => { + fpsElement.value = el; +}; + +export const setAnimationFrameId = (id: number | null) => { + animationFrameId.value = id; +}; \ No newline at end of file diff --git a/src/plugins/fps/showFps.ts b/src/plugins/fps/showFps.ts new file mode 100644 index 0000000..8880cae --- /dev/null +++ b/src/plugins/fps/showFps.ts @@ -0,0 +1,57 @@ +import { fpsElement, setFpsElement, setAnimationFrameId } from '../fps/shared'; + +// const frameArr = new Array(0) +let lastTime: number = 0 + +const createFpsElement = () => { + const el = document.createElement('div'); + el.style.position = 'fixed'; + el.style.top = '10px'; + el.style.left = '10px'; + el.style.backgroundColor = 'rgba(255, 255, 255, 0.2)'; + el.style.pointerEvents = 'none'; + el.style.userSelect = 'none'; + el.style.color = 'green'; + el.style.padding = '5px 10px'; + el.style.borderRadius = '4px'; + el.style.fontFamily = 'monospace'; + el.style.fontSize = '14px'; + el.style.zIndex = '9999'; + document.body.appendChild(el); + return el; +}; + +const calculateFps = () => { + // const range = 1000 + // const curr = new Date() + // frameArr.push(curr.getTime()) + // while (frameArr[0] < curr.getTime() - range) { + // frameArr.shift() + // } + // const fps = Math.floor(frameArr.length / range * 1000) + // if (fpsElement.value) { + // fpsElement.value.textContent = `FPS: ${fps}`; + // } + // const id = requestAnimationFrame(calculateFps); + // setAnimationFrameId(id); + const curr = new Date() + const fps = Math.floor(1000 / (curr.getTime() - lastTime)) + if (fpsElement.value && lastTime !== 0) { + fpsElement.value.textContent = `FPS: ${fps}`; + } + lastTime = curr.getTime() + const id = requestAnimationFrame(calculateFps); + setAnimationFrameId(id); +}; + +const showFps = () => { + if (fpsElement.value) return; + + const el = createFpsElement(); + setFpsElement(el); + + const id = requestAnimationFrame(calculateFps); + setAnimationFrameId(id); +}; + +export default showFps; \ No newline at end of file