diff --git a/src/components/BowTargetEdit.vue b/src/components/BowTargetEdit.vue index e735772..b546082 100644 --- a/src/components/BowTargetEdit.vue +++ b/src/components/BowTargetEdit.vue @@ -135,13 +135,13 @@ const endDrag = (e) => { const getNewPos = () => { if (props.id === 7 || props.id === 9) { if (arrow.value.y > 1.4) - return { left: "-12px", bottom: "calc(50% - 12px)" }; + return { left: "-10px", bottom: "calc(50% - 10px)" }; } else { if (arrow.value.y > 0.88) { - return { left: "-12px", bottom: "calc(50% - 12px)" }; + return { left: "-10px", bottom: "calc(50% - 10px)" }; } } - return { left: "calc(50% - 12px)", bottom: "-12px" }; + return { left: "calc(50% - 10px)", bottom: "-10px" }; }; onMounted(async () => { @@ -183,9 +183,6 @@ onMounted(async () => { {{ index + 1 }} @@ -274,12 +271,11 @@ onMounted(async () => { } .point { - min-width: 12px; - min-height: 12px; + min-width: 10px; + min-height: 10px; border-radius: 50%; border: 1px solid #fff; color: #fff; - font-size: 8px; text-align: center; line-height: 10px; box-sizing: border-box; @@ -290,9 +286,13 @@ onMounted(async () => { } .point > text { - transform: scaleX(0.7); display: block; - font-weight: bold; + font-size: 12rpx; + line-height: 10px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scaleX(0.7); } .edit-buttons { @@ -311,7 +311,6 @@ onMounted(async () => { width: 100%; display: flex; justify-content: center; - /* margin-left: 10px; */ } .edit-btn-text > text { diff --git a/src/util.js b/src/util.js index 2f13430..3118b9b 100644 --- a/src/util.js +++ b/src/util.js @@ -297,10 +297,7 @@ export const getElementRect = (classname) => { }); }; -const calcNormalBowTarget = (x, y, diameter) => { - // 弓箭直径为12px,半径为6px - const arrowRadius = 6; - +const calcNormalBowTarget = (x, y, diameter, arrowRadius) => { // 将弓箭左上角坐标转换为圆心坐标 const arrowCenterX = x + arrowRadius; const arrowCenterY = y + arrowRadius; @@ -323,7 +320,6 @@ const calcNormalBowTarget = (x, y, diameter) => { // 计算相对距离(0-1之间) let relativeDistance = distance / targetRadius; - relativeDistance += 0.005; // 全环靶有10个环,每个环占半径的10% // 从外到内:1环到10环 // 距离越近靶心,环数越高 @@ -341,10 +337,7 @@ const calcNormalBowTarget = (x, y, diameter) => { return 0; // 脱靶 }; -const calcHalfBowTarget = (x, y, diameter, noX = false) => { - // 弓箭直径为12px,半径为6px - const arrowRadius = 6; - +const calcHalfBowTarget = (x, y, diameter, arrowRadius, noX = false) => { // 将弓箭左上角坐标转换为圆心坐标 const arrowCenterX = x + arrowRadius; const arrowCenterY = y + arrowRadius; @@ -376,7 +369,13 @@ const calcHalfBowTarget = (x, y, diameter, noX = false) => { return 0; // 脱靶 }; -export const calcTripleBowTarget = (x, y, diameter, noX = false) => { +export const calcTripleBowTarget = ( + x, + y, + diameter, + arrowRadius, + noX = false +) => { const side = diameter * 0.324; if (x / diameter >= 0.316) { if (y / diameter >= 0.654) { @@ -384,6 +383,7 @@ export const calcTripleBowTarget = (x, y, diameter, noX = false) => { x - diameter * 0.342, y - diameter * 0.68, side, + arrowRadius, noX ); } @@ -392,6 +392,7 @@ export const calcTripleBowTarget = (x, y, diameter, noX = false) => { x - diameter * 0.342, y - diameter * 0.34, side, + arrowRadius, noX ); } @@ -400,6 +401,7 @@ export const calcTripleBowTarget = (x, y, diameter, noX = false) => { x - diameter * 0.342, y - diameter * 0.005, side, + arrowRadius, noX ); } @@ -407,7 +409,7 @@ export const calcTripleBowTarget = (x, y, diameter, noX = false) => { return 0; }; -export const calcPinBowTarget = (x, y, diameter, noX = false) => { +export const calcPinBowTarget = (x, y, diameter, arrowRadius, noX = false) => { const side = diameter * 0.484; let r1 = 0; let r2 = 0; @@ -417,31 +419,38 @@ export const calcPinBowTarget = (x, y, diameter, noX = false) => { x - diameter * 0.26, y - diameter * 0.0345, side, + arrowRadius, noX ); } if (x / diameter >= -0.03 && y / diameter >= 0.456) { - r2 = calcHalfBowTarget(x, y - diameter * 0.486, side, noX); + r2 = calcHalfBowTarget(x, y - diameter * 0.486, side, arrowRadius, noX); } if (x / diameter >= 0.49 && y / diameter >= 0.456) { - r3 = calcHalfBowTarget(x - diameter * 0.52, y - diameter * 0.49, side, noX); + r3 = calcHalfBowTarget( + x - diameter * 0.52, + y - diameter * 0.49, + side, + arrowRadius, + noX + ); } return r1 || r2 || r3; }; -export const calcRing = (bowtargetId, x, y, diameter) => { +export const calcRing = (bowtargetId, x, y, diameter, arrowRadius = 5) => { if (bowtargetId < 4) { - return calcNormalBowTarget(x - 2, y - 2, diameter); + return calcNormalBowTarget(x, y, diameter, arrowRadius); } else if (bowtargetId < 7) { - return calcHalfBowTarget(x - 2, y - 2, diameter); + return calcHalfBowTarget(x, y, diameter + 2, arrowRadius); } else if (bowtargetId === 7) { - return calcTripleBowTarget(x, y, diameter); + return calcTripleBowTarget(x, y, diameter, arrowRadius); } else if (bowtargetId === 8) { - return calcPinBowTarget(x, y, diameter); + return calcPinBowTarget(x, y, diameter, arrowRadius); } else if (bowtargetId === 9) { - return calcTripleBowTarget(x, y, diameter, true); + return calcTripleBowTarget(x, y, diameter, arrowRadius, true); } else if (bowtargetId === 10) { - return calcPinBowTarget(x, y, diameter, true); + return calcPinBowTarget(x, y, diameter, arrowRadius, true); } return 0; };