xiaji/game-cards-poker-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: image offset controls from sliders to number inputs

Browse Source
This commit is contained in:
Poker Design Developer
2026-06-04 22:15:48 +08:00
parent aed831fc8c
commit ebf0f51f94
1 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/components/DesignPanel.vue
View File

@@ -45,17 +45,17 @@
<section v-if="backDesign.image">
<h4>图片位置微调</h4>
<p class="hint">拖动滑块微调素材图片的位置与缩放（0 = 默认）</p>
<p class="hint">输入数值微调素材图片的位置与缩放（0 = 默认）</p>
<div class="pip-row">
<label class="mini-label">dx</label>
<input type="range" min="-0.05" max="0.05" step="0.005"
:value="backImageOffsetVal('image_dx')" @input="setBackImageOffset('image_dx', $event.target.value)" />
<input type="number" step="0.005" min="-0.05" max="0.05"
:value="backImageOffsetVal('image_dx')" @change="setBackImageOffset('image_dx', $event.target.value)" />
<label class="mini-label">dy</label>
<input type="range" min="-0.05" max="0.05" step="0.005"
:value="backImageOffsetVal('image_dy')" @input="setBackImageOffset('image_dy', $event.target.value)" />
<input type="number" step="0.005" min="-0.05" max="0.05"
:value="backImageOffsetVal('image_dy')" @change="setBackImageOffset('image_dy', $event.target.value)" />
<label class="mini-label">缩放</label>
<input type="range" min="0.6" max="1.4" step="0.05"
:value="backImageOffsetVal('image_scale')" @input="setBackImageOffset('image_scale', $event.target.value)" />
<input type="number" step="0.05" min="0.6" max="1.4"
:value="backImageOffsetVal('image_scale')" @change="setBackImageOffset('image_scale', $event.target.value)" />
</div>
<button @click="resetBackImageOffset" class="mini ghost">重置图片位置</button>
</section>
@@ -157,17 +157,17 @@
<!-- 图片位置微调（大小王） -->
<section v-if="showImageOffset">
<h4>图片位置微调</h4>
<p class="hint">拖动滑块微调素材图片的位置与缩放（0 = 默认）</p>
<p class="hint">输入数值微调素材图片的位置与缩放（0 = 默认）</p>
<div class="pip-row">
<label class="mini-label">dx</label>
<input type="range" min="-0.05" max="0.05" step="0.005"
:value="imageOffsetVal('image_dx')" @input="setImageOffset('image_dx', $event.target.value)" />
<input type="number" step="0.005" min="-0.05" max="0.05"
:value="imageOffsetVal('image_dx')" @change="setImageOffset('image_dx', $event.target.value)" />
<label class="mini-label">dy</label>
<input type="range" min="-0.05" max="0.05" step="0.005"
:value="imageOffsetVal('image_dy')" @input="setImageOffset('image_dy', $event.target.value)" />
<input type="number" step="0.005" min="-0.05" max="0.05"
:value="imageOffsetVal('image_dy')" @change="setImageOffset('image_dy', $event.target.value)" />
<label class="mini-label">缩放</label>
<input type="range" min="0.6" max="1.4" step="0.05"
:value="imageOffsetVal('image_scale')" @input="setImageOffset('image_scale', $event.target.value)" />
<input type="number" step="0.05" min="0.6" max="1.4"
:value="imageOffsetVal('image_scale')" @change="setImageOffset('image_scale', $event.target.value)" />
</div>
<button @click="resetImageOffset" class="mini ghost">重置图片位置</button>
</section>
@@ -175,7 +175,7 @@
<!-- 数字牌花色位置微调 -->
<section v-if="isNumberCard">
<h4>数字牌花色位置微调</h4>
<p class="hint">拖动滑块微调每个花色的位置（占整张牌的比例，0 = 默认）</p>
<p class="hint">输入数值微调每个花色的位置（占整张牌的比例，0 = 默认）</p>
<div class="rank-tabs">
<button v-for="r in [1,2,3,4,5,6,7,8,9,10]" :key="r"
:class="{ active: selectedRank === r }"
@@ -184,14 +184,14 @@
<div v-for="(pos, i) in positions" :key="i" class="pip-row">
<div class="pip-label">#{{ i + 1 }}</div>
<label class="mini-label">dx</label>
<input type="range" min="-0.05" max="0.05" step="0.005"
:value="overrideFor(i).dx" @input="setOffset(i, 'dx', $event.target.value)" />
<input type="number" step="0.005" min="-0.05" max="0.05"
:value="overrideFor(i).dx" @change="setOffset(i, 'dx', $event.target.value)" />
<label class="mini-label">dy</label>
<input type="range" min="-0.05" max="0.05" step="0.005"
:value="overrideFor(i).dy" @input="setOffset(i, 'dy', $event.target.value)" />
<input type="number" step="0.005" min="-0.05" max="0.05"
:value="overrideFor(i).dy" @change="setOffset(i, 'dy', $event.target.value)" />
<label class="mini-label">缩放</label>
<input type="range" min="0.6" max="1.4" step="0.05"
:value="overrideFor(i).scale" @input="setOffset(i, 'scale', $event.target.value)" />
<input type="number" step="0.05" min="0.6" max="1.4"
:value="overrideFor(i).scale" @change="setOffset(i, 'scale', $event.target.value)" />
</div>
<button @click="resetLayout" class="mini ghost">重置本点数布局</button>
</section>