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

package/example/src/pages/index.tsx

@@ -68,7 +68,7 @@ export default function Home() {
         <LampCirclePicker
           value={temperature}
           innerRingRadius={80}
-          showInnerCircle
+          showInnerCircle={false}
           colorList={[
             { offset: 0, color: '#ff0000' },
             { offset: 0.5, color: '#00ff00' },

package/lib/component/rjs/index.rjs

@@ -283,38 +283,36 @@ export default Render({
     // 计算色环中线半径
     const midRadius = (innerRadius + (outerRadius - innerRadius) / 2) * scale;
 
-    // 切线方向的平移距离（2px，考虑scale）
-    const offset = 2 * scale;
-
     // 起始端点（135度位置）
     const startAngleRad = (startAngle * Math.PI) / 180;
-    // 切线方向是半径方向顺时针旋转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 startX = centerX + midRadius * Math.cos(startAngleRad);
+    const startY = centerY + midRadius * Math.sin(startAngleRad);
     const startColor = gradientColors[1] || gradientColors[0]; // 使用第一个颜色
 
     // 结束端点（405度位置）
     const endAngleRad = (endAngle * Math.PI) / 180;
-    // 切线方向是半径方向逆时针旋转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 endX = centerX + midRadius * Math.cos(endAngleRad);
+    const endY = centerY + midRadius * Math.sin(endAngleRad);
     const endColor =
       gradientColors[gradientColors.length - 2] || gradientColors[gradientColors.length - 1]; // 使用最后一个颜色
 
     // 重置合成操作以正常绘制端点
     ctx.globalCompositeOperation = 'source-over';
 
-    // 起始端点 - 使用半圆，封闭色环起点
-    // 半圆应该朝向色环外侧（逆时针方向），角度范围是从色环切线的外侧到内侧
-    const startHalfCircleStart = startAngleRad - Math.PI; // 色环外侧
-    const startHalfCircleEnd = startAngleRad; // 色环内侧
+    // 起始端点 - 使用闭合路径绘制半圆，确保与色环无缝衔接
+    // 计算色环内外边缘的起点坐标
+    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);
 
     ctx.beginPath();
-    ctx.arc(startX, startY, endpointRadius, startHalfCircleStart, startHalfCircleEnd, false);
+    // 从内边缘开始
+    ctx.moveTo(startInnerX, startInnerY);
+    // 绘制半圆弧（从内边缘到外边缘）
+    ctx.arc(startX, startY, endpointRadius, startAngleRad, startAngleRad - Math.PI, true);
+    // 闭合路径（从外边缘回到内边缘）
+    ctx.closePath();
 
     // 使用与色环相同的径向渐变
     const startGradient = ctx.createRadialGradient(
@@ -330,15 +328,21 @@ export default Render({
 
     ctx.fillStyle = startGradient;
     ctx.fill();
-    ctx.closePath();
 
-    // 结束端点 - 使用半圆，封闭色环终点
-    // 半圆应该朝向色环外侧（顺时针方向），角度范围是从色环切线的内侧到外侧
-    const endHalfCircleStart = endAngleRad; // 色环内侧
-    const endHalfCircleEnd = endAngleRad + Math.PI; // 色环外侧
+    // 结束端点 - 使用闭合路径绘制半圆，确保与色环无缝衔接
+    // 计算色环内外边缘的终点坐标
+    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);
 
     ctx.beginPath();
-    ctx.arc(endX, endY, endpointRadius, endHalfCircleStart, endHalfCircleEnd, false);
+    // 从内边缘开始
+    ctx.moveTo(endInnerX, endInnerY);
+    // 绘制半圆弧（从内边缘到外边缘）
+    ctx.arc(endX, endY, endpointRadius, endAngleRad, endAngleRad + Math.PI, false);
+    // 闭合路径（从外边缘回到内边缘）
+    ctx.closePath();
 
     // 使用与色环相同的径向渐变
     const endGradient = ctx.createRadialGradient(
@@ -354,7 +358,6 @@ export default Render({
 
     ctx.fillStyle = endGradient;
     ctx.fill();
-    ctx.closePath();
   },
 
   // 环形色盘 降级绘制

package/lib/index.js

@@ -52,9 +52,9 @@ const LampCirclePicker = props => {
   return /*#__PURE__*/React.createElement(View, {
     className: clsx(styled.container, styled.flexCenter),
     style: style
-  }, /*#__PURE__*/React.createElement(View, {
-    className: clsx(styled.innerBox, styled.flexCenter)
   }, showInnerCircle && /*#__PURE__*/React.createElement(View, {
+    className: clsx(styled.innerBox, styled.flexCenter)
+  }, /*#__PURE__*/React.createElement(View, {
     className: styled.ringIcon,
     style: {
       width: innerImgRadius,

package/package.json

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