角度转换并获取定位

src/components/hubCircle/index.tsx

@@ -76,18 +76,19 @@ const HubCircle: React.FC<Props> = props => {
     let rad;
     let left = 79;
     let top = 0;
-    if (tempValue >= 500) {
+    if (tempValue > 500) {
       rad = ((tempValue - 500) * (dataSourse.angleLimit / 500) * Math.PI) / 180;
       const y = dataSourse.bar_c_r * Math.cos(rad);
       const x = dataSourse.bar_c_r * Math.sin(rad);
-      left = left - dataSourse.bar_r + x;
+      left += x;
       top = dataSourse.circle_r - y - dataSourse.bar_r;
     }
+
     if (tempValue < 500) {
-      rad = (tempValue * (dataSourse.angleLimit / 500) * Math.PI) / 180;
-      const x = dataSourse.bar_c_r * Math.cos(rad);
+      rad = ((500 - tempValue) * (dataSourse.angleLimit / 500) * Math.PI) / 180;
+      const x = dataSourse.bar_c_r * Math.sin(rad);
       const y = dataSourse.bar_c_r * Math.cos(rad);
-      left = left + dataSourse.bar_r - x;
+      left -= x;
       top = dataSourse.circle_r - y - dataSourse.bar_r;
     }
     return {
@@ -305,7 +306,6 @@ const HubCircle: React.FC<Props> = props => {
               top: `${circleLocation.top}px`,
               width: `${dataSourse.bar_r * 2}px`,
               height: `${dataSourse.bar_r * 2}px`,
-              transform: `translateX(${translateX}px) translateY(${translateY}px)`,
             }}
             onTouchStart={handleBarTouch}
             onTouchMove={handleBarMove}
@@ -314,7 +314,7 @@ const HubCircle: React.FC<Props> = props => {
         </View>
       </View>
       <View className={styles.panel}>
-        <View className={styles.configList}>
+        {/* <View className={styles.configList}>
           <Image src={imgs.icon_bhd} className={styles.icoImg} />
           <View className={styles.slider}>
             <Slider
@@ -335,7 +335,7 @@ const HubCircle: React.FC<Props> = props => {
             )}
             %
           </Text>
-        </View>
+        </View> */}
         <View className={styles.configList}>
           <Image src={imgs.icon_ld} className={styles.icoImg} />
           <View className={styles.slider}>

src/components/hubColorCircle/index.tsx

@@ -43,6 +43,7 @@ const HubCircle: React.FC<Props> = props => {
     circle_r: 100, // 圆形外半径(容器宽度/2)
     circle_b: 42, // 圆形边距
     bar_r: 21, // 小球半径(圆形边距/2)
+    bar_c_r: 100 - 21, // 小球轨迹半径(圆形边距/2)
 
     hue: 270,
   };
@@ -62,15 +63,46 @@ const HubCircle: React.FC<Props> = props => {
 
   const [dataState, setDataState] = useState({
     hue: Hue, // 角度展示 0 ~ 180
-    temp_value: 500,
-    bright_value: 500,
+    temp_value: Temp_value,
+    bright_value: Bright_value,
     nowColor: hueToColor(Hue), // 当前颜色
   });
 
+  const circleLocationOrigin = (hue: number) => {
+    let angel = hue - 90;
+    let rad;
+    let left = 79;
+    let top = 0;
+
+    if (angel > 180) {
+      angel = -(360 - angel);
+    }
+
+    if (angel < 0) {
+      rad = (-angel * Math.PI) / 180;
+      const y = dataSourse.bar_c_r * Math.cos(rad);
+      const x = dataSourse.bar_c_r * Math.sin(rad);
+      left += x;
+      top = dataSourse.circle_r - y - dataSourse.bar_r;
+    }
+    if (angel > 0) {
+      rad = (angel * Math.PI) / 180;
+      const x = dataSourse.bar_c_r * Math.sin(rad);
+      const y = dataSourse.bar_c_r * Math.cos(rad);
+      left -= x;
+      top = dataSourse.circle_r - y - dataSourse.bar_r;
+    }
+
+    return {
+      left,
+      top,
+    };
+  };
+
   const [circleLocation, setCircleLocation] = useState({
     // 小球位置
-    left: 79,
-    top: 0,
+    left: circleLocationOrigin(Hue).left,
+    top: circleLocationOrigin(Hue).top,
   });
 
   const toParseInt = (value: number): number => {
@@ -80,7 +112,6 @@ const HubCircle: React.FC<Props> = props => {
   const handleCirleClick = (e: any, item: colorItem): void => {
     e.origin.stopPropagation();
     const dpValue = hsvToDpdata(dataState.hue, dataState.temp_value, dataState.bright_value);
-    console.log(dpValue);
     props.onSetDpState('colour_data', dpValue);
     const index = colorArr.findIndex(el => {
       return (