laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

不放大的3连靶

Browse Source
This commit is contained in:
kron
2025-12-05 15:24:42 +08:00
parent 19902d5bed
commit 8c22eb0877
3 changed files with 180 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/BowTargetEdit.vue
View File

@@ -43,18 +43,18 @@ const onClick = async (e) => {
) {
return;
}
if (props.id === 7 || props.id === 9) {
// 放大并通过滚动将点击位置置于视窗中心
scale.value = 1.5;
const viewportH = rect.value.width; // 容器高度等于宽度（100vw）
const contentH = scale.value * rect.value.width; // 内容高度
const clickYInContainer = e.detail.y - rect.value.top;
let target = clickYInContainer * scale.value - viewportH / 2;
target = Math.max(0, Math.min(contentH - viewportH, target));
setTimeout(() => {
scrollTop.value = target > 180 ? target + 10 : target;
}, 200);
}
// if (props.id === 7 || props.id === 9) {
// // 放大并通过滚动将点击位置置于视窗中心
// scale.value = 1.4;
// const viewportH = rect.value.width; // 容器高度等于宽度（100vw）
// const contentH = scale.value * rect.value.width; // 内容高度
// const clickYInContainer = e.detail.y - rect.value.top;
// let target = clickYInContainer * scale.value - viewportH / 2;
// target = Math.max(0, Math.min(contentH - viewportH, target));
// setTimeout(() => {
// scrollTop.value = target > 180 ? target + 10 : target;
// }, 200);
// }
const newArrow = {
x: (e.detail.x - 6) * scale.value,
y: (e.detail.y - rect.value.top - capsuleHeight.value - 6) * scale.value,
@@ -63,10 +63,9 @@ const onClick = async (e) => {
const side = rect.value.width;
newArrow.ring = calcRing(
props.id,
newArrow.x / scale.value - rect.value.width * 0.05,
newArrow.y / scale.value - rect.value.width * 0.05,
rect.value.width * 0.9,
(10 * scale.value) / 2
newArrow.x / scale.value - side * 0.05,
newArrow.y / scale.value - side * 0.05,
side * 0.9
);
arrow.value = {
...newArrow,
@@ -128,10 +127,9 @@ const onDrag = async (e) => {
);
arrow.value.ring = calcRing(
props.id,
arrow.value.x / scale.value - rect.value.width * 0.05,
arrow.value.y / scale.value - rect.value.width * 0.05,
rect.value.width * 0.9,
(10 * scale.value) / 2
arrow.value.x / scale.value - side * 0.05,
arrow.value.y / scale.value - side * 0.05,
side * 0.9
);
arrow.value.x = arrow.value.x / side;
@@ -148,7 +146,7 @@ const endDrag = (e) => {
const getNewPos = () => {
if (props.id === 7 || props.id === 9) {
if (arrow.value.y > 1.4)
if (arrow.value.y >= 1.33)
return { left: "-12px", bottom: "calc(50% - 12px)" };
} else {
if (arrow.value.y > 0.88) {
@@ -217,34 +215,38 @@ onMounted(async () => {
class="point"
:style="{ minWidth: 10 * scale + 'px', minHeight: 10 * scale + 'px' }"
>
</view>
<view v-if="arrow" class="edit-buttons" @touchstart.stop>
<view class="edit-btn-text">
<text>{{ arrow.ring === 0 ? "M" : arrow.ring }}</text>
<text
v-if="arrow.ring > 0"
:style="{
fontSize: '16px',
marginLeft: '2px',
}"
>环</text
<view v-if="arrow" class="edit-buttons" @touchstart.stop>
<view class="edit-btn-text">
<text>{{ arrow.ring === 0 ? "M" : arrow.ring }}</text>
<text
v-if="arrow.ring > 0"
:style="{
fontSize: '16px',
marginLeft: '2px',
}"
>环</text
>
</view>
<view
class="edit-btn confirm-btn"
@touchstart.stop="confirmAdd"
:style="{ ...getNewPos() }"
>
</view>
<view
class="edit-btn confirm-btn"
@touchstart.stop="confirmAdd"
:style="{ ...getNewPos() }"
>
<image src="../static/arrow-edit-save.png" mode="widthFix" />
</view>
<view class="edit-btn delete-btn" @touchstart.stop="deleteArrow">
<image src="../static/arrow-edit-delete.png" mode="widthFix" />
</view>
<view class="edit-btn drag-btn" @touchstart.stop="startDrag($event)">
<image src="../static/arrow-edit-move.png" mode="widthFix" />
<image src="../static/arrow-edit-save.png" mode="widthFix" />
</view>
<view class="edit-btn delete-btn" @touchstart.stop="deleteArrow">
<image src="../static/arrow-edit-delete.png" mode="widthFix" />
</view>
<view
class="edit-btn drag-btn"
@touchstart.stop="startDrag($event)"
>
<image src="../static/arrow-edit-move.png" mode="widthFix" />
</view>
</view>
</view>
</movable-view>
<!-- <view class="test-view"></view> -->
</movable-area>
</scroll-view>
</template>
@@ -286,9 +288,6 @@ onMounted(async () => {
.arrow-point {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.point {
@@ -304,6 +303,7 @@ onMounted(async () => {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
transition: all 0.1s linear;
position: relative;
transform: translate(-50%, -50%);
}
.point > text {
@@ -372,4 +372,12 @@ onMounted(async () => {
right: -12px;
bottom: -12px;
}
.test-view {
position: absolute;
top: 29px;
left: 138px;
width: 115px;
height: 115px;
background-color: #ff000055;
}
</style>