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

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,48 @@ export default Render({
     // 计算色环中线半径
     const midRadius = (innerRadius + (outerRadius - innerRadius) / 2) * scale;
 
-    // 切线方向的平移距离（2px，考虑scale）
-    const offset = 2 * scale;
+    // 切向偏移量（4px，考虑scale），用于消除某些机型上的间隙
+    const tangentOffset = 4 * scale;
 
     // 起始端点（135度位置）
     const startAngleRad = (startAngle * Math.PI) / 180;
-    // 切线方向是半径方向顺时针旋转90度（+π/2），沿色环正向平移
+    // 切向方向：顺时针旋转90度
     const startTangentAngle = startAngleRad + Math.PI / 2;
     const startX =
-      centerX + midRadius * Math.cos(startAngleRad) + offset * Math.cos(startTangentAngle);
+      centerX + midRadius * Math.cos(startAngleRad) + tangentOffset * Math.cos(startTangentAngle);
     const startY =
-      centerY + midRadius * Math.sin(startAngleRad) + offset * Math.sin(startTangentAngle);
+      centerY + midRadius * Math.sin(startAngleRad) + tangentOffset * Math.sin(startTangentAngle);
     const startColor = gradientColors[1] || gradientColors[0]; // 使用第一个颜色
 
     // 结束端点（405度位置）
     const endAngleRad = (endAngle * Math.PI) / 180;
-    // 切线方向是半径方向逆时针旋转90度（-π/2），沿色环反向平移
+    // 切向方向：逆时针旋转90度
     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) + 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]; // 使用最后一个颜色
 
     // 重置合成操作以正常绘制端点
     ctx.globalCompositeOperation = 'source-over';
 
-    // 起始端点 - 使用半圆，封闭色环起点
-    // 半圆应该朝向色环外侧（逆时针方向），角度范围是从色环切线的外侧到内侧
-    const startHalfCircleStart = startAngleRad - Math.PI; // 色环外侧
-    const startHalfCircleEnd = 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.arc(startX, startY, endpointRadius, startHalfCircleStart, startHalfCircleEnd, false);
+    // 从半圆弧的起点（内侧）开始
+    ctx.moveTo(startArcInnerX, startArcInnerY);
+    // 绘制半圆弧到外侧
+    ctx.arc(startX, startY, endpointRadius, startAngleRad, startAngleRad - Math.PI, true);
+    // 连接回起点，形成闭合路径
+    ctx.lineTo(startArcInnerX, startArcInnerY);
+    ctx.closePath();
 
     // 使用与色环相同的径向渐变
     const startGradient = ctx.createRadialGradient(
@@ -327,18 +337,24 @@ export default Render({
     );
     startGradient.addColorStop(0, startColor);
     startGradient.addColorStop(1, startColor);
-
     ctx.fillStyle = startGradient;
     ctx.fill();
-    ctx.closePath();
 
-    // 结束端点 - 使用半圆，封闭色环终点
-    // 半圆应该朝向色环外侧（顺时针方向），角度范围是从色环切线的内侧到外侧
-    const endHalfCircleStart = endAngleRad; // 色环内侧
-    const endHalfCircleEnd = endAngleRad + Math.PI; // 色环外侧
+    // 结束端点 - 使用闭合路径绘制半圆，确保与色环无缝衔接
+    // 计算半圆弧的起始和结束点（基于半圆中心和半径）
+    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.arc(endX, endY, endpointRadius, endHalfCircleStart, endHalfCircleEnd, false);
+    // 从半圆弧的起点（内侧）开始
+    ctx.moveTo(endArcInnerX, endArcInnerY);
+    // 绘制半圆弧到外侧
+    ctx.arc(endX, endY, endpointRadius, endAngleRad, endAngleRad + Math.PI, false);
+    // 连接回起点，形成闭合路径
+    ctx.lineTo(endArcInnerX, endArcInnerY);
+    ctx.closePath();
 
     // 使用与色环相同的径向渐变
     const endGradient = ctx.createRadialGradient(
@@ -351,10 +367,8 @@ export default Render({
     );
     endGradient.addColorStop(0, endColor);
     endGradient.addColorStop(1, endColor);
-
     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-5",
   "description": "照明缺角色环",
   "main": "lib/index",
   "files": [