69 lines
2.1 KiB
Vue
69 lines
2.1 KiB
Vue
// 像素头像渲染组件：把 'px:NN' 编码画成像素图（8×8 网格放大，锐利无插值）
|
||
// 兼容旧 emoji 数据：非像素编码时原样以文字显示，历史用户零迁移
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
import { AVATAR_SHAPES, AVATAR_PALETTES, decodePixelAvatar } from '../games/pixelAvatars'
|
||
|
||
const props = defineProps({
|
||
// 头像值：'px:NN' 像素编码 或 旧 emoji 字符
|
||
code: { type: String, default: '' },
|
||
// 渲染尺寸（px）
|
||
size: { type: Number, default: 32 },
|
||
})
|
||
|
||
const px = computed(() => decodePixelAvatar(props.code))
|
||
|
||
// dataURL 缓存：同 code+size 只画一次（组件实例间不共享，同一实例多次渲染直接命中）
|
||
const cache = new Map()
|
||
function dataUrl(size) {
|
||
const key = props.code + '@' + size
|
||
if (cache.has(key)) return cache.get(key)
|
||
const p = px.value
|
||
if (!p) return ''
|
||
const shape = AVATAR_SHAPES[p.shape]
|
||
const pal = AVATAR_PALETTES[p.palette]
|
||
const cell = Math.max(1, Math.round(size / 8))
|
||
const real = cell * 8
|
||
const cv = document.createElement('canvas')
|
||
cv.width = real
|
||
cv.height = real
|
||
const ctx = cv.getContext('2d')
|
||
const colors = { 1: pal.c1, 2: pal.c2, 3: pal.c3, 4: '#ffffff', 5: '#1a1a24' }
|
||
shape.forEach((row, y) => {
|
||
for (let x = 0; x < 8; x++) {
|
||
const ch = row[x]
|
||
if (ch === '.') continue
|
||
ctx.fillStyle = colors[ch] || colors[1]
|
||
ctx.fillRect(x * cell, y * cell, cell, cell)
|
||
}
|
||
})
|
||
const url = cv.toDataURL()
|
||
cache.set(key, url)
|
||
return url
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<span class="px-avatar" :style="{ width: size + 'px', height: size + 'px', fontSize: Math.round(size * 0.6) + 'px' }">
|
||
<img v-if="px" :src="dataUrl(size)" :width="size" :height="size" alt="" class="px-img" />
|
||
<template v-else>{{ code || '🎮' }}</template>
|
||
</span>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.px-avatar {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
line-height: 1;
|
||
flex-shrink: 0;
|
||
}
|
||
.px-img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
image-rendering: pixelated; /* 像素图放大不模糊 */
|
||
}
|
||
</style>
|