@ray-js/lamp-circle-picker 1.0.13-beta-1 → 1.0.13-beta-3

package/lib/component/rjs/index.rjs

@@ -260,7 +260,6 @@ export default Render({
       ctx.closePath();
     }
 
-    // 注意：这里不设置 globalCompositeOperation，让调用方决定是否需要
     // 返回渐变颜色数组，供后续绘制端点使用
     return gradientColors;
   },
@@ -284,16 +283,25 @@ export default Render({
     // 计算色环中线半径
     const midRadius = (innerRadius + (outerRadius - innerRadius) / 2) * scale;
 
+    // 切线方向的平移距离（2px，考虑scale）
+    const offset = 2 * scale;
+
     // 起始端点（135度位置）
     const startAngleRad = (startAngle * Math.PI) / 180;
-    const startX = centerX + midRadius * Math.cos(startAngleRad);
-    const startY = centerY + midRadius * Math.sin(startAngleRad);
+    // 切线方向是半径方向顺时针旋转90度（+π/2），沿色环正向平移
+    const startTangentAngle = startAngleRad + Math.PI / 2;
+    const startX =
+      centerX + midRadius * Math.cos(startAngleRad) + offset * Math.cos(startTangentAngle);
+    const startY =
+      centerY + midRadius * Math.sin(startAngleRad) + offset * 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度（-π/2），沿色环反向平移
+    const endTangentAngle = endAngleRad - Math.PI / 2;
+    const endX = centerX + midRadius * Math.cos(endAngleRad) + offset * Math.cos(endTangentAngle);
+    const endY = centerY + midRadius * Math.sin(endAngleRad) + offset * Math.sin(endTangentAngle);
     const endColor =
       gradientColors[gradientColors.length - 2] || gradientColors[gradientColors.length - 1]; // 使用最后一个颜色
 

package/package.json

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