diff --git a/src/components/BowTargetEdit.vue b/src/components/BowTargetEdit.vue
index 099c422..c7f93c8 100644
--- a/src/components/BowTargetEdit.vue
+++ b/src/components/BowTargetEdit.vue
@@ -25,16 +25,23 @@ const rect = ref({});
const arrow = ref(null);
const isDragging = ref(false);
const dragStartPos = ref({ x: 0, y: 0 });
+const capsuleHeight = ref(0);
// 点击靶纸创建新的点
const onClick = async (e) => {
if (arrow.value !== null || !props.onChange) return;
const newArrow = {
- x: e.detail.x - (rect.value.width * 0.1) / 2,
- y: e.detail.y - rect.value.top - 10,
+ x: e.detail.x,
+ y: e.detail.y - rect.value.top - capsuleHeight.value,
};
- const side = rect.value.width * 0.9;
- newArrow.ring = calcRing(props.id, newArrow.x, newArrow.y, side, side);
+ const side = rect.value.width;
+ newArrow.ring = calcRing(
+ props.id,
+ newArrow.x - rect.value.width * 0.05,
+ newArrow.y - 10,
+ rect.value.width * 0.9,
+ rect.value.width * 0.9
+ );
arrow.value = {
...newArrow,
x: newArrow.x / side,
@@ -75,17 +82,17 @@ const onDrag = async (e) => {
const deltaX = clientX - dragStartPos.value.x;
const deltaY = clientY - dragStartPos.value.y;
- const side = rect.value.width * 0.9;
+ const side = rect.value.width;
// 更新坐标
arrow.value.x = Math.max(0, Math.min(side, arrow.value.x * side + deltaX));
arrow.value.y = Math.max(0, Math.min(side, arrow.value.y * side + deltaY));
arrow.value.ring = calcRing(
props.id,
- arrow.value.x,
- arrow.value.y,
- side,
- side
+ arrow.value.x - rect.value.width * 0.05,
+ arrow.value.y - 10,
+ rect.value.width * 0.9,
+ rect.value.width * 0.9
);
arrow.value.x = arrow.value.x / side;
arrow.value.y = arrow.value.y / side;
@@ -99,21 +106,45 @@ const endDrag = () => {
isDragging.value = false;
};
+const scale = ref(1);
+const onScale = (e) => {
+ scale.value = e.detail.scale; // 返回 1 ~ 2
+};
+
+const onMove = (e) => {
+ console.log(e);
+};
+
onMounted(async () => {
- const result = await getElementRect();
+ const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
+ capsuleHeight.value = menuBtnInfo.top - 9;
+ const result = await getElementRect(".container");
rect.value = result;
});
-
-
-
+
+
+
+
+
{
class="arrow-point"
direction="all"
:animation="false"
- :x="rect.width * 0.9 * arrow.x"
- :y="rect.width * 0.9 * arrow.y"
+ :x="rect.width * arrow.x"
+ :y="rect.width * arrow.y"
>
@@ -169,25 +200,32 @@ onMounted(async () => {
-
-
+
+