Skip to content

Commit

Permalink
Merge pull request #58 from LOG1997/fix-bug
Browse files Browse the repository at this point in the history 
fix: 性能问题
  • Loading branch information
@LOG1997
LOG1997 authored Jan 13, 2025
2 parents 9e57301 + 95c00b5 commit 09da871
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 94 deletions.
122 changes: 61 additions & 61 deletions src/hooks/useElement.ts
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,49 @@
import type { IPersonConfig } from '@/types/storeType'
import { rgba } from '@/utils/color'

export const useElementStyle = (element: any, person: IPersonConfig, index: number, patternList: number[], patternColor: string, cardColor: string, cardSize: { width: number, height: number }, textSize: number, mod: 'default' | 'lucky' | 'sphere' = 'default') => {
if (patternList.includes(index + 1) && mod == 'default') {
element.style.backgroundColor = rgba(patternColor, Math.random() * 0.2 + 0.8)
}
else if (mod == 'sphere' || mod == 'default') {
element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
}
else if (mod == 'lucky') {
element.style.backgroundColor = rgba(cardColor, 0.8)
}
element.style.border = `1px solid ${rgba(cardColor, 0.25)}`
element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
element.style.width = `${cardSize.width}px`;
element.style.height = `${cardSize.height}px`;
if (mod == 'lucky') {
element.className = 'lucky-element-card'
}
else {
element.className = 'element-card'
}
// 等比放大
export function useElementStyle(element: any, person: IPersonConfig, index: number, patternList: number[], patternColor: string, cardColor: string, cardSize: { width: number, height: number }, textSize: number, mod: 'default' | 'lucky' | 'sphere' = 'default', type: 'add' | 'change' = 'add') {
if (patternList.includes(index + 1) && mod === 'default') {
element.style.backgroundColor = rgba(patternColor, Math.random() * 0.2 + 0.8)
}
else if (mod === 'sphere' || mod === 'default') {
element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
}
else if (mod === 'lucky') {
element.style.backgroundColor = rgba(cardColor, 0.8)
}
element.style.border = `1px solid ${rgba(cardColor, 0.25)}`
element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
element.style.width = `${cardSize.width}px`
element.style.height = `${cardSize.height}px`
if (mod === 'lucky') {
element.className = 'lucky-element-card'
}
else {
element.className = 'element-card'
}
if (type === 'add') {
element.addEventListener('mouseenter', (ev: MouseEvent) => {
const target = ev.target as HTMLElement
target.style.border = `1px solid ${rgba(cardColor, 0.75)}`
target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.75)}`
const target = ev.target as HTMLElement
target.style.border = `1px solid ${rgba(cardColor, 0.75)}`
target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.75)}`
})
element.addEventListener('mouseleave', (ev: MouseEvent) => {
const target = ev.target as HTMLElement
target.style.border = `1px solid ${rgba(cardColor, 0.25)}`
target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
const target = ev.target as HTMLElement
target.style.border = `1px solid ${rgba(cardColor, 0.25)}`
target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
})
element.children[0].style.fontSize = textSize * 0.5 + 'px';
if (person.uid) {
element.children[0].textContent = person.uid;
}
}
element.children[0].style.fontSize = `${textSize * 0.5}px`
if (person.uid) {
element.children[0].textContent = person.uid
}

element.children[1].style.fontSize = `${textSize}px`
element.children[1].style.lineHeight = `${textSize * 3}px`
element.children[1].style.textShadow = `0 0 12px ${rgba(cardColor, 0.95)}`
if (person.name) {
element.children[1].textContent = person.name
}

element.children[2].style.fontSize = `${textSize * 0.5}px`
if (person.department || person.identity) {
element.children[2].innerHTML = `${person.department ? person.department : ''}<br/>${person.identity ? person.identity : ''}`
Expand All @@ -57,37 +57,37 @@ export const useElementStyle = (element: any, person: IPersonConfig, index: numb
* 最少一个，最大十个
*/
// TODO:不超过5个时：单行排列；超过5个时，6：上3下3；7：上3下4；8：上3下5；9：上4下5；10：上5下5
export const useElementPosition = (element: any, count: number, totalCount: number, cardSize: { width: number, height: number }, windowSize: { width: number, height: number }, cardIndex: number) => {
let xTable = 0
let yTable = 0
const centerPosition = {
x: 0,
y: windowSize.height / 2 - cardSize.height / 2
export function useElementPosition(element: any, count: number, totalCount: number, cardSize: { width: number, height: number }, windowSize: { width: number, height: number }, cardIndex: number) {
let xTable = 0
let yTable = 0
const centerPosition = {
x: 0,
y: windowSize.height / 2 - cardSize.height / 2,
}
// 有一行为偶数的特殊数量
const specialPosition = [2, 4, 7, 9]
// 不包含特殊值的 和 分两行中第一行为奇数值的
if (!specialPosition.includes(totalCount) || (totalCount > 5 && cardIndex < 5)) {
const index = cardIndex % 5
if (index === 0) {
xTable = centerPosition.x
yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
}
// 有一行为偶数的特殊数量
const specialPosition = [2, 4, 7, 9]
// 不包含特殊值的 和 分两行中第一行为奇数值的
if (!specialPosition.includes(totalCount) || (totalCount > 5 && cardIndex < 5)) {
const index = cardIndex % 5
if (index == 0) {
xTable = centerPosition.x
yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
}
else {
xTable = index % 2 === 0 ? Math.ceil(index / 2) * (cardSize.width + 100) : -Math.ceil(index / 2) * (cardSize.width + 100)
yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
}
else {
xTable = index % 2 === 0 ? Math.ceil(index / 2) * (cardSize.width + 100) : -Math.ceil(index / 2) * (cardSize.width + 100)
yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
}
}
else {
const index = cardIndex % 5
if (index === 0) {
xTable = centerPosition.x + (cardSize.width + 100) / 2
yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
}
else {
const index = cardIndex % 5
if (index == 0) {
xTable = centerPosition.x + (cardSize.width + 100) / 2
yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
}
else {
xTable = index % 2 === 0 ? Math.ceil(index / 2) * (cardSize.width + 100) + (cardSize.width + 100) / 2 : -(Math.ceil(index / 2) * (cardSize.width + 100)) + (cardSize.width + 100) / 2
yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
}
xTable = index % 2 === 0 ? Math.ceil(index / 2) * (cardSize.width + 100) + (cardSize.width + 100) / 2 : -(Math.ceil(index / 2) * (cardSize.width + 100)) + (cardSize.width + 100) / 2
yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60)
}
return { xTable, yTable }
}
return { xTable, yTable }
}
119 changes: 86 additions & 33 deletions src/views/Home/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script setup lang="ts">
import type { IPersonConfig } from '@/types/storeType'
import type { Material } from 'three'
import StarsBackground from '@/components/StarsBackground/index.vue'
import { useElementPosition, useElementStyle } from '@/hooks/useElement'
import i18n from '@/locales/i18n'
Expand All @@ -12,7 +13,7 @@ import { storeToRefs } from 'pinia'
import { Object3D, PerspectiveCamera, Scene, Vector3 } from 'three'
import { CSS3DObject, CSS3DRenderer } from 'three-css3d'
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js'
import { onMounted, onUnmounted, ref } from 'vue'
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { useToast } from 'vue-toast-notification'
Expand Down Expand Up @@ -268,7 +269,9 @@ function onWindowResize() {
*/
function animation() {
TWEEN.update()
controls.value.update()
if (controls.value) {
controls.value.update()
}
// 设置自动旋转
// 设置相机位置
requestAnimationFrame(animation)
Expand Down Expand Up @@ -343,7 +346,9 @@ function resetCamera() {
}
function render() {
renderer.value.render(scene.value, camera.value)
if (renderer.value) {
renderer.value.render(scene.value, camera.value)
}
}
async function enterLottery() {
if (!canOperate.value) {
Expand Down Expand Up @@ -582,49 +587,97 @@ function randomBallData(mod: 'default' | 'lucky' | 'sphere' = 'default') {
if (!objects.value[cardRandomIndexArr[i]]) {
continue
}
objects.value[cardRandomIndexArr[i]].element = useElementStyle(objects.value[cardRandomIndexArr[i]].element, allPersonList.value[personRandomIndexArr[i]], cardRandomIndexArr[i], patternList.value, patternColor.value, cardColor.value, { width: cardSize.value.width, height: cardSize.value.height }, textSize.value, mod)
objects.value[cardRandomIndexArr[i]].element = useElementStyle(objects.value[cardRandomIndexArr[i]].element, allPersonList.value[personRandomIndexArr[i]], cardRandomIndexArr[i], patternList.value, patternColor.value, cardColor.value, { width: cardSize.value.width, height: cardSize.value.height }, textSize.value, mod, 'change')
}
}, 200)
}
// 监听键盘
function listenKeyboard() {
window.addEventListener('keydown', (e: any) => {
if ((e.keyCode !== 32 || e.keyCode !== 27) && !canOperate.value) {
return
}
if (e.keyCode === 27 && currentStatus.value === 3) {
quitLottery()
}
if (e.keyCode !== 32) {
return
}
switch (currentStatus.value) {
case 0:
enterLottery()
break
case 1:
startLottery()
break
case 2:
stopLottery()
break
case 3:
continueLottery()
break
default:
break
}
})
function listenKeyboard(e: any) {
if ((e.keyCode !== 32 || e.keyCode !== 27) && !canOperate.value) {
return
}
if (e.keyCode === 27 && currentStatus.value === 3) {
quitLottery()
}
if (e.keyCode !== 32) {
return
}
switch (currentStatus.value) {
case 0:
enterLottery()
break
case 1:
startLottery()
break
case 2:
stopLottery()
break
case 3:
continueLottery()
break
default:
break
}
}
function cleanup() {
// animationRunning.value = false
clearInterval(intervalTimer.value)
intervalTimer.value = null
if (scene.value) {
scene.value.traverse((object: Object3D) => {
if ((object as any).material) {
if (Array.isArray((object as any).material)) {
(object as any).material.forEach((material: Material) => {
material.dispose()
})
}
else {
(object as any).material.dispose()
}
}
if ((object as any).geometry) {
(object as any).geometry.dispose()
}
if ((object as any).texture) {
(object as any).texture.dispose()
}
})
scene.value.clear()
}
if (objects.value) {
objects.value.forEach((object) => {
if (object.element) {
object.element.remove()
}
})
objects.value = []
}
if (controls.value) {
controls.value.removeEventListener('change')
controls.value.dispose()
}
// 移除所有事件监听
window.removeEventListener('resize', onWindowResize)
scene.value = null
camera.value = null
renderer.value = null
controls.value = null
}
onMounted(() => {
initTableData()
init()
animation()
containerRef.value!.style.color = `${textColor}`
randomBallData()
listenKeyboard()
window.addEventListener('keydown', listenKeyboard)
})
onUnmounted(() => {
nextTick(() => {
cleanup()
})
clearInterval(intervalTimer.value)
intervalTimer.value = null
window.removeEventListener('keydown', listenKeyboard)
Expand Down

0 comments on commit 09da871

Please sign in to comment.