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

交互方式修改

Browse Source
This commit is contained in:
kron
2025-08-19 16:48:33 +08:00
parent f03adb5ea0
commit 7162490ef7
3 changed files with 109 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
src/components/BowTargetEdit.vue
View File

@@ -27,8 +27,6 @@ const isDragging = ref(false);
const dragStartPos = ref({ x: 0, y: 0 });
const capsuleHeight = ref(0);
const scale = ref(1);
const zoomPos = ref({ x: 0, y: 0 });
const targetPos = ref({ x: 0, y: 0 });
let lastMoveTime = 0;
// 点击靶纸创建新的点
@@ -40,21 +38,14 @@ const onClick = async (e) => {
) {
return;
}
if (props.id === 7 || props.id === 9) {
scale.value = 1.5;
}
const newArrow = {
x: e.detail.x - zoomPos.value.x - 6 / scale.value,
y:
e.detail.y -
rect.value.top -
capsuleHeight.value -
zoomPos.value.y -
6 / scale.value,
x: (e.detail.x - 6) * scale.value,
y: (e.detail.y - rect.value.top - capsuleHeight.value - 6) * scale.value,
};
targetPos.value = {
x: zoomPos.value.x,
y: zoomPos.value.y,
};
const side = rect.value.width;
newArrow.ring = calcRing(
props.id,
@@ -72,10 +63,6 @@ const onClick = async (e) => {
// 确认添加箭矢
const confirmAdd = () => {
if (props.onChange) {
targetPos.value = {
x: zoomPos.value.x,
y: zoomPos.value.y,
};
props.onChange({
x: arrow.value.x / scale.value,
y: arrow.value.y / scale.value,
@@ -83,15 +70,13 @@ const confirmAdd = () => {
});
}
arrow.value = null;
scale.value = 1;
};
// 删除箭矢
const deleteArrow = () => {
arrow.value = null;
targetPos.value = {
x: zoomPos.value.x,
y: zoomPos.value.y,
};
scale.value = 1;
};
// 开始拖拽 - 同样修复坐标获取
@@ -142,21 +127,17 @@ const onDrag = async (e) => {
const endDrag = (e) => {
isDragging.value = false;
};
const onScale = (e) => {
lastMoveTime = Date.now();
const lastScale = scale.value;
scale.value = e.detail.scale;
zoomPos.value = { x: e.detail.x, y: e.detail.y };
if (arrow.value) {
arrow.value.x = arrow.value.x * (scale.value / lastScale);
arrow.value.y = arrow.value.y * (scale.value / lastScale);
}
};
const onMove = (e) => {
if (e.detail.source) {
zoomPos.value = { x: e.detail.x, y: e.detail.y };
const getNewPos = () => {
if (props.id === 7 || props.id === 9) {
if (arrow.value.y > 1.4)
return { left: "-12px", bottom: "calc(50% - 12px)" };
} else {
if (arrow.value.y > 0.88) {
return { left: "-12px", bottom: "calc(50% - 12px)" };
}
}
return { left: "calc(50% - 12px)", bottom: "-12px" };
};
onMounted(async () => {
@@ -174,82 +155,77 @@ onMounted(async () => {
@touchmove="onDrag"
@touchend="endDrag"
>
<movable-area class="move-area" scale-area>
<movable-view
class="move-view"
direction="all"
scale
:x="targetPos.x"
:y="targetPos.y"
:scale-min="1"
:scale-max="2"
:scale-value="scale"
:animation="false"
@scale="onScale"
@change="onMove"
:out-of-bounds="true"
<movable-area
class="move-area"
:style="{
transform: scale > 1 ? `scale(${scale}) translateY(16.7%)` : '',
}"
>
<image :src="src" mode="widthFix" />
<view
v-for="(arrow, index) in arrows"
:key="index"
class="arrow-point"
:style="{
left: (arrow.x !== undefined ? arrow.x : 0) * 100 + '%',
top: (arrow.y !== undefined ? arrow.y : 0) * 100 + '%',
}"
>
<image :src="src" mode="widthFix" />
<view
v-for="(arrow, index) in arrows"
:key="index"
class="arrow-point"
v-if="arrow.x !== undefined && arrow.y !== undefined"
class="point"
:style="{
left: (arrow.x !== undefined ? arrow.x : 0) * 100 + '%',
top: (arrow.y !== undefined ? arrow.y : 0) * 100 + '%',
transform: props.id === 7 || props.id === 9 ? 'scale(0.7)' : '',
}"
>
<text>{{ index + 1 }}</text>
</view>
</view>
<movable-view
v-if="arrow"
class="arrow-point"
direction="all"
:animation="false"
:out-of-bounds="true"
:x="arrow ? (rect.width * arrow.x) / scale : 0"
:y="arrow ? (rect.width * arrow.y) / scale : 0"
>
<view
class="point"
:style="{ transform: scale > 1 ? `scale(${1 / scale})` : '' }"
>
</view>
<view
v-if="arrow"
class="edit-buttons"
@touchstart.stop
:style="{ transform: scale > 1 ? `scale(${1 / scale})` : '' }"
>
<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
v-if="arrow.x !== undefined && arrow.y !== undefined"
class="point"
class="edit-btn confirm-btn"
@touchstart.stop="confirmAdd"
:style="{ ...getNewPos() }"
>
<text>{{ index + 1 }}</text>
<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>
<movable-view
v-if="arrow"
class="arrow-point"
direction="all"
:animation="false"
:out-of-bounds="true"
:x="arrow ? (rect.width * arrow.x) / scale : 0"
:y="arrow ? (rect.width * arrow.y) / scale : 0"
>
<view class="point"> </view>
<view
v-if="arrow"
class="edit-buttons"
@touchstart.stop
:style="{ transform: `scale(${1 / scale})` }"
>
<view class="edit-btn-text">
<!-- <text v-if="arrow.ring === 0" :style="{ width: '100%' }"
>未上靶</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">
<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>
</movable-view>
</movable-view>
</movable-area>
</view>
@@ -259,14 +235,25 @@ onMounted(async () => {
.container {
width: 100vw;
height: 100vw;
overflow: hidden;
transform: translateY(-10px);
overflow-x: hidden;
overflow-y: auto;
}
.move-area {
width: 100%;
height: 100%;
position: relative;
transition: all 0.3s ease;
}
.move-area::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.move-area > image {
width: 90%;
height: 90%;
margin: 5%;
}
.move-view {
@@ -300,6 +287,7 @@ onMounted(async () => {
background-color: #ff4444;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
transition: all 0.1s linear;
position: relative;
}
.point > text {
@@ -323,8 +311,8 @@ onMounted(async () => {
.edit-btn-text {
width: 100%;
display: flex;
/* justify-content: center; */
margin-left: 10px;
justify-content: center;
/* margin-left: 10px; */
}
.edit-btn-text > text {
@@ -350,8 +338,7 @@ onMounted(async () => {
}
.confirm-btn {
left: calc(50% - 12px);
bottom: -12px;
transition: all 0.3s ease;
}
.delete-btn {

4
src/pages/point-book-detail.vue
View File

@@ -13,6 +13,7 @@ const showTip = ref(false);
const showTip2 = ref(false);
const groups = ref([]);
const data = ref({});
const targetId = ref("");
const targetSrc = ref("");
const arrows = ref([]);
@@ -42,6 +43,7 @@ onLoad(async (options) => {
const config = uni.getStorageSync("point-book-config");
config.targetOption.some((item) => {
if (item.id === result.targetType) {
targetId.value = item.id;
targetSrc.value = item.icon;
}
});
@@ -122,7 +124,7 @@ onLoad(async (options) => {
/>
</button>
</view>
<BowTargetEdit :src="targetSrc" :arrows="arrows" />
<BowTargetEdit :id="targetId" :src="targetSrc" :arrows="arrows" />
<view :style="{ marginTop: '20px' }">
<SButton :onClick="goBack" :rounded="50">关闭</SButton>
</view>

20
src/util.js
View File

@@ -380,25 +380,25 @@ const calcHalfBowTarget = (x, y, diameter, noX = false) => {
};
export const calcTripleBowTarget = (x, y, diameter, noX = false) => {
const side = diameter * 0.324;
if (x / diameter >= 0.306) {
if (y / diameter >= 0.64) {
const side = diameter * 0.319;
if (x / diameter >= 0.312) {
if (y / diameter >= 0.65) {
return calcHalfBowTarget(
x - diameter * 0.342,
y - diameter * 0.68,
x - diameter * 0.344,
y - diameter * 0.684,
side,
noX
);
}
if (y / diameter >= 0.304) {
if (y / diameter >= 0.31) {
return calcHalfBowTarget(
x - diameter * 0.342,
y - diameter * 0.34,
y - diameter * 0.344,
side,
noX
);
}
if (y / diameter >= -0.03) {
if (y / diameter >= -0.025) {
return calcHalfBowTarget(x - diameter * 0.342, y, side, noX);
}
}
@@ -406,10 +406,10 @@ export const calcTripleBowTarget = (x, y, diameter, noX = false) => {
};
export const calcPinBowTarget = (x, y, diameter, noX = false) => {
const side = diameter * 0.482;
const side = diameter * 0.484;
if (x / diameter >= 0.488 && y / diameter >= 0.456) {
return calcHalfBowTarget(
x - diameter * 0.527,
x - diameter * 0.523,
y - diameter * 0.486,
side,
noX