update：优化精准稳定

src/components/TargetCanvas.vue

@@ -46,10 +46,10 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
-  // 指定环数，1 到 10；无效值表示高亮整个区域。
-  activeRing: {
-    type: Number,
-    default: 0,
+  // 指定一个或多个环数，空数组表示高亮整个区域。
+  activeRings: {
+    type: Array,
+    default: () => [],
   },
   // 每次变化时以固定低帧数重新展开当前高亮扇区；默认关闭。
   highlightRefreshToken: {
@@ -192,6 +192,25 @@ const getPositiveInteger = (value) => {
   return Number.isInteger(numberValue) && numberValue > 0 ? numberValue : 0;
 };
 
+// 过滤、去重并合并连续环，避免 3、4 环同时高亮时绘制中间描边。
+const getActiveRingRanges = (ringCount) => {
+  const rings = [...new Set(
+    (Array.isArray(props.activeRings) ? props.activeRings : [])
+      .map(getPositiveInteger)
+      .filter((ring) => ring >= 1 && ring <= ringCount)
+  )].sort((first, second) => first - second);
+
+  return rings.reduce((ranges, ring) => {
+    const lastRange = ranges[ranges.length - 1];
+    if (lastRange && ring === lastRange.end + 1) {
+      lastRange.end = ring;
+    } else {
+      ranges.push({ start: ring, end: ring });
+    }
+    return ranges;
+  }, []);
+};
+
 // 正上方作为第一区起始边界，Canvas 角度递增方向即为顺时针。
 const getSectorAngles = (sector, sectorCount) => {
   const count = getPositiveInteger(sectorCount);
@@ -256,7 +275,7 @@ const drawTargetRings = (ctx, centerX, centerY, targetRadius, config) => {
   }
 };
 
-// 高亮后端指定区域；activeRing 有效时只高亮该区域内的单个环。
+// 高亮后端指定区域；activeRings 非空时高亮该区域内的一个或多个环。
 const drawSectorHighlight = (
   ctx,
   centerX,
@@ -274,32 +293,35 @@ const drawSectorHighlight = (
   );
   if (safeRevealProgress <= 0) return;
 
-  const ring = getPositiveInteger(props.activeRing);
-  const hasActiveRing = ring >= 1 && ring <= config.ringCount;
-  const innerRadius = hasActiveRing
-    ? targetRadius * ((config.ringCount - ring) / config.ringCount)
-    : 0;
-  const outerRadius = hasActiveRing
-    ? targetRadius * ((config.ringCount + 1 - ring) / config.ringCount)
-    : targetRadius;
+  const ringRanges = getActiveRingRanges(config.ringCount);
+  const highlightRanges = ringRanges.length > 0
+    ? ringRanges
+    : [{ start: 1, end: config.ringCount }];
   const style = {
     ...defaultHighlightStyle,
     ...props.highlightStyle,
   };
 
-  drawAnnularSector(
-    ctx,
-    centerX,
-    centerY,
-    innerRadius,
-    outerRadius,
-    angles.startAngle,
-    angles.startAngle +
-      (angles.endAngle - angles.startAngle) * safeRevealProgress,
-    style.color,
-    style.strokeColor,
-    Math.max(1, targetRadius * style.lineWidthRatio)
-  );
+  highlightRanges.forEach((range) => {
+    const innerRadius =
+      targetRadius * ((config.ringCount - range.end) / config.ringCount);
+    const outerRadius =
+      targetRadius * ((config.ringCount + 1 - range.start) / config.ringCount);
+
+    drawAnnularSector(
+      ctx,
+      centerX,
+      centerY,
+      innerRadius,
+      outerRadius,
+      angles.startAngle,
+      angles.startAngle +
+        (angles.endAngle - angles.startAngle) * safeRevealProgress,
+      style.color,
+      style.strokeColor,
+      Math.max(1, targetRadius * style.lineWidthRatio)
+    );
+  });
 };
 
 // 从正上方开始顺时针绘制所有区域边界。
@@ -420,7 +442,7 @@ const getDrawKey = (width, height) => {
     showRingLabels: props.showRingLabels,
     sectorCount: props.sectorCount,
     activeSector: props.activeSector,
-    activeRing: props.activeRing,
+    activeRings: props.activeRings,
     showSectorLabels: props.showSectorLabels,
     targetStyleConfig: props.targetStyleConfig,
     crosshairStyle: props.crosshairStyle,
@@ -591,7 +613,7 @@ watch(
     props.showRingLabels,
     props.sectorCount,
     props.activeSector,
-    props.activeRing,
+    props.activeRings,
     props.highlightRefreshToken,
     props.showSectorLabels,
     props.highlightOnly,