@ray-js/lamp-circle-picker 1.0.13-beta-2 → 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

@@ -299,13 +299,20 @@ export default Render({
     // 重置合成操作以正常绘制端点
     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(
@@ -321,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(
@@ -345,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-2",
+  "version": "1.0.13-beta-4",
   "description": "照明缺角色环",
   "main": "lib/index",
   "files": [