diff --git a/src/components/BowTarget/HalfRingTarget.vue b/src/components/BowTarget/HalfRingTarget.vue new file mode 100644 index 0000000..b54baa0 --- /dev/null +++ b/src/components/BowTarget/HalfRingTarget.vue @@ -0,0 +1,111 @@ + + + + + diff --git a/src/components/BowTargetEdit.vue b/src/components/BowTargetEdit.vue index ba99c1e..5ef4807 100644 --- a/src/components/BowTargetEdit.vue +++ b/src/components/BowTargetEdit.vue @@ -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' }" > - - - - {{ arrow.ring === 0 ? "M" : arrow.ring }} - + + {{ arrow.ring === 0 ? "M" : arrow.ring }} + + + - - - - - - - - - + + + + + + + + + @@ -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; +} diff --git a/src/util.js b/src/util.js index 141debe..679358d 100644 --- a/src/util.js +++ b/src/util.js @@ -1,4 +1,3 @@ -import websocket from "@/websocket"; import { isGamingAPI, getGameAPI } from "@/apis"; export const formatTimestamp = (timestamp) => { @@ -411,8 +410,8 @@ const calcNormalBowTarget = (x, y, diameter, arrowRadius) => { const arrowCenterY = y + arrowRadius; // 计算靶心坐标(靶纸中心) - const centerX = diameter / 2; - const centerY = diameter / 2; + const centerX = (diameter + arrowRadius * 2) / 2; + const centerY = (diameter + arrowRadius * 2) / 2; // 计算弓箭圆心到靶心的距离 const deltaX = arrowCenterX - centerX; @@ -451,8 +450,8 @@ const calcHalfBowTarget = (x, y, diameter, arrowRadius, noX = false) => { const arrowCenterY = y + arrowRadius; // 计算靶心坐标(靶纸中心) - const centerX = diameter / 2; - const centerY = diameter / 2; + const centerX = (diameter + arrowRadius * 2) / 2; + const centerY = (diameter + arrowRadius * 2) / 2; // 计算弓箭圆心到靶心的距离 const deltaX = arrowCenterX - centerX; @@ -484,11 +483,11 @@ export const calcTripleBowTarget = ( arrowRadius, noX = false ) => { - const side = diameter * 0.31; + const side = diameter * 0.327; // 115 / 351 if (y / diameter >= 0.649) { return calcHalfBowTarget( - x - diameter * 0.355, - y - diameter * 0.693, + x - diameter * 0.338, + y - diameter * 0.675, side, arrowRadius, noX @@ -496,17 +495,17 @@ export const calcTripleBowTarget = ( } if (y / diameter >= 0.31) { return calcHalfBowTarget( - x - diameter * 0.355, - y - diameter * 0.356, + x - diameter * 0.338, + y - diameter * 0.337, side, arrowRadius, noX ); } - if (y / diameter >= -0.025) { + if (y / diameter >= -0.026) { return calcHalfBowTarget( - x - diameter * 0.355, - y - diameter * 0.018, + x - diameter * 0.338, + y - diameter * 0, side, arrowRadius, noX @@ -544,7 +543,7 @@ export const calcPinBowTarget = (x, y, diameter, arrowRadius, noX = false) => { return r1 || r2 || r3; }; -export const calcRing = (bowtargetId, x, y, diameter, arrowRadius) => { +export const calcRing = (bowtargetId, x, y, diameter, arrowRadius = 5) => { if (bowtargetId < 4) { return calcNormalBowTarget(x, y, diameter, arrowRadius); } else if (bowtargetId < 7) {