@ray-js/lamp-circle-picker 1.0.13-beta-4 → 1.0.13-beta-5

package/lib/component/rjs/index.rjs

@@ -283,16 +283,27 @@ export default Render({
     // 计算色环中线半径
     const midRadius = (innerRadius + (outerRadius - innerRadius) / 2) * scale;
 
+    // 切向偏移量（4px，考虑scale），用于消除某些机型上的间隙
+    const tangentOffset = 4 * scale;
+
     // 起始端点（135度位置）
     const startAngleRad = (startAngle * Math.PI) / 180;
-    const startX = centerX + midRadius * Math.cos(startAngleRad);
-    const startY = centerY + midRadius * Math.sin(startAngleRad);
+    // 切向方向：顺时针旋转90度
+    const startTangentAngle = startAngleRad + Math.PI / 2;
+    const startX =
+      centerX + midRadius * Math.cos(startAngleRad) + tangentOffset * Math.cos(startTangentAngle);
+    const startY =
+      centerY + midRadius * Math.sin(startAngleRad) + tangentOffset * Math.sin(startTangentAngle);
     const startColor = gradientColors[1] || gradientColors[0]; // 使用第一个颜色
 
     // 结束端点（405度位置）
     const endAngleRad = (endAngle * Math.PI) / 180;
-    const endX = centerX + midRadius * Math.cos(endAngleRad);
-    const endY = centerY + midRadius * Math.sin(endAngleRad);
+    // 切向方向：逆时针旋转90度
+    const endTangentAngle = endAngleRad - Math.PI / 2;
+    const endX =
+      centerX + midRadius * Math.cos(endAngleRad) + tangentOffset * Math.cos(endTangentAngle);
+    const endY =
+      centerY + midRadius * Math.sin(endAngleRad) + tangentOffset * Math.sin(endTangentAngle);
     const endColor =
       gradientColors[gradientColors.length - 2] || gradientColors[gradientColors.length - 1]; // 使用最后一个颜色
 
@@ -300,18 +311,19 @@ export default Render({
     ctx.globalCompositeOperation = 'source-over';
 
     // 起始端点 - 使用闭合路径绘制半圆，确保与色环无缝衔接
-    // 计算色环内外边缘的起点坐标
-    const startInnerX = centerX + innerRadius * scale * Math.cos(startAngleRad);
-    const startInnerY = centerY + innerRadius * scale * Math.sin(startAngleRad);
-    const startOuterX = centerX + outerRadius * scale * Math.cos(startAngleRad);
-    const startOuterY = centerY + outerRadius * scale * Math.sin(startAngleRad);
+    // 计算半圆弧的起始和结束点（基于半圆中心和半径）
+    const startArcInnerX = startX + endpointRadius * Math.cos(startAngleRad);
+    const startArcInnerY = startY + endpointRadius * Math.sin(startAngleRad);
+    const startArcOuterX = startX + endpointRadius * Math.cos(startAngleRad - Math.PI);
+    const startArcOuterY = startY + endpointRadius * Math.sin(startAngleRad - Math.PI);
 
     ctx.beginPath();
-    // 从内边缘开始
-    ctx.moveTo(startInnerX, startInnerY);
-    // 绘制半圆弧（从内边缘到外边缘）
+    // 从半圆弧的起点（内侧）开始
+    ctx.moveTo(startArcInnerX, startArcInnerY);
+    // 绘制半圆弧到外侧
     ctx.arc(startX, startY, endpointRadius, startAngleRad, startAngleRad - Math.PI, true);
-    // 闭合路径（从外边缘回到内边缘）
+    // 连接回起点，形成闭合路径
+    ctx.lineTo(startArcInnerX, startArcInnerY);
     ctx.closePath();
 
     // 使用与色环相同的径向渐变
@@ -325,23 +337,23 @@ export default Render({
     );
     startGradient.addColorStop(0, startColor);
     startGradient.addColorStop(1, startColor);
-
     ctx.fillStyle = startGradient;
     ctx.fill();
 
     // 结束端点 - 使用闭合路径绘制半圆，确保与色环无缝衔接
-    // 计算色环内外边缘的终点坐标
-    const endInnerX = centerX + innerRadius * scale * Math.cos(endAngleRad);
-    const endInnerY = centerY + innerRadius * scale * Math.sin(endAngleRad);
-    const endOuterX = centerX + outerRadius * scale * Math.cos(endAngleRad);
-    const endOuterY = centerY + outerRadius * scale * Math.sin(endAngleRad);
+    // 计算半圆弧的起始和结束点（基于半圆中心和半径）
+    const endArcInnerX = endX + endpointRadius * Math.cos(endAngleRad);
+    const endArcInnerY = endY + endpointRadius * Math.sin(endAngleRad);
+    const endArcOuterX = endX + endpointRadius * Math.cos(endAngleRad + Math.PI);
+    const endArcOuterY = endY + endpointRadius * Math.sin(endAngleRad + Math.PI);
 
     ctx.beginPath();
-    // 从内边缘开始
-    ctx.moveTo(endInnerX, endInnerY);
-    // 绘制半圆弧（从内边缘到外边缘）
+    // 从半圆弧的起点（内侧）开始
+    ctx.moveTo(endArcInnerX, endArcInnerY);
+    // 绘制半圆弧到外侧
     ctx.arc(endX, endY, endpointRadius, endAngleRad, endAngleRad + Math.PI, false);
-    // 闭合路径（从外边缘回到内边缘）
+    // 连接回起点，形成闭合路径
+    ctx.lineTo(endArcInnerX, endArcInnerY);
     ctx.closePath();
 
     // 使用与色环相同的径向渐变
@@ -355,7 +367,6 @@ export default Render({
     );
     endGradient.addColorStop(0, endColor);
     endGradient.addColorStop(1, endColor);
-
     ctx.fillStyle = endGradient;
     ctx.fill();
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-circle-picker",
-  "version": "1.0.13-beta-4",
+  "version": "1.0.13-beta-5",
   "description": "照明缺角色环",
   "main": "lib/index",
   "files": [