@ray-js/lamp-circle-picker 1.0.9 → 1.0.10

package/README.md

@@ -62,6 +62,40 @@ interface IProps {
    */
   eventChannelName?: string;
 
+  /**
+   * @description.en showInnerCircle
+   * @description.zh 展示数值圆环
+   * @default true
+   */
+  showInnerCircle?: boolean;
+  /**
+   * @description.en descText
+   * @description.zh 色环内部文字
+   * @default null
+   */
+  descText?: string;
+  /**
+   * @description.en innerBorderStyle
+   * @description.zh 内部圆环描边
+   * @default null
+   */
+  innerBorderStyle?: {
+    color: string;
+    width: number;
+  };
+
+  /**
+   * @description.en touchCircleStrokeStyle
+   * @description.zh 触摸圆环描边颜色与 ctx.shadowColor 值相同
+   * @default null
+   */
+  touchCircleStrokeStyle?: string;
+  /**
+   * @description.en touchCircleLineWidth
+   * @description.zh 触摸圆环描边宽度与 ctx.shadowBlur 值相同
+   * @default null
+   */
+  touchCircleLineWidth?: number;
   /**
    * @description.zh 手指按下时的回调函数
    * @description.en Finger press when the callback function

package/lib/component/index.js

@@ -10,6 +10,8 @@ export default function RectColor(props) {
     colorList: props.colorList,
     useEventChannel: props.useEventChannel,
     eventChannelName: props.eventChannelName,
+    touchCircleStrokeStyle: props.touchCircleStrokeStyle,
+    touchCircleLineWidth: props.touchCircleLineWidth,
     bindstart: function onTouchStart(e) {
       var detail = e.detail;
       var temp = Math.floor(detail);

package/lib/component/rjs/index.rjs

@@ -7,9 +7,10 @@ export default Render({
   // 环形色盘
   async renderAnnulusColor(id, radius, innerRingRadius, temp = 0, options = {}) {
     let canvas = null;
-    const { touchCircleStrokeStyle, touchCircleLineWidth } = options || {}
-    this.touchCircleStrokeStyle = touchCircleStrokeStyle
-    this.touchCircleLineWidth = touchCircleLineWidth
+    const { touchCircleStrokeStyle, touchCircleLineWidth } = options || {};
+    this.touchCircleStrokeStyle = touchCircleStrokeStyle;
+    this.touchCircleLineWidth = touchCircleLineWidth;
+
     try {
       canvas = await getCanvasById(id);
     } catch (error) {
@@ -39,15 +40,11 @@ export default Render({
       endAngle
     );
 
-    let grd = ctx.createConicGradient(
-      startAngle - Math.PI * 0.1,
-      radius * 2,
-      radius * 2,
-    );
+    let grd = ctx.createConicGradient(startAngle - Math.PI * 0.1, radius * 2, radius * 2);
 
-    options.colorList?.forEach((item) => {
+    options.colorList?.forEach(item => {
       grd.addColorStop(item.offset, item.color);
-    })
+    });
 
     //设定曲线粗细度
     ctx.lineWidth = (radius - innerRingRadius) * 2;
@@ -63,7 +60,7 @@ export default Render({
     canvas.style.height = `${radius * 2}px`;
     this.annulusContext = ctx;
     this.renderAnnulusColorThumb(id, temp);
-    this.callMethod('initedCanvas', {})
+    this.callMethod('initedCanvas', {});
   },
   async renderAnnulusColorThumb(id, temp = 0) {
     if (!this.canvasThumb) {
@@ -114,11 +111,11 @@ export default Render({
     ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
     ctx.fillStyle = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
     ctx.fill();
-  
-    if(this.touchCircleStrokeStyle) {
+
+    if (this.touchCircleStrokeStyle) {
       ctx.shadowColor = this.touchCircleStrokeStyle;
     }
-    if(this.touchCircleLineWidth) {
+    if (this.touchCircleLineWidth) {
       ctx.shadowBlur = this.touchCircleLineWidth;
     }
 
@@ -190,13 +187,15 @@ export default Render({
       return { x: thumbPositionX, y: thumbPositionY };
     }
     if (angle > 115 && angle <= 135) {
-        // 修正在范围外的点击区域导致的取色问题
-        const _angle = 135;
-        const realAngle = ((180 - _angle) / 180) * Math.PI;
-  
-      const thumbPositionY =  radius + (innerRingRadius + (radius - innerRingRadius) / 2) * Math.sin(realAngle);
+      // 修正在范围外的点击区域导致的取色问题
+      const _angle = 135;
+      const realAngle = ((180 - _angle) / 180) * Math.PI;
+
+      const thumbPositionY =
+        radius + (innerRingRadius + (radius - innerRingRadius) / 2) * Math.sin(realAngle);
 
-      const thumbPositionX = radius - (innerRingRadius + (radius - innerRingRadius) / 2) * Math.cos(realAngle);
+      const thumbPositionX =
+        radius - (innerRingRadius + (radius - innerRingRadius) / 2) * Math.cos(realAngle);
 
       return { x: thumbPositionX, y: thumbPositionY };
     }

package/package.json

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