Yeomai/SpineParticlesWeb
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

中英双语

Browse Source
This commit is contained in:
tianmo committed 2026-10-22 18:13:43 +08:00
1 parent ea26af26ee
commit b98c0333e6
50 files changed
+4082 -2049
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/PivotEditor.vue
+28 -26
View File
@@ -3,27 +3,27 @@
<div class="pivot-toolbar">
<div class="pivot-hint">
<span class="pivot-hint-icon">⊕</span>
<span>贴图轴点</span>
<span>{{ $t('pivot.title') }}</span>
</div>
<div class="pivot-zoom">
<button type="button" :disabled="zoom <= 100" title="缩小" @click="zoomBy(-25)">−</button>
<button type="button" :disabled="zoom <= 100" :title="$t('pivot.zoomOut')" @click="zoomBy(-25)">−</button>
<span>{{ zoom }}%</span>
<button type="button" :disabled="zoom >= 400" title="放大" @click="zoomBy(25)">＋</button>
<button type="button" :disabled="zoom >= 400" :title="$t('pivot.zoomIn')" @click="zoomBy(25)">＋</button>
</div>
<button v-if="!large" type="button" class="pivot-expand" title="放大到全屏操作" @click="$emit('fullscreen')">⤢</button>
<button v-if="!large" type="button" class="pivot-expand" :title="$t('pivot.expand')" @click="$emit('fullscreen')">⤢</button>
</div>
<div
ref="stageRef"
class="pivot-stage"
:class="{ panning }"
title="左键点击/拖动设置轴点 · 右键拖动画布 · 滚轮缩放"
:title="$t('pivot.interaction')"
@pointerdown="onPointerDown"
@wheel.prevent="onWheel"
@contextmenu.prevent
>
<div v-if="previewUrl" ref="boxRef" class="pivot-box" :style="boxStyle">
<img :src="previewUrl" alt="轴点预览" draggable="false" @load="onImageLoad" />
<img :src="previewUrl" :alt="$t('pivot.previewAlt')" draggable="false" @load="onImageLoad" />
</div>
<template v-if="previewUrl">
<!-- 准线与轴点放在缩放容器之外：尺寸恒定，准线贯穿整个交互区。 -->
@@ -32,7 +32,7 @@
<div class="pivot-marker" :style="{ left: `${pivotScreen.x}px`, top: `${pivotScreen.y}px` }"></div>
<div class="pivot-badge" :style="{ left: `${pivotScreen.x}px`, top: `${pivotScreen.y}px` }">X: {{ anchorXText }}% | Y: {{ anchorYText }}%</div>
</template>
<div v-else class="pivot-empty">未选择图片</div>
<div v-else class="pivot-empty">{{ $t('pivot.noImage') }}</div>
</div>
<div class="pivot-bottom">
@@ -49,10 +49,10 @@
@click="pickPreset(preset)"
>{{ preset.icon }}</button>
</div>
<button type="button" class="pivot-reset" @click="resetCenter">↺ 复位居中 (50%, 50%)</button>
<button type="button" class="pivot-reset" @click="resetCenter">↺ {{ $t('pivot.resetCenter') }}</button>
</div>
<div class="pivot-card">
<div class="pivot-card-head"><span><span class="pivot-card-icon">◎</span> 轴点坐标(%)</span></div>
<div class="pivot-card-head"><span><span class="pivot-card-icon">◎</span> {{ $t('pivot.coordinates') }}</span></div>
<div class="pivot-coords">
<label>X:
<input type="number" min="-1000" max="1000" step="0.1" :value="anchorXText" @input="updateCoord('x', $event)" />
@@ -66,20 +66,20 @@
<!-- 旋转测试只在大图精修时显示，避免内联面板过高。 -->
<template v-if="large">
<div class="pivot-card-head pivot-rotate-head">
<span><span class="pivot-card-icon">✥</span> 轴心旋转测试</span>
<span class="pivot-rotate-state">{{ rotationMode === 'static' ? '静止' : rotationMode === 'spin' ? '自转' : '摆动' }}</span>
<span><span class="pivot-card-icon">✥</span> {{ $t('pivot.rotationTest') }}</span>
<span class="pivot-rotate-state">{{ rotationMode === 'static' ? $t('pivot.static') : rotationMode === 'spin' ? $t('pivot.spin') : $t('pivot.swing') }}</span>
</div>
<div class="pivot-rotate-body">
<div class="pivot-rotate-modes">
<button type="button" :class="{ on: rotationMode === 'static' }" @click="rotationMode = 'static'">静止</button>
<button type="button" :class="{ on: rotationMode === 'spin' }" @click="rotationMode = 'spin'">↻ 自转</button>
<button type="button" :class="{ on: rotationMode === 'swing' }" @click="rotationMode = 'swing'">⇄ 摆动</button>
<button type="button" :class="{ on: rotationMode === 'static' }" @click="rotationMode = 'static'">{{ $t('pivot.static') }}</button>
<button type="button" :class="{ on: rotationMode === 'spin' }" @click="rotationMode = 'spin'">↻ {{ $t('pivot.spin') }}</button>
<button type="button" :class="{ on: rotationMode === 'swing' }" @click="rotationMode = 'swing'">⇄ {{ $t('pivot.swing') }}</button>
</div>
<div class="pivot-rotate-preview">
<img
v-if="previewUrl"
:src="previewUrl"
alt="旋转测试"
:alt="$t('pivot.rotationAlt')"
draggable="false"
:class="rotationMode"
:style="rotateStyle"
@@ -94,6 +94,7 @@
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
const props = withDefaults(defineProps<{
previewUrl: string
@@ -110,17 +111,18 @@ const emit = defineEmits<{
fullscreen: []
}>()
const presets = [
{ icon: '↖', label: '左上', x: 0, y: 0 },
{ icon: '↑', label: '正上', x: 50, y: 0 },
{ icon: '↗', label: '右上', x: 100, y: 0 },
{ icon: '←', label: '正左', x: 0, y: 50 },
{ icon: '◯', label: '正中', x: 50, y: 50 },
{ icon: '→', label: '正右', x: 100, y: 50 },
{ icon: '↙', label: '左下', x: 0, y: 100 },
{ icon: '↓', label: '正下·底部', x: 50, y: 100 },
{ icon: '↘', label: '右下', x: 100, y: 100 },
]
const { t } = useI18n()
const presets = computed(() => [
{ icon: '↖', label: t('pivot.topLeft'), x: 0, y: 0 },
{ icon: '↑', label: t('pivot.top'), x: 50, y: 0 },
{ icon: '↗', label: t('pivot.topRight'), x: 100, y: 0 },
{ icon: '←', label: t('pivot.left'), x: 0, y: 50 },
{ icon: '◯', label: t('pivot.center'), x: 50, y: 50 },
{ icon: '→', label: t('pivot.right'), x: 100, y: 50 },
{ icon: '↙', label: t('pivot.bottomLeft'), x: 0, y: 100 },
{ icon: '↓', label: t('pivot.bottom'), x: 50, y: 100 },
{ icon: '↘', label: t('pivot.bottomRight'), x: 100, y: 100 },
])
const stageRef = ref<HTMLElement | null>(null)
const boxRef = ref<HTMLElement | null>(null)