update:代码备份
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { computed, ref, watch } from "vue";
|
||||
import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
const store = useStore();
|
||||
@@ -26,12 +26,33 @@ const props = defineProps({
|
||||
type: Number,
|
||||
default: 45,
|
||||
},
|
||||
sizeUnit: {
|
||||
type: String,
|
||||
default: "px",
|
||||
},
|
||||
imageMode: {
|
||||
type: String,
|
||||
default: "widthFix",
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
const avatarFrame = ref("");
|
||||
const sizeValue = computed(() => `${Number(props.size)}${props.sizeUnit}`);
|
||||
const frameSizeValue = computed(() => `${Number(props.size) + 10}${props.sizeUnit}`);
|
||||
const avatarImageStyle = computed(() => ({
|
||||
width: sizeValue.value,
|
||||
height: sizeValue.value,
|
||||
minHeight: sizeValue.value,
|
||||
borderColor: props.borderColor || "#fff",
|
||||
}));
|
||||
const avatarFrameStyle = computed(() => ({
|
||||
width: frameSizeValue.value,
|
||||
height: frameSizeValue.value,
|
||||
}));
|
||||
|
||||
watch(
|
||||
() => [config.value, props.rankLvl],
|
||||
() => {
|
||||
@@ -51,10 +72,7 @@ watch(
|
||||
v-if="avatarFrame"
|
||||
:src="avatarFrame"
|
||||
mode="widthFix"
|
||||
:style="{
|
||||
width: Number(size) + 10 + 'px',
|
||||
height: Number(size) + 10 + 'px',
|
||||
}"
|
||||
:style="avatarFrameStyle"
|
||||
class="avatar-frame"
|
||||
/>
|
||||
<image
|
||||
@@ -78,13 +96,8 @@ watch(
|
||||
<view v-if="rank > 3" class="rank-view">{{ rank }}</view>
|
||||
<image
|
||||
:src="src || '../static/user-icon.png'"
|
||||
mode="widthFix"
|
||||
:style="{
|
||||
width: size + 'px',
|
||||
height: size + 'px',
|
||||
minHeight: size + 'px',
|
||||
borderColor: borderColor || '#fff',
|
||||
}"
|
||||
:mode="imageMode"
|
||||
:style="avatarImageStyle"
|
||||
class="avatar-image"
|
||||
/>
|
||||
</view>
|
||||
|
||||
@@ -41,6 +41,10 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
headerClass: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
showBottom: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
@@ -152,6 +156,7 @@ const goCalibration = async () => {
|
||||
<AppBackground :type="bgType" :bgColor="bgColor" />
|
||||
<Header
|
||||
v-if="!isHome"
|
||||
:class="headerClass"
|
||||
:title="title"
|
||||
:onBack="onBack"
|
||||
:whiteBackArrow="whiteBackArrow"
|
||||
|
||||
535
src/components/TargetCanvas.vue
Normal file
535
src/components/TargetCanvas.vue
Normal file
@@ -0,0 +1,535 @@
|
||||
<script setup>
|
||||
import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from "vue";
|
||||
|
||||
const defaultCanvasSize = 300;
|
||||
const defaultRingCount = 10;
|
||||
|
||||
const props = defineProps({
|
||||
// canvas 唯一标识；不传时组件内部自动生成，避免多个靶面 canvas-id 冲突。
|
||||
canvasId: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
// 业务坐标半径，例如 20 表示命中点坐标范围为 -20 到 20。
|
||||
// 当前组件主要用它参与重绘判断，外层命中点定位也应使用同一半径。
|
||||
coordinateRadius: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
// 是否显示靶心十字辅助线。
|
||||
showCrosshair: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否显示象限文字。
|
||||
showQuadrantLabels: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否显示环数文字。
|
||||
showRingLabels: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 象限文字配置，key 为 1/2/3/4。
|
||||
quadrantLabels: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
1: "1",
|
||||
2: "2",
|
||||
3: "3",
|
||||
4: "4",
|
||||
}),
|
||||
},
|
||||
// 高亮区域数组。
|
||||
// quadrant: 1/2/3/4，表示第几个象限。
|
||||
// rings: "all" 或环数数组，例如 [7, 8, 9, 10]。
|
||||
// scope: "box" 表示整象限矩形，"sector" 表示环形扇区。
|
||||
// style: 可覆盖高亮填充色、描边色、线宽比例。
|
||||
highlightAreas: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 只绘制透明高亮层，不绘制完整靶纸；用于叠加在靶纸图片上。
|
||||
highlightOnly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 外部指定 canvas 绘制尺寸；用于让高亮层跟随靶图真实显示区域。
|
||||
canvasWidth: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
canvasHeight: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
// 靶纸样式覆盖配置，例如环数、环色、环线颜色、环数字体等。
|
||||
targetStyleConfig: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
// 十字辅助线样式覆盖配置。
|
||||
crosshairStyle: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
// 象限文字样式覆盖配置。
|
||||
quadrantLabelStyle: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
const localCanvasId = `target-canvas-${Math.random().toString(36).slice(2, 10)}`;
|
||||
const currentCanvasId = computed(() => props.canvasId || localCanvasId);
|
||||
const lastDrawKey = ref("");
|
||||
const canvasSize = ref({
|
||||
width: defaultCanvasSize,
|
||||
height: defaultCanvasSize,
|
||||
});
|
||||
|
||||
// 完整靶纸默认样式，调用方可以通过 targetStyleConfig 局部覆盖。
|
||||
const defaultTargetStyleConfig = {
|
||||
ringCount: defaultRingCount,
|
||||
ringColors: {
|
||||
1: "#f8f8f3",
|
||||
2: "#f8f8f3",
|
||||
3: "#595959",
|
||||
4: "#595959",
|
||||
5: "#24aee0",
|
||||
6: "#24aee0",
|
||||
7: "#ff1f35",
|
||||
8: "#ff1f35",
|
||||
9: "#f7d34a",
|
||||
10: "#f7d34a",
|
||||
},
|
||||
ringLineColor: "rgba(150, 150, 150, 0.55)",
|
||||
ringLineWidthRatio: 0.0022,
|
||||
centerDotColor: "#ffffff",
|
||||
centerDotRadiusRatio: 0.0048,
|
||||
ringLabelFontRatio: 0.032,
|
||||
ringLabelDarkColor: "#111111",
|
||||
ringLabelLightColor: "#ffffff",
|
||||
};
|
||||
|
||||
// 十字辅助线默认样式。
|
||||
const defaultCrosshairStyle = {
|
||||
color: "rgba(20, 20, 20, 0.38)",
|
||||
lineWidthRatio: 0.0025,
|
||||
};
|
||||
|
||||
// 象限文字默认样式。
|
||||
const defaultQuadrantLabelStyle = {
|
||||
color: "#ffffff",
|
||||
fontSizeRatio: 0.045,
|
||||
offsetRatio: 0.78,
|
||||
};
|
||||
|
||||
// 高亮区域默认样式。
|
||||
const defaultHighlightStyle = {
|
||||
color: "rgba(254, 216, 71, 0.34)",
|
||||
strokeColor: "rgba(254, 216, 71, 0.82)",
|
||||
lineWidthRatio: 0.003,
|
||||
};
|
||||
|
||||
// 合并默认靶纸样式和外部传入样式，ringColors 单独深合并。
|
||||
const mergeTargetStyleConfig = () => ({
|
||||
...defaultTargetStyleConfig,
|
||||
...props.targetStyleConfig,
|
||||
ringColors: {
|
||||
...defaultTargetStyleConfig.ringColors,
|
||||
...(props.targetStyleConfig?.ringColors || {}),
|
||||
},
|
||||
});
|
||||
|
||||
// 统一把外部传入值转成有效数字，非法值使用 fallback。
|
||||
const getNumber = (value, fallback = 0) => {
|
||||
const numberValue = Number(value);
|
||||
return Number.isFinite(numberValue) ? numberValue : fallback;
|
||||
};
|
||||
|
||||
// 获取指定环数的填充色，兼容数字 key 和字符串 key。
|
||||
const getRingColor = (ring, config) => {
|
||||
return config.ringColors?.[ring] || config.ringColors?.[String(ring)] || "#ffffff";
|
||||
};
|
||||
|
||||
// 规范化高亮环数配置；"all" 表示全部环，数组或单值会过滤非法环数。
|
||||
const normalizeRings = (rings, ringCount) => {
|
||||
if (rings === "all") {
|
||||
return "all";
|
||||
}
|
||||
|
||||
const rawRings = Array.isArray(rings) ? rings : [rings];
|
||||
return rawRings
|
||||
.map((ring) => Number(ring))
|
||||
.filter((ring) => Number.isInteger(ring) && ring >= 1 && ring <= ringCount);
|
||||
};
|
||||
|
||||
// 获取象限对应的扇形弧度范围。
|
||||
const getQuadrantAngles = (quadrant) => {
|
||||
const angleMap = {
|
||||
1: [Math.PI, Math.PI * 1.5],
|
||||
2: [Math.PI * 1.5, Math.PI * 2],
|
||||
3: [Math.PI * 0.5, Math.PI],
|
||||
4: [0, Math.PI * 0.5],
|
||||
};
|
||||
|
||||
return angleMap[Number(quadrant)] || null;
|
||||
};
|
||||
|
||||
// 获取象限对应的矩形区域，用于整象限高亮。
|
||||
const getQuadrantBox = (quadrant, centerX, centerY, radius) => {
|
||||
const boxMap = {
|
||||
1: [centerX - radius, centerY - radius, radius, radius],
|
||||
2: [centerX, centerY - radius, radius, radius],
|
||||
3: [centerX - radius, centerY, radius, radius],
|
||||
4: [centerX, centerY, radius, radius],
|
||||
};
|
||||
|
||||
return boxMap[Number(quadrant)] || null;
|
||||
};
|
||||
|
||||
// 绘制实心圆，靶纸环区和中心点都会用到。
|
||||
const drawCircle = (ctx, centerX, centerY, radius, fillColor) => {
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
|
||||
ctx.setFillStyle(fillColor);
|
||||
ctx.fill();
|
||||
};
|
||||
|
||||
// 绘制环形扇区，用于按象限高亮指定环数。
|
||||
const drawAnnularSector = (
|
||||
ctx,
|
||||
centerX,
|
||||
centerY,
|
||||
innerRadius,
|
||||
outerRadius,
|
||||
startAngle,
|
||||
endAngle,
|
||||
fillColor,
|
||||
strokeColor = "",
|
||||
lineWidth = 0
|
||||
) => {
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, outerRadius, startAngle, endAngle);
|
||||
|
||||
if (innerRadius > 0) {
|
||||
ctx.arc(centerX, centerY, innerRadius, endAngle, startAngle, true);
|
||||
} else {
|
||||
ctx.lineTo(centerX, centerY);
|
||||
}
|
||||
|
||||
ctx.closePath();
|
||||
ctx.setFillStyle(fillColor);
|
||||
ctx.fill();
|
||||
|
||||
if (strokeColor && lineWidth > 0) {
|
||||
ctx.setStrokeStyle(strokeColor);
|
||||
ctx.setLineWidth(lineWidth);
|
||||
ctx.stroke();
|
||||
}
|
||||
};
|
||||
|
||||
// 从外到内绘制完整靶纸色环。
|
||||
const drawTargetRings = (ctx, centerX, centerY, targetRadius, config) => {
|
||||
for (let ring = 1; ring <= config.ringCount; ring += 1) {
|
||||
const radius = targetRadius * ((config.ringCount + 1 - ring) / config.ringCount);
|
||||
drawCircle(ctx, centerX, centerY, radius, getRingColor(ring, config));
|
||||
}
|
||||
};
|
||||
|
||||
// 绘制所有高亮区域，支持整象限矩形高亮和指定环数扇区高亮。
|
||||
const drawHighlights = (ctx, centerX, centerY, targetRadius, config) => {
|
||||
props.highlightAreas.forEach((area = {}) => {
|
||||
const angles = getQuadrantAngles(area.quadrant);
|
||||
|
||||
if (!angles) {
|
||||
return;
|
||||
}
|
||||
|
||||
const highlightStyle = {
|
||||
...defaultHighlightStyle,
|
||||
...(area.style || {}),
|
||||
};
|
||||
const highlightLineWidth = Math.max(1, targetRadius * highlightStyle.lineWidthRatio);
|
||||
const rings = normalizeRings(area.rings || "all", config.ringCount);
|
||||
const scope = area.scope || (rings === "all" ? "box" : "sector");
|
||||
|
||||
// 整象限默认画成矩形高亮，便于对应 1/2/3/4 号框训练提示。
|
||||
if (rings === "all" && scope === "box") {
|
||||
const box = getQuadrantBox(area.quadrant, centerX, centerY, targetRadius);
|
||||
if (!box) return;
|
||||
ctx.beginPath();
|
||||
ctx.rect(...box);
|
||||
ctx.setFillStyle(highlightStyle.color);
|
||||
ctx.fill();
|
||||
ctx.setStrokeStyle(highlightStyle.strokeColor);
|
||||
ctx.setLineWidth(highlightLineWidth);
|
||||
ctx.stroke();
|
||||
return;
|
||||
}
|
||||
|
||||
const targetRings = rings === "all"
|
||||
? Array.from({ length: config.ringCount }, (_, index) => index + 1)
|
||||
: rings;
|
||||
|
||||
targetRings.forEach((ring) => {
|
||||
const innerRadius = targetRadius * ((config.ringCount - ring) / config.ringCount);
|
||||
const outerRadius = targetRadius * ((config.ringCount + 1 - ring) / config.ringCount);
|
||||
drawAnnularSector(
|
||||
ctx,
|
||||
centerX,
|
||||
centerY,
|
||||
innerRadius,
|
||||
outerRadius,
|
||||
angles[0],
|
||||
angles[1],
|
||||
highlightStyle.color,
|
||||
highlightStyle.strokeColor,
|
||||
highlightLineWidth
|
||||
);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 绘制各环之间的分割线。
|
||||
const drawRingLines = (ctx, centerX, centerY, targetRadius, config) => {
|
||||
const lineWidth = Math.max(1, targetRadius * config.ringLineWidthRatio);
|
||||
|
||||
ctx.setStrokeStyle(config.ringLineColor);
|
||||
ctx.setLineWidth(lineWidth);
|
||||
|
||||
for (let index = 1; index <= config.ringCount; index += 1) {
|
||||
const radius = targetRadius * (index / config.ringCount);
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
}
|
||||
};
|
||||
|
||||
// 绘制靶心十字辅助线。
|
||||
const drawCrosshair = (ctx, centerX, centerY, targetRadius) => {
|
||||
if (!props.showCrosshair) {
|
||||
return;
|
||||
}
|
||||
|
||||
const style = {
|
||||
...defaultCrosshairStyle,
|
||||
...props.crosshairStyle,
|
||||
};
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(centerX - targetRadius, centerY);
|
||||
ctx.lineTo(centerX + targetRadius, centerY);
|
||||
ctx.moveTo(centerX, centerY - targetRadius);
|
||||
ctx.lineTo(centerX, centerY + targetRadius);
|
||||
ctx.setStrokeStyle(style.color);
|
||||
ctx.setLineWidth(Math.max(1, targetRadius * style.lineWidthRatio));
|
||||
ctx.stroke();
|
||||
};
|
||||
|
||||
// 绘制环数文字。
|
||||
const drawRingLabels = (ctx, centerX, centerY, targetRadius, config) => {
|
||||
if (!props.showRingLabels) {
|
||||
return;
|
||||
}
|
||||
|
||||
const ringWidth = targetRadius / config.ringCount;
|
||||
const fontSize = Math.max(10, targetRadius * config.ringLabelFontRatio);
|
||||
|
||||
ctx.setFontSize(fontSize);
|
||||
ctx.setTextAlign("center");
|
||||
ctx.setTextBaseline("middle");
|
||||
|
||||
for (let ring = config.ringCount; ring >= 1; ring -= 1) {
|
||||
const y = centerY + (config.ringCount - ring + 0.45) * ringWidth;
|
||||
const color = ring <= 2 ? config.ringLabelDarkColor : config.ringLabelLightColor;
|
||||
ctx.setFillStyle(color);
|
||||
ctx.fillText(String(ring), centerX, y);
|
||||
}
|
||||
};
|
||||
|
||||
// 绘制象限文字。
|
||||
const drawQuadrantLabels = (ctx, centerX, centerY, targetRadius) => {
|
||||
if (!props.showQuadrantLabels) {
|
||||
return;
|
||||
}
|
||||
|
||||
const style = {
|
||||
...defaultQuadrantLabelStyle,
|
||||
...props.quadrantLabelStyle,
|
||||
};
|
||||
const offset = targetRadius * style.offsetRatio;
|
||||
const positions = {
|
||||
1: [centerX - offset, centerY - offset],
|
||||
2: [centerX + offset, centerY - offset],
|
||||
3: [centerX - offset, centerY + offset],
|
||||
4: [centerX + offset, centerY + offset],
|
||||
};
|
||||
|
||||
ctx.setFontSize(Math.max(12, targetRadius * style.fontSizeRatio));
|
||||
ctx.setTextAlign("center");
|
||||
ctx.setTextBaseline("middle");
|
||||
ctx.setFillStyle(style.color);
|
||||
|
||||
Object.entries(positions).forEach(([key, position]) => {
|
||||
const label = props.quadrantLabels?.[key] || props.quadrantLabels?.[Number(key)];
|
||||
if (label === undefined || label === null || label === "") return;
|
||||
ctx.fillText(String(label), position[0], position[1]);
|
||||
});
|
||||
};
|
||||
|
||||
// 生成高亮区域的绘制 key，只保留真正影响画面的字段。
|
||||
const getHighlightDrawKeyAreas = () => {
|
||||
return props.highlightAreas.map((area = {}) => ({
|
||||
quadrant: area.quadrant,
|
||||
rings: area.rings,
|
||||
scope: area.scope,
|
||||
style: area.style,
|
||||
}));
|
||||
};
|
||||
|
||||
// 生成本次绘制状态的唯一 key，用于避免相同内容重复 draw。
|
||||
const getDrawKey = (width, height) => {
|
||||
return JSON.stringify({
|
||||
width,
|
||||
height,
|
||||
coordinateRadius: props.coordinateRadius,
|
||||
showCrosshair: props.showCrosshair,
|
||||
showQuadrantLabels: props.showQuadrantLabels,
|
||||
showRingLabels: props.showRingLabels,
|
||||
highlightAreas: getHighlightDrawKeyAreas(),
|
||||
targetStyleConfig: props.targetStyleConfig,
|
||||
crosshairStyle: props.crosshairStyle,
|
||||
quadrantLabelStyle: props.quadrantLabelStyle,
|
||||
highlightOnly: props.highlightOnly,
|
||||
});
|
||||
};
|
||||
|
||||
// 主绘制入口：根据 highlightOnly 决定画完整靶纸，还是只画透明高亮层。
|
||||
const drawTarget = () => {
|
||||
const width = Math.max(getNumber(canvasSize.value.width, defaultCanvasSize), 1);
|
||||
const height = Math.max(getNumber(canvasSize.value.height, defaultCanvasSize), 1);
|
||||
const drawKey = getDrawKey(width, height);
|
||||
|
||||
if (drawKey === lastDrawKey.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const size = Math.min(width, height);
|
||||
const centerX = width / 2;
|
||||
const centerY = height / 2;
|
||||
const targetRadius = size / 2;
|
||||
const config = mergeTargetStyleConfig();
|
||||
const ctx = uni.createCanvasContext(currentCanvasId.value, instance?.proxy);
|
||||
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
if (!props.highlightOnly) {
|
||||
drawTargetRings(ctx, centerX, centerY, targetRadius, config);
|
||||
}
|
||||
|
||||
drawHighlights(ctx, centerX, centerY, targetRadius, config);
|
||||
|
||||
if (!props.highlightOnly) {
|
||||
drawRingLines(ctx, centerX, centerY, targetRadius, config);
|
||||
drawCircle(
|
||||
ctx,
|
||||
centerX,
|
||||
centerY,
|
||||
Math.max(1, targetRadius * config.centerDotRadiusRatio),
|
||||
config.centerDotColor
|
||||
);
|
||||
drawCrosshair(ctx, centerX, centerY, targetRadius);
|
||||
drawRingLabels(ctx, centerX, centerY, targetRadius, config);
|
||||
drawQuadrantLabels(ctx, centerX, centerY, targetRadius);
|
||||
}
|
||||
|
||||
ctx.draw();
|
||||
lastDrawKey.value = drawKey;
|
||||
};
|
||||
|
||||
const setCanvasSizeAndDraw = async (width, height) => {
|
||||
canvasSize.value = {
|
||||
width: width > 0 ? width : defaultCanvasSize,
|
||||
height: height > 0 ? height : width || defaultCanvasSize,
|
||||
};
|
||||
|
||||
await nextTick();
|
||||
drawTarget();
|
||||
};
|
||||
|
||||
// 读取 canvas 实际渲染尺寸后再绘制，保证小程序真机尺寸和坐标一致。
|
||||
const measureAndDraw = () => {
|
||||
const propWidth = Math.round(getNumber(props.canvasWidth, 0));
|
||||
const propHeight = Math.round(getNumber(props.canvasHeight, 0));
|
||||
|
||||
if (propWidth > 0 && propHeight > 0) {
|
||||
setCanvasSizeAndDraw(propWidth, propHeight);
|
||||
return;
|
||||
}
|
||||
|
||||
const query = uni.createSelectorQuery().in(instance?.proxy);
|
||||
|
||||
query
|
||||
.select(`#${currentCanvasId.value}`)
|
||||
.boundingClientRect(async (rect) => {
|
||||
const width = Math.round(getNumber(rect?.width, defaultCanvasSize));
|
||||
const height = Math.round(getNumber(rect?.height, width || defaultCanvasSize));
|
||||
|
||||
await setCanvasSizeAndDraw(width, height);
|
||||
})
|
||||
.exec();
|
||||
};
|
||||
|
||||
// 等待 Vue 完成 DOM 更新后重新测量和绘制。
|
||||
const scheduleDraw = async () => {
|
||||
await nextTick();
|
||||
measureAndDraw();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => [
|
||||
props.coordinateRadius,
|
||||
props.showCrosshair,
|
||||
props.showQuadrantLabels,
|
||||
props.showRingLabels,
|
||||
props.highlightAreas,
|
||||
props.highlightOnly,
|
||||
props.canvasWidth,
|
||||
props.canvasHeight,
|
||||
props.quadrantLabels,
|
||||
props.targetStyleConfig,
|
||||
props.crosshairStyle,
|
||||
props.quadrantLabelStyle,
|
||||
],
|
||||
scheduleDraw,
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(measureAndDraw, 30);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas
|
||||
:id="currentCanvasId"
|
||||
class="target-canvas"
|
||||
:canvas-id="currentCanvasId"
|
||||
:width="canvasSize.width"
|
||||
:height="canvasSize.height"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.target-canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,15 @@
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
|
||||
import {
|
||||
computed,
|
||||
getCurrentInstance,
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
ref,
|
||||
watch,
|
||||
} from "vue";
|
||||
import PointSwitcher from "@/components/PointSwitcher.vue";
|
||||
import TargetCanvas from "@/components/TargetCanvas.vue";
|
||||
|
||||
import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
|
||||
import { simulShootAPI } from "@/apis";
|
||||
@@ -8,6 +17,7 @@ import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
const store = useStore();
|
||||
const { user, device } = storeToRefs(store);
|
||||
const instance = getCurrentInstance();
|
||||
|
||||
const props = defineProps({
|
||||
currentRound: {
|
||||
@@ -34,6 +44,39 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
coordinateRadius: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
hitRadiusPx: {
|
||||
type: Number,
|
||||
default: 2,
|
||||
},
|
||||
zoomHitRadiusPx: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
showCrosshair: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showQuadrantLabels: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
quadrantLabels: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
1: "1",
|
||||
2: "2",
|
||||
3: "3",
|
||||
4: "4",
|
||||
}),
|
||||
},
|
||||
highlightAreas: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const pMode = ref(true);
|
||||
@@ -45,6 +88,100 @@ const timer = ref(null);
|
||||
const dirTimer = ref(null);
|
||||
const angle = ref(null);
|
||||
const circleColor = ref("");
|
||||
const ROUND_TIP_OFFSET_Y = -32;
|
||||
const EXPERIENCE_TIP_OFFSET_Y = -68;
|
||||
|
||||
const getNumber = (value, fallback = 0) => {
|
||||
const numberValue = Number(value);
|
||||
return Number.isFinite(numberValue) ? numberValue : fallback;
|
||||
};
|
||||
|
||||
const safeTargetRadius = computed(() => {
|
||||
return Math.max(getNumber(props.coordinateRadius, 20), 1);
|
||||
});
|
||||
|
||||
const currentHitRadiusPx = computed(() => {
|
||||
const radius = Number(
|
||||
pMode.value ? props.zoomHitRadiusPx : props.hitRadiusPx
|
||||
);
|
||||
return Number.isFinite(radius) && radius >= 0 ? radius : 0;
|
||||
});
|
||||
|
||||
function getShotPoint(shot, fallbackCenter = false) {
|
||||
const x = Number(shot?.x);
|
||||
const y = Number(shot?.y);
|
||||
if (Number.isFinite(x) && Number.isFinite(y)) return { x, y };
|
||||
return fallbackCenter ? { x: 0, y: 0 } : null;
|
||||
}
|
||||
|
||||
function getPointDirection(point) {
|
||||
if (!point) return null;
|
||||
const distance = Math.sqrt(point.x * point.x + point.y * point.y);
|
||||
if (distance === 0) return null;
|
||||
|
||||
return {
|
||||
x: point.x / distance,
|
||||
y: point.y / distance,
|
||||
};
|
||||
}
|
||||
|
||||
function formatPxOffset(value) {
|
||||
if (!value) return "";
|
||||
const operator = value > 0 ? "+" : "-";
|
||||
return ` ${operator} ${Math.abs(value)}px`;
|
||||
}
|
||||
|
||||
function formatTargetPosition(percent, offset) {
|
||||
const pxOffset = formatPxOffset(offset);
|
||||
return pxOffset ? `calc(${percent}%${pxOffset})` : `${percent}%`;
|
||||
}
|
||||
|
||||
function getTargetPositionStyle(point, offsetPx = 0, extraOffset = {}) {
|
||||
if (!point) return { display: "none" };
|
||||
|
||||
const radius = safeTargetRadius.value;
|
||||
const diameter = radius * 2;
|
||||
const direction = getPointDirection(point);
|
||||
const xOffset = (direction ? direction.x * offsetPx : 0) + (extraOffset.x || 0);
|
||||
const yOffset = (direction ? -direction.y * offsetPx : 0) + (extraOffset.y || 0);
|
||||
const leftPercent = ((point.x + radius) / diameter) * 100;
|
||||
const topPercent = ((radius - point.y) / diameter) * 100;
|
||||
|
||||
return {
|
||||
left: formatTargetPosition(leftPercent, xOffset),
|
||||
top: formatTargetPosition(topPercent, yOffset),
|
||||
transform: "translate(-50%, -50%)",
|
||||
};
|
||||
}
|
||||
|
||||
function getHitStyle(shot) {
|
||||
const radius = currentHitRadiusPx.value;
|
||||
const point = getShotPoint(shot);
|
||||
|
||||
return {
|
||||
...getTargetPositionStyle(point, radius),
|
||||
width: `${radius * 2}px`,
|
||||
height: `${radius * 2}px`,
|
||||
};
|
||||
}
|
||||
|
||||
function getRoundTipStyle(shot) {
|
||||
const point = getShotPoint(shot, true);
|
||||
return getTargetPositionStyle(
|
||||
point,
|
||||
shot?.ring ? currentHitRadiusPx.value : 0,
|
||||
{ y: ROUND_TIP_OFFSET_Y }
|
||||
);
|
||||
}
|
||||
|
||||
function getExperienceTipStyle(shot) {
|
||||
const point = getShotPoint(shot, true);
|
||||
return getTargetPositionStyle(
|
||||
point,
|
||||
shot?.ring ? currentHitRadiusPx.value : 0,
|
||||
{ y: EXPERIENCE_TIP_OFFSET_Y }
|
||||
);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.scores,
|
||||
@@ -80,14 +217,6 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
function calcRealX(num, offset = 3.4) {
|
||||
const len = 20.4 + num;
|
||||
return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
|
||||
}
|
||||
function calcRealY(num, offset = 3.4) {
|
||||
const len = num < 0 ? Math.abs(num) + 20.4 : 20.4 - num;
|
||||
return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
|
||||
}
|
||||
const simulShoot = async () => {
|
||||
if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
|
||||
};
|
||||
@@ -111,6 +240,160 @@ const arrowStyle = computed(() => {
|
||||
};
|
||||
});
|
||||
|
||||
const currentArrowIndex = computed(() => {
|
||||
return props.scores.length + props.blueScores.length + 1;
|
||||
});
|
||||
|
||||
const getHighlightArrowIndex = (area = {}) => {
|
||||
const arrowIndex = Number(area.arrowIndex ?? area.arrowNo ?? area.arrow);
|
||||
return Number.isInteger(arrowIndex) && arrowIndex > 0 ? arrowIndex : null;
|
||||
};
|
||||
|
||||
const currentHighlightAreas = computed(() => {
|
||||
if (!Array.isArray(props.highlightAreas) || props.highlightAreas.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const hasExplicitArrowIndex = props.highlightAreas.some((area = {}) => {
|
||||
return getHighlightArrowIndex(area) !== null;
|
||||
});
|
||||
|
||||
const matchedAreas = props.highlightAreas.filter((area = {}) => {
|
||||
return getHighlightArrowIndex(area) === currentArrowIndex.value;
|
||||
});
|
||||
|
||||
if (hasExplicitArrowIndex) {
|
||||
return matchedAreas;
|
||||
}
|
||||
|
||||
if (props.highlightAreas.length === 1) {
|
||||
return props.highlightAreas.slice(0, 1);
|
||||
}
|
||||
|
||||
const currentArea = props.highlightAreas[currentArrowIndex.value - 1];
|
||||
return currentArea ? [currentArea] : [];
|
||||
});
|
||||
|
||||
const showHighlightCanvas = computed(() => {
|
||||
return props.totalRound > 0 && currentHighlightAreas.value.length > 0;
|
||||
});
|
||||
|
||||
const targetImageNaturalSize = ref({
|
||||
width: 0,
|
||||
height: 0,
|
||||
});
|
||||
|
||||
const targetLayerRect = ref({
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
ready: false,
|
||||
});
|
||||
|
||||
const targetHighlightLayerStyle = computed(() => ({
|
||||
left: `${targetLayerRect.value.left}px`,
|
||||
top: `${targetLayerRect.value.top}px`,
|
||||
width: `${targetLayerRect.value.width}px`,
|
||||
height: `${targetLayerRect.value.height}px`,
|
||||
}));
|
||||
|
||||
const getRectNumber = (value, fallback = 0) => {
|
||||
const numberValue = Number(value);
|
||||
return Number.isFinite(numberValue) ? numberValue : fallback;
|
||||
};
|
||||
|
||||
const getImageContentRect = (imageRect) => {
|
||||
const naturalWidth = getRectNumber(targetImageNaturalSize.value.width);
|
||||
const naturalHeight = getRectNumber(targetImageNaturalSize.value.height);
|
||||
const imageWidth = getRectNumber(imageRect?.width);
|
||||
const imageHeight = getRectNumber(imageRect?.height);
|
||||
|
||||
if (naturalWidth <= 0 || naturalHeight <= 0 || imageWidth <= 0 || imageHeight <= 0) {
|
||||
return imageRect;
|
||||
}
|
||||
|
||||
const naturalRatio = naturalWidth / naturalHeight;
|
||||
const boxRatio = imageWidth / imageHeight;
|
||||
|
||||
if (naturalRatio > boxRatio) {
|
||||
const contentHeight = imageWidth / naturalRatio;
|
||||
return {
|
||||
left: imageRect.left,
|
||||
top: imageRect.top + (imageHeight - contentHeight) / 2,
|
||||
width: imageWidth,
|
||||
height: contentHeight,
|
||||
};
|
||||
}
|
||||
|
||||
const contentWidth = imageHeight * naturalRatio;
|
||||
return {
|
||||
left: imageRect.left + (imageWidth - contentWidth) / 2,
|
||||
top: imageRect.top,
|
||||
width: contentWidth,
|
||||
height: imageHeight,
|
||||
};
|
||||
};
|
||||
|
||||
const updateTargetLayerRect = async () => {
|
||||
await nextTick();
|
||||
|
||||
const query = uni.createSelectorQuery().in(instance?.proxy);
|
||||
query.select(".target").boundingClientRect();
|
||||
query.select(".target-image").boundingClientRect();
|
||||
query.exec((rects = []) => {
|
||||
const stageRect = rects[0];
|
||||
const imageRect = rects[1];
|
||||
|
||||
if (!stageRect || !imageRect || !imageRect.width || !imageRect.height) {
|
||||
targetLayerRect.value = {
|
||||
...targetLayerRect.value,
|
||||
ready: false,
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
const contentRect = getImageContentRect(imageRect);
|
||||
const width = Math.round(getRectNumber(contentRect?.width));
|
||||
const height = Math.round(getRectNumber(contentRect?.height));
|
||||
|
||||
targetLayerRect.value = {
|
||||
left: getRectNumber(contentRect?.left) - getRectNumber(stageRect.left),
|
||||
top: getRectNumber(contentRect?.top) - getRectNumber(stageRect.top),
|
||||
width,
|
||||
height,
|
||||
ready: width > 0 && height > 0,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const onTargetImageLoad = (event) => {
|
||||
const width = getRectNumber(event?.detail?.width);
|
||||
const height = getRectNumber(event?.detail?.height);
|
||||
|
||||
if (width > 0 && height > 0) {
|
||||
targetImageNaturalSize.value = {
|
||||
width,
|
||||
height,
|
||||
};
|
||||
}
|
||||
|
||||
updateTargetLayerRect();
|
||||
};
|
||||
|
||||
const onWindowResize = () => {
|
||||
updateTargetLayerRect();
|
||||
};
|
||||
|
||||
watch(
|
||||
showHighlightCanvas,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
updateTargetLayerRect();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
async function onReceiveMessage(message) {
|
||||
if (Array.isArray(message)) return;
|
||||
if (message.type === MESSAGETYPESV2.ShootResult && message.shootData) {
|
||||
@@ -135,6 +418,10 @@ async function onReceiveMessage(message) {
|
||||
|
||||
onMounted(() => {
|
||||
uni.$on("socket-inbox", onReceiveMessage);
|
||||
setTimeout(updateTargetLayerRect, 30);
|
||||
if (uni.onWindowResize) {
|
||||
uni.onWindowResize(onWindowResize);
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
@@ -147,6 +434,9 @@ onBeforeUnmount(() => {
|
||||
dirTimer.value = null;
|
||||
}
|
||||
uni.$off("socket-inbox", onReceiveMessage);
|
||||
if (uni.offWindowResize) {
|
||||
uni.offWindowResize(onWindowResize);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -160,6 +450,25 @@ onBeforeUnmount(() => {
|
||||
}}</text>
|
||||
</view> -->
|
||||
<view class="target">
|
||||
<image
|
||||
class="target-image"
|
||||
src="../../../static/bow-target.png"
|
||||
mode="aspectFit"
|
||||
@load="onTargetImageLoad"
|
||||
/>
|
||||
<TargetCanvas
|
||||
v-if="showHighlightCanvas && targetLayerRect.ready"
|
||||
class="target-highlight-layer"
|
||||
:style="targetHighlightLayerStyle"
|
||||
:canvasWidth="targetLayerRect.width"
|
||||
:canvasHeight="targetLayerRect.height"
|
||||
:coordinateRadius="coordinateRadius"
|
||||
:showCrosshair="false"
|
||||
:showQuadrantLabels="false"
|
||||
:showRingLabels="false"
|
||||
:highlightOnly="true"
|
||||
:highlightAreas="currentHighlightAreas"
|
||||
/>
|
||||
<view v-if="angle !== null" class="arrow-dir" :style="arrowStyle">
|
||||
<view :style="{ background: circleColor }">
|
||||
<image src="../../../static/dot-circle.png" mode="widthFix" />
|
||||
@@ -169,20 +478,14 @@ onBeforeUnmount(() => {
|
||||
<view
|
||||
v-if="latestOne && latestOne.ring && user.id === latestOne.playerId"
|
||||
class="e-value fade-in-out"
|
||||
:style="{
|
||||
left: calcRealX(latestOne.ring ? latestOne.x : 0, 20),
|
||||
top: calcRealY(latestOne.ring ? latestOne.y : 0, 40),
|
||||
}"
|
||||
:style="getExperienceTipStyle(latestOne)"
|
||||
>
|
||||
经验 +1
|
||||
</view>
|
||||
<view
|
||||
v-if="latestOne"
|
||||
class="round-tip fade-in-out"
|
||||
:style="{
|
||||
left: calcRealX(latestOne.ring ? latestOne.x : 0, 28),
|
||||
top: calcRealY(latestOne.ring ? latestOne.y : 0, 28),
|
||||
}"
|
||||
:style="getRoundTipStyle(latestOne)"
|
||||
>{{ latestOne.ringX ? "X" : latestOne.ring || "未上靶"
|
||||
}}<text v-if="latestOne.ring">环</text>
|
||||
</view>
|
||||
@@ -193,20 +496,14 @@ onBeforeUnmount(() => {
|
||||
user.id === bluelatestOne.playerId
|
||||
"
|
||||
class="e-value fade-in-out"
|
||||
:style="{
|
||||
left: calcRealX(bluelatestOne.ring ? bluelatestOne.x : 0, 20),
|
||||
top: calcRealY(bluelatestOne.ring ? bluelatestOne.y : 0, 40),
|
||||
}"
|
||||
:style="getExperienceTipStyle(bluelatestOne)"
|
||||
>
|
||||
经验 +1
|
||||
</view>
|
||||
<view
|
||||
v-if="bluelatestOne"
|
||||
class="round-tip fade-in-out"
|
||||
:style="{
|
||||
left: calcRealX(bluelatestOne.ring ? bluelatestOne.x : 0, 28),
|
||||
top: calcRealY(bluelatestOne.ring ? bluelatestOne.y : 0, 28),
|
||||
}"
|
||||
:style="getRoundTipStyle(bluelatestOne)"
|
||||
>{{ bluelatestOne.ringX ? "X" : bluelatestOne.ring || "未上靶"
|
||||
}}<text v-if="bluelatestOne.ring">环</text></view
|
||||
>
|
||||
@@ -217,8 +514,7 @@ onBeforeUnmount(() => {
|
||||
index === scores.length - 1 && latestOne ? 'pump-in' : ''
|
||||
}`"
|
||||
:style="{
|
||||
left: calcRealX(bow.x, pMode ? '3.4' : '2'),
|
||||
top: calcRealY(bow.y, pMode ? '3.4' : '2'),
|
||||
...getHitStyle(bow),
|
||||
backgroundColor: mode === 'solo' ? '#00bf04' : '#FF0000',
|
||||
}"
|
||||
><text v-if="pMode">{{ index + 1 }}</text></view
|
||||
@@ -231,15 +527,13 @@ onBeforeUnmount(() => {
|
||||
index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
|
||||
}`"
|
||||
:style="{
|
||||
left: calcRealX(bow.x, pMode ? '3.4' : '2'),
|
||||
top: calcRealY(bow.y, pMode ? '3.4' : '2'),
|
||||
...getHitStyle(bow),
|
||||
backgroundColor: '#1840FF',
|
||||
}"
|
||||
>
|
||||
<text v-if="pMode">{{ index + 1 }}</text>
|
||||
</view>
|
||||
</block>
|
||||
<image src="../../../static/bow-target.png" mode="widthFix" />
|
||||
</view>
|
||||
<view class="footer">
|
||||
<PointSwitcher
|
||||
@@ -266,7 +560,21 @@ onBeforeUnmount(() => {
|
||||
margin: 10px;
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 20px);
|
||||
z-index: -1;
|
||||
z-index: 0;
|
||||
}
|
||||
.target-image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.target-highlight-layer {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
.e-value {
|
||||
position: absolute;
|
||||
@@ -275,7 +583,7 @@ onBeforeUnmount(() => {
|
||||
font-size: 12px;
|
||||
padding: 4px 7px;
|
||||
border-radius: 5px;
|
||||
z-index: 2;
|
||||
z-index: 4;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -284,7 +592,7 @@ onBeforeUnmount(() => {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
z-index: 2;
|
||||
z-index: 4;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -292,31 +600,44 @@ onBeforeUnmount(() => {
|
||||
font-size: 24px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.target > image:last-child {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@keyframes target-tip-fade-in-out {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.round-tip.fade-in-out,
|
||||
.e-value.fade-in-out {
|
||||
animation: target-tip-fade-in-out 1.2s ease forwards;
|
||||
}
|
||||
.hit {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
z-index: 3;
|
||||
color: #fff;
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.s-point {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
min-width: 4px;
|
||||
min-height: 4px;
|
||||
}
|
||||
.b-point {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
min-width: 10px;
|
||||
min-height: 10px;
|
||||
border: 1px solid #fff;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -332,6 +653,19 @@ onBeforeUnmount(() => {
|
||||
transform: translate(-50%, -50%);*/
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
@keyframes target-pump-in {
|
||||
from {
|
||||
transform: translate(-50%, -50%) scale(2);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
.hit.pump-in {
|
||||
animation: target-pump-in 0.3s ease-out forwards;
|
||||
transform-origin: center center;
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -382,7 +716,7 @@ onBeforeUnmount(() => {
|
||||
height: 60px;
|
||||
left: calc(50% - 100px);
|
||||
top: calc(50% - 30px);
|
||||
z-index: 99;
|
||||
z-index: 5;
|
||||
font-weight: bold;
|
||||
}
|
||||
.arrow-dir {
|
||||
@@ -391,6 +725,7 @@ onBeforeUnmount(() => {
|
||||
height: 52%;
|
||||
left: 50%;
|
||||
bottom: 50%;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
124
src/pages/training/components/ScorePanel.vue
Normal file
124
src/pages/training/components/ScorePanel.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
|
||||
const props = defineProps({
|
||||
rowCount: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
arrows: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
fontSize: {
|
||||
type: Number,
|
||||
default: 25,
|
||||
},
|
||||
completeEffect: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
const items = ref(new Array(props.total).fill(9));
|
||||
const width = ref(92);
|
||||
const itemWidth = ref(0);
|
||||
const bgImages = [
|
||||
"../static/complete-light1.png",
|
||||
"../static/complete-light2.png",
|
||||
];
|
||||
const bgIndex = ref(0);
|
||||
watch(
|
||||
() => props.total,
|
||||
(newValue) => {
|
||||
items.value = new Array(newValue).fill(9);
|
||||
}
|
||||
);
|
||||
const timer = ref(null);
|
||||
onMounted(() => {
|
||||
timer.value = setInterval(() => {
|
||||
bgIndex.value = bgIndex.value === 0 ? 1 : 0;
|
||||
}, 200);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
if (timer.value) {
|
||||
clearInterval(timer.value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<view class="container">
|
||||
<image
|
||||
v-if="total > 0 && arrows.length === total && completeEffect"
|
||||
:src="bgImages[bgIndex]"
|
||||
class="complete-light"
|
||||
:style="{
|
||||
width: `calc(${(100 / (rowCount + 2)) * rowCount}vw + ${
|
||||
(100 / (total * 2)) * (rowCount * 2 + (total === 12 ? 8 : 24))
|
||||
}px)`,
|
||||
height: `calc(${(100 / (rowCount + 2)) * (total / rowCount)}vw + ${
|
||||
(100 / (total * 2)) *
|
||||
((total / rowCount) * 2 + (total === 12 ? 7 : 24))
|
||||
}px)`,
|
||||
top: `${total === 12 ? -2 : -3}vw`,
|
||||
}"
|
||||
/>
|
||||
<view
|
||||
v-for="(_, index) in items"
|
||||
:key="index"
|
||||
class="score-item"
|
||||
:style="{
|
||||
width: 100 / (rowCount + 2) + 'vw',
|
||||
height: 100 / (rowCount + 2) + 'vw',
|
||||
lineHeight: 100 / (rowCount + 2) + 'vw',
|
||||
fontSize: fontSize + 'px',
|
||||
margin: 100 / (total * 2) + 'px',
|
||||
}"
|
||||
>
|
||||
<image src="/static/score-bg.png" mode="widthFix" />
|
||||
<text
|
||||
:style="{ fontWeight: arrows[index] !== undefined ? 'bold' : 'normal' }"
|
||||
>{{
|
||||
!arrows[index] ? "-" : arrows[index].ringX ? "X" : arrows[index].ring
|
||||
}}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 92vw;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: 0 4vw;
|
||||
position: relative;
|
||||
padding: 1vw 0;
|
||||
}
|
||||
.score-item {
|
||||
/* background-image: url("../static/score-bg.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center; */
|
||||
color: #fed847;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.score-item > image {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 5%;
|
||||
}
|
||||
.score-item > text {
|
||||
position: relative;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.complete-light {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
@@ -206,7 +206,12 @@ onBeforeUnmount(() => {
|
||||
<view class="progress-card__header">
|
||||
<view class="progress-card__profile">
|
||||
<view class="progress-card__avatar-shell">
|
||||
<Avatar :src="user.avatar" :size="40" />
|
||||
<Avatar
|
||||
:src="avatarSrc"
|
||||
:size="80"
|
||||
size-unit="rpx"
|
||||
image-mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
<text class="progress-card__name">{{ displayName }}</text>
|
||||
</view>
|
||||
@@ -271,6 +276,9 @@ onBeforeUnmount(() => {
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(180deg, rgba(255, 209, 153, 1), rgba(162, 119, 55, 1));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.progress-card__avatar {
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
import { computed, nextTick, ref } from "vue";
|
||||
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
|
||||
import Container from "@/components/Container.vue";
|
||||
import TargetPicker from "@/components/TargetPicker.vue";
|
||||
import TrainingDifficultyBadge from "./components/TrainingDifficultyBadge.vue";
|
||||
import TrainingDifficultyPreviewCard from "./components/TrainingDifficultyPreviewCard.vue";
|
||||
import TrainingDifficultyStartButton from "./components/TrainingDifficultyStartButton.vue";
|
||||
@@ -40,6 +39,7 @@ const routeModeTypeMap = {
|
||||
precision: "precision",
|
||||
rhythm: "rhythm",
|
||||
};
|
||||
const defaultTargetType = 1;
|
||||
|
||||
const resolveTrainingType = (mode) => {
|
||||
const normalizedMode = String(mode || "").toLowerCase();
|
||||
@@ -232,7 +232,6 @@ const emptyDifficulty = {
|
||||
const pageConfig = ref(createEmptyModeConfig(defaultTrainingType));
|
||||
const unlockedDifficultyId = ref(defaultUnlockedDifficultyId);
|
||||
const selectedDifficultyId = ref(defaultUnlockedDifficultyId);
|
||||
const showTargetPicker = ref(false);
|
||||
const nodesScrollTop = ref(0);
|
||||
const nodesScrollWithAnimation = ref(false);
|
||||
const routeOptions = ref({});
|
||||
@@ -555,11 +554,63 @@ const initPageState = async (options = {}, refreshOptions = {}) => {
|
||||
}
|
||||
};
|
||||
|
||||
const resolveTargetPaperType = (target) => {
|
||||
return Number(target) === 1 ? "20厘米全环靶" : "40厘米全环靶";
|
||||
const cleanQueryValue = (value) => {
|
||||
if (value === undefined || value === null || value === "") {
|
||||
return "";
|
||||
}
|
||||
|
||||
if (typeof value === "number" && !Number.isFinite(value)) {
|
||||
return "";
|
||||
}
|
||||
|
||||
return value;
|
||||
};
|
||||
|
||||
const saveTrainingContext = (target) => {
|
||||
const createPracticeQuery = (difficulty) => {
|
||||
const trainingType = pageConfig.value.key || defaultTrainingType;
|
||||
const commonQuery = {
|
||||
type: trainingType,
|
||||
difficultyId: difficulty.id,
|
||||
difficulty: difficulty.level,
|
||||
recordId: difficulty.recordId,
|
||||
arrows: toNumber(difficulty.arrows, 12),
|
||||
time: toNumber(difficulty.time_limit, 120) || 120,
|
||||
target: defaultTargetType,
|
||||
};
|
||||
const typedQueryMap = {
|
||||
base: {
|
||||
hitReq: toNumber(difficulty.hit_req),
|
||||
},
|
||||
endurance: {
|
||||
totalReq: toNumber(difficulty.total_req),
|
||||
},
|
||||
precision: {
|
||||
blocks: toNumber(difficulty.blocks),
|
||||
mode: toNumber(difficulty.mode),
|
||||
},
|
||||
rhythm: {
|
||||
hitReq: toNumber(difficulty.hit_req),
|
||||
mode: toNumber(difficulty.mode),
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
...commonQuery,
|
||||
...(typedQueryMap[trainingType] || {}),
|
||||
};
|
||||
};
|
||||
|
||||
const createPracticeUrl = (difficulty) => {
|
||||
const query = Object.entries(createPracticeQuery(difficulty))
|
||||
.map(([key, value]) => [key, cleanQueryValue(value)])
|
||||
.filter(([, value]) => value !== "")
|
||||
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
|
||||
.join("&");
|
||||
|
||||
return `/pages/training/practise-one${query ? `?${query}` : ""}`;
|
||||
};
|
||||
|
||||
const saveTrainingContext = () => {
|
||||
const difficulty = selectedDifficulty.value;
|
||||
|
||||
if (!difficulty.id) {
|
||||
@@ -571,9 +622,8 @@ const saveTrainingContext = (target) => {
|
||||
trainingTitle: pageConfig.value.title,
|
||||
difficultyId: difficulty.id,
|
||||
difficultyLabel: difficulty.label,
|
||||
targetPaperType: target
|
||||
? resolveTargetPaperType(target)
|
||||
: difficulty.targetPaperType,
|
||||
targetType: defaultTargetType,
|
||||
targetPaperType: difficulty.targetPaperType,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -606,30 +656,8 @@ const handleStart = () => {
|
||||
}
|
||||
|
||||
saveTrainingContext();
|
||||
uni.showToast({
|
||||
title: `${selectedDifficulty.value.title} 即将开始`,
|
||||
icon: "none",
|
||||
});
|
||||
};
|
||||
|
||||
const openTargetPicker = () => {
|
||||
if (!selectedDifficulty.value.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
showTargetPicker.value = true;
|
||||
};
|
||||
|
||||
const handleTargetConfirm = (target) => {
|
||||
showTargetPicker.value = false;
|
||||
saveTrainingContext(target);
|
||||
// uni.showToast({
|
||||
// title: `${selectedDifficulty.value.title} 即将开始`,
|
||||
// icon: "none",
|
||||
// });
|
||||
|
||||
uni.navigateTo({
|
||||
url: `/pages/training/practise-one?target=${target}`,
|
||||
url: createPracticeUrl(selectedDifficulty.value),
|
||||
});
|
||||
};
|
||||
|
||||
@@ -708,15 +736,10 @@ onUnload(() => {
|
||||
<view class="difficulty-page__start">
|
||||
<TrainingDifficultyStartButton
|
||||
:text="selectedDifficulty.startText"
|
||||
@click="openTargetPicker"
|
||||
@click="handleStart"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<TargetPicker
|
||||
:show="showTargetPicker"
|
||||
:onClose="() => (showTargetPicker = false)"
|
||||
:onConfirm="handleTargetConfirm"
|
||||
/>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import { computed, ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import Container from "@/components/Container.vue";
|
||||
import ShootProgress from "./components/ShootProgress.vue";
|
||||
@@ -30,21 +30,140 @@ const { user } = storeToRefs(store);
|
||||
const sound = ref(true);
|
||||
const start = ref(false);
|
||||
const scores = ref([]);
|
||||
const total = 12;
|
||||
const defaultTotal = 12;
|
||||
const defaultShootTime = 120;
|
||||
const defaultTargetType = 1;
|
||||
const total = ref(defaultTotal);
|
||||
const shootTime = ref(defaultShootTime);
|
||||
const practiseResult = ref({});
|
||||
const practiseId = ref("");
|
||||
const showGuide = ref(false);
|
||||
const tips = ref("");
|
||||
const targetType = ref(1);
|
||||
const targetType = ref(defaultTargetType);
|
||||
const trainingParams = ref({});
|
||||
const trainingDifficultyRefreshEvent = "training-difficulty-refresh";
|
||||
const useHighlightTest = ref(false);
|
||||
const highlightTestTimer = ref(null);
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.target) {
|
||||
targetType.value = Number(options.target);
|
||||
const env = computed(() => {
|
||||
try {
|
||||
return uni.getAccountInfoSync().miniProgram.envVersion;
|
||||
} catch (error) {
|
||||
return "release";
|
||||
}
|
||||
});
|
||||
|
||||
const defaultHighlightAreas = [{ quadrant: 1, rings: [7] }];
|
||||
|
||||
// 临时高亮测试数据：第 N 项对应第 N 箭，每箭展示一个不同区域。
|
||||
const highlightTestAreas = [
|
||||
{ arrowIndex: 1, quadrant: 1, rings: [10] },
|
||||
{ arrowIndex: 2, quadrant: 2, rings: [9, 10] },
|
||||
{ arrowIndex: 3, quadrant: 3, rings: [8, 9] },
|
||||
{ arrowIndex: 4, quadrant: 4, rings: [7, 8] },
|
||||
{ arrowIndex: 5, quadrant: 1, rings: [6, 7] },
|
||||
{ arrowIndex: 6, quadrant: 2, rings: [5, 6] },
|
||||
{ arrowIndex: 7, quadrant: 3, rings: [4, 5] },
|
||||
{ arrowIndex: 8, quadrant: 4, rings: [3, 4] },
|
||||
{ arrowIndex: 9, quadrant: 1, rings: "all", scope: "sector" },
|
||||
{ arrowIndex: 10, quadrant: 2, rings: "all", scope: "sector" },
|
||||
{ arrowIndex: 11, quadrant: 3, rings: "all", scope: "sector" },
|
||||
{ arrowIndex: 12, quadrant: 4, rings: "all", scope: "sector" },
|
||||
];
|
||||
|
||||
const targetHighlightAreas = computed(() => {
|
||||
return useHighlightTest.value ? highlightTestAreas : defaultHighlightAreas;
|
||||
});
|
||||
|
||||
const toRouteNumber = (value, fallback = 0) => {
|
||||
const numberValue = Number(value);
|
||||
return Number.isFinite(numberValue) ? numberValue : fallback;
|
||||
};
|
||||
|
||||
const toPositiveRouteNumber = (value, fallback) => {
|
||||
const numberValue = toRouteNumber(value, fallback);
|
||||
return numberValue > 0 ? numberValue : fallback;
|
||||
};
|
||||
|
||||
const createPractice = async () => {
|
||||
const result = await createPractiseAPI(
|
||||
total.value,
|
||||
shootTime.value,
|
||||
targetType.value
|
||||
);
|
||||
|
||||
if (result) practiseId.value = result.id;
|
||||
};
|
||||
|
||||
const clearHighlightTestTimer = () => {
|
||||
if (highlightTestTimer.value) {
|
||||
clearInterval(highlightTestTimer.value);
|
||||
highlightTestTimer.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
const buildHighlightTestScore = (index) => ({
|
||||
playerId: user.value?.id,
|
||||
ring: 9,
|
||||
ringX: false,
|
||||
x: ((index % 4) - 1.5) * 2,
|
||||
y: (Math.floor(index / 4) - 1) * 2,
|
||||
angle: null,
|
||||
});
|
||||
|
||||
const setHighlightTestArrow = (arrowIndex) => {
|
||||
const completedCount = Math.max(arrowIndex - 1, 0);
|
||||
scores.value = Array.from({ length: completedCount }, (_, index) =>
|
||||
buildHighlightTestScore(index)
|
||||
);
|
||||
};
|
||||
|
||||
// 临时测试入口：自动切换第 1 到第 12 箭，让 BowTarget 按当前箭展示不同高亮。
|
||||
const runHighlightTest = () => {
|
||||
clearHighlightTestTimer();
|
||||
useHighlightTest.value = true;
|
||||
practiseResult.value = {};
|
||||
start.value = true;
|
||||
|
||||
let arrowIndex = 1;
|
||||
setHighlightTestArrow(arrowIndex);
|
||||
|
||||
highlightTestTimer.value = setInterval(() => {
|
||||
if (arrowIndex >= highlightTestAreas.length) {
|
||||
clearHighlightTestTimer();
|
||||
return;
|
||||
}
|
||||
|
||||
arrowIndex += 1;
|
||||
setHighlightTestArrow(arrowIndex);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const resetHighlightTest = () => {
|
||||
clearHighlightTestTimer();
|
||||
useHighlightTest.value = false;
|
||||
scores.value = [];
|
||||
};
|
||||
|
||||
onLoad((options = {}) => {
|
||||
targetType.value = toPositiveRouteNumber(options.target, defaultTargetType);
|
||||
total.value = toPositiveRouteNumber(options.arrows, defaultTotal);
|
||||
shootTime.value = toPositiveRouteNumber(options.time, defaultShootTime);
|
||||
trainingParams.value = {
|
||||
type: options.type || "",
|
||||
difficultyId: options.difficultyId || "",
|
||||
difficulty: toRouteNumber(options.difficulty),
|
||||
recordId: options.recordId || "",
|
||||
hitReq: toRouteNumber(options.hitReq),
|
||||
totalReq: toRouteNumber(options.totalReq),
|
||||
blocks: toRouteNumber(options.blocks),
|
||||
mode: toRouteNumber(options.mode),
|
||||
};
|
||||
});
|
||||
|
||||
const onReady = async () => {
|
||||
clearHighlightTestTimer();
|
||||
useHighlightTest.value = false;
|
||||
await startPractiseAPI();
|
||||
scores.value = [];
|
||||
start.value = true;
|
||||
@@ -70,12 +189,13 @@ function onComplete() {
|
||||
}
|
||||
|
||||
async function onRetry() {
|
||||
clearHighlightTestTimer();
|
||||
useHighlightTest.value = false;
|
||||
practiseId.value = "";
|
||||
practiseResult.value = {};
|
||||
start.value = false;
|
||||
scores.value = [];
|
||||
const result = await createPractiseAPI(total, 120, targetType.value);
|
||||
if (result) practiseId.value = result.id;
|
||||
await createPractice();
|
||||
}
|
||||
|
||||
const onClickShare = debounce(async () => {
|
||||
@@ -103,8 +223,7 @@ onMounted(async () => {
|
||||
uni.$on("socket-inbox", onReceiveMessage);
|
||||
uni.$on("share-image", onClickShare);
|
||||
uni.$on("audioEnded", onAudioEnded);
|
||||
const result = await createPractiseAPI(total, 120, targetType.value);
|
||||
if (result) practiseId.value = result.id;
|
||||
await createPractice();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
@@ -115,6 +234,7 @@ onBeforeUnmount(() => {
|
||||
uni.$off("share-image", onClickShare);
|
||||
uni.$off("audioEnded", onAudioEnded);
|
||||
audioManager.stopAll();
|
||||
clearHighlightTestTimer();
|
||||
endPractiseAPI();
|
||||
});
|
||||
</script>
|
||||
@@ -123,6 +243,7 @@ onBeforeUnmount(() => {
|
||||
<Container
|
||||
:bgType="!start && !practiseResult.id?9:10"
|
||||
:showBottom="!start && !scores.length"
|
||||
headerClass="training-practise-header"
|
||||
>
|
||||
<view>
|
||||
<TestDistance v-if="!start && !practiseResult.id" />
|
||||
@@ -143,7 +264,25 @@ onBeforeUnmount(() => {
|
||||
:totalRound="start ? total / 4 : 0"
|
||||
:currentRound="scores.length % 3"
|
||||
:scores="scores"
|
||||
:showCrosshair="false"
|
||||
:highlightAreas="targetHighlightAreas"
|
||||
/>
|
||||
<view v-if="env !== 'release'" class="highlight-test-actions">
|
||||
<button
|
||||
class="highlight-test-btn"
|
||||
hover-class="none"
|
||||
@click="runHighlightTest"
|
||||
>
|
||||
高亮测试
|
||||
</button>
|
||||
<button
|
||||
class="highlight-test-btn"
|
||||
hover-class="none"
|
||||
@click="resetHighlightTest"
|
||||
>
|
||||
重置高亮
|
||||
</button>
|
||||
</view>
|
||||
<view class="sound-text-box">
|
||||
<button class="sound-btn" hover-class="none" @click="updateSound">
|
||||
<image
|
||||
@@ -221,6 +360,38 @@ onBeforeUnmount(() => {
|
||||
bottom: -36rpx;
|
||||
}
|
||||
|
||||
:deep(.training-practise-header .back-btn) {
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.highlight-test-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -24rpx;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.highlight-test-btn {
|
||||
width: 150rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
padding: 0;
|
||||
border-radius: 24rpx;
|
||||
background: rgba(0, 0, 0, 0.48);
|
||||
color: #fed847;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.highlight-test-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.highlight-test-btn + .highlight-test-btn {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.sound-text-box{
|
||||
height: 125rpx;
|
||||
padding: 0 56rpx;
|
||||
|
||||
Reference in New Issue
Block a user