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

package/lib/component/rjs/index.rjs

@@ -129,7 +129,7 @@ export default Render({
     return null;
   },
 
-  drawRingWithConicGradient(params) {
+  drawRingWithGradientSegments(params) {
     let {
       startAngle,
       endAngle,
@@ -142,6 +142,7 @@ export default Render({
       centerX,
       centerY,
       ringBorderColor,
+      lineCap = 'round',
     } = params;
 
     // 检查 canvas 和 context
@@ -258,13 +259,106 @@ export default Render({
       ctx.fill();
       ctx.closePath();
     }
-    ctx.globalCompositeOperation = 'destination-out';
+
+    // 注意：这里不设置 globalCompositeOperation，让调用方决定是否需要
+    // 返回渐变颜色数组，供后续绘制端点使用
+    return gradientColors;
+  },
+
+  // 绘制圆形端点以模拟 lineCap: 'round' 效果
+  drawRoundEndpoints(params) {
+    const {
+      ctx,
+      centerX,
+      centerY,
+      innerRadius,
+      outerRadius,
+      startAngle,
+      endAngle,
+      gradientColors,
+      scale,
+    } = params;
+
+    // 计算端点半径（色环宽度的一半）
+    const endpointRadius = ((outerRadius - innerRadius) / 2) * scale;
+    // 计算色环中线半径
+    const midRadius = (innerRadius + (outerRadius - innerRadius) / 2) * scale;
+
+    // 起始端点（135度位置）
+    const startAngleRad = (startAngle * Math.PI) / 180;
+    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;
+    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; // 色环内侧
+
+    ctx.beginPath();
+    ctx.arc(startX, startY, endpointRadius, startHalfCircleStart, startHalfCircleEnd, false);
+
+    // 使用与色环相同的径向渐变
+    const startGradient = ctx.createRadialGradient(
+      centerX,
+      centerY,
+      innerRadius * scale,
+      centerX,
+      centerY,
+      outerRadius * scale
+    );
+    startGradient.addColorStop(0, startColor);
+    startGradient.addColorStop(1, startColor);
+
+    ctx.fillStyle = startGradient;
+    ctx.fill();
+    ctx.closePath();
+
+    // 结束端点 - 使用半圆，封闭色环终点
+    // 半圆应该朝向色环外侧（顺时针方向），角度范围是从色环切线的内侧到外侧
+    const endHalfCircleStart = endAngleRad; // 色环内侧
+    const endHalfCircleEnd = endAngleRad + Math.PI; // 色环外侧
+
+    ctx.beginPath();
+    ctx.arc(endX, endY, endpointRadius, endHalfCircleStart, endHalfCircleEnd, false);
+
+    // 使用与色环相同的径向渐变
+    const endGradient = ctx.createRadialGradient(
+      centerX,
+      centerY,
+      innerRadius * scale,
+      centerX,
+      centerY,
+      outerRadius * scale
+    );
+    endGradient.addColorStop(0, endColor);
+    endGradient.addColorStop(1, endColor);
+
+    ctx.fillStyle = endGradient;
+    ctx.fill();
+    ctx.closePath();
   },
 
   // 环形色盘 降级绘制
   async renderAnnulusColorLowRank(id, radius, innerRingRadius, options = {}) {
     let canvas = null;
-    const { touchCircleStrokeStyle, ringBorderColor, inactive, maskVisible } = options;
+    const {
+      touchCircleStrokeStyle,
+      ringBorderColor,
+      inactive,
+      maskVisible,
+      lineCap = 'round',
+    } = options;
     this.touchCircleStrokeStyle = touchCircleStrokeStyle;
     this.inactive = inactive;
     this.maskVisible = maskVisible;
@@ -300,7 +394,10 @@ export default Render({
     const offsetDegree = 270;
     const endDegree = startDegree + offsetDegree;
 
-    this.drawRingWithConicGradient({
+    // 保存 canvas 状态（在绘制主色环之前）
+    ctx.save();
+
+    const gradientColors = this.drawRingWithGradientSegments({
       startAngle: startDegree,
       endAngle: endDegree,
       offsetDegree,
@@ -312,17 +409,35 @@ export default Render({
       centerX: poxCenterX,
       centerY: poxCenterY,
       ringBorderColor,
+      lineCap,
     });
 
+    // 恢复 canvas 状态（移除裁剪区域）
+    ctx.restore();
+
+    // 绘制圆形端点（在没有裁剪区域限制的情况下）
+    if (lineCap === 'round' && gradientColors && gradientColors.length > 0) {
+      this.drawRoundEndpoints({
+        ctx,
+        centerX: poxCenterX,
+        centerY: poxCenterY,
+        innerRadius: innerRingRadius,
+        outerRadius: radius,
+        startAngle: startDegree,
+        endAngle: endDegree,
+        gradientColors,
+        scale: scale, // 使用原始 scale
+      });
+    }
+
     ctx.scale(scale, scale);
     canvas.style.width = `${diameter}px`;
     canvas.style.height = `${diameter}px`;
     this.annulusContext = ctx;
   },
 
-  // 环形色盘
+  // 环形色盘 - 统一使用降级渲染
   async renderAnnulusColor(id, radius, innerRingRadius, temp = 0, options = {}) {
-    let canvas = null;
     const {
       touchCircleStrokeStyle = '',
       touchCircleLineWidth = 0,
@@ -331,70 +446,19 @@ export default Render({
       inactive = false,
       maskVisible = false,
     } = options || {};
+
+    // 设置实例属性
     this.touchCircleStrokeStyle = touchCircleStrokeStyle;
     this.touchCircleLineWidth = touchCircleLineWidth;
     this.hideThumb = hideThumb;
     this.inactive = inactive;
     this.maskVisible = maskVisible;
-    try {
-      canvas = await getCanvasById(id);
-    } catch (error) {
-      console.error(error);
-      return;
-    }
-    if (!canvas) {
-      console.error('canvas not found');
-      return;
-    }
+
     const { useEventChannel, eventChannelName } = options || {};
     this.useEventChannel = useEventChannel;
     this.eventChannelName = eventChannelName;
-    canvas.width = radius * 4;
-    canvas.height = radius * 4;
-    const ctx = canvas.getContext('2d');
-
-    const startAngle = Math.PI * 0.75;
-    const endAngle = Math.PI * 0.25;
-    const counterclockwise = false;
-    ctx.beginPath();
-    ctx.arc(
-      radius * 2,
-      radius * 2,
-      innerRingRadius * 2 + (radius - innerRingRadius),
-      startAngle,
-      endAngle,
-      counterclockwise
-    );
-
-    let grd = null;
-    if (ctx.createConicGradient && lineCap === 'round') {
-      try {
-        grd = ctx.createConicGradient(startAngle - Math.PI * 0.1, radius * 2, radius * 2);
-        options.colorList?.forEach(item => {
-          grd.addColorStop(item.offset, item.color);
-        });
-        //设定曲线粗细度
-        ctx.lineWidth = (radius - innerRingRadius) * 2;
-        //给曲线着色
-        ctx.strokeStyle = grd;
-        //连接处样式
-        ctx.lineCap = lineCap || 'round';
-        //给环着色
-        ctx.stroke();
-        ctx.closePath();
-        ctx.scale(2, 2);
-        canvas.style.width = `${radius * 2}px`;
-        canvas.style.height = `${radius * 2}px`;
-        this.annulusContext = ctx;
-      } catch (err) {
-        console.error('createConicGradient:', err);
-      }
-      !this.hideThumb && this.renderAnnulusColorThumb(id, temp);
-      this.callMethod('initedCanvas', {});
-      return;
-    }
 
-    // 降级渲染，兼容安卓低版本机型
+    // 统一使用降级渲染，确保所有机型的一致性
     this.renderAnnulusColorLowRank(id, radius, innerRingRadius, options);
 
     !this.hideThumb && this.renderAnnulusColorThumb(id, temp);
@@ -446,7 +510,7 @@ export default Render({
       this.radius +
       (this.innerRingRadius + (this.radius - this.innerRingRadius) / 2) *
         Math.sin((angle * Math.PI) / 180);
-    const { data } = ctx.getImageData(x * 2, y * 2, 1, 1);
+    const { data } = ctx.getImageData(Math.round(x * 2), Math.round(y * 2), 1, 1);
     const rgb = { r: data[0], g: data[1], b: data[2] };
     this.updateThumbPosition(x, y, rgb);
     const emitRes = {
@@ -507,7 +571,7 @@ export default Render({
       console.error('ctx not found');
       return;
     }
-    const { data } = ctx.getImageData(x * 2, y * 2, 1, 1);
+    const { data } = ctx.getImageData(Math.round(x * 2), Math.round(y * 2), 1, 1);
     const r = data[0];
     const g = data[1];
     const b = data[2];

package/lib/component/rjs/index.tyss

@@ -21,7 +21,7 @@
   border-radius: 50%;
   border: 5rpx solid rgba(255, 255, 255, 0.8);
   z-index: 99;
-  box-shadow:0 0 7px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.16);
 }
 
 .colorTipWrapper {

package/lib/hooks.js

@@ -8,8 +8,6 @@ import { getSystemCacheInfo } from './utils';
  */
 export const useStdPx2Adapt = function (stdPx) {
   let toFixed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
-  const {
-    screenWidth
-  } = useMemo(() => getSystemCacheInfo(), [stdPx]);
-  return +(stdPx * (screenWidth / 375)).toFixed(toFixed) || stdPx;
+  const systemInfo = useMemo(() => getSystemCacheInfo(), [stdPx]);
+  return +(stdPx * (systemInfo.windowWidth / 375)).toFixed(toFixed) || stdPx;
 };

package/lib/utils/index.d.ts

@@ -6,7 +6,7 @@ type HSL = {
 };
 declare const rgbToHsl: (r: number, g: number, b: number) => HSL;
 export declare const getSystemCacheInfo: () => {
-    screenWidth: number;
-    screenHeight: number;
+    windowWidth: number;
+    windowHeight: number;
 };
 export { rgbToHsl, rgb2hsv, hsv2rgb };

package/package.json

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