添加彩色

project.tuya.json

@@ -10,5 +10,5 @@
     "DeviceKit": "2.4.7"
   },
   "baseversion": "2.9.5",
-  "productId": "hewd8dsaiwxpznpr"
-}
\ No newline at end of file
+  "productId": "qton0thk3uxf77hv"
+}

src/components/hubColorCircle/index.module.css

+.sectionRing {
+  align-items: center;
+  justify-content: center;
+}
+.bar {
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  background-color: '#fff';
+  box-shadow: 0 5rpx 12rpx rgba(0, 0, 0, 0.6);
+}

src/components/hubColorCircle/index.module.less

-.led {
+.sectionRing {
+  align-items: center;
+  justify-content: center;
+}
+.bar {
   position: absolute;
-  align-items:center;
-  justify-content:center;
+  align-items: center;
+  justify-content: center;
+  background-color: '#fff';
+  box-shadow: 0 5rpx 12rpx rgba(0, 0, 0, 0.6);
 }

src/components/hubColorCircle/index.tsx

@@ -8,142 +8,169 @@ import imgs from '../../res';
 
 const { hsv2rgbString } = utils;
 
+// onStartShouldSetPanResponder: this.handleSetResponder,  判断是否按中滑块
+//       onMoveShouldSetPanResponder: () => this.locked,
+//       onPanResponderGrant: this.handleGrant,
+//       onPanResponderMove: this.handleMove, 开始移动
+//       onPanResponderRelease: this.handleRelease, 完成一个手势操作
+
 const HubColorCircle: React.FC<Props> = props => {
   const dpState = props.DpStateData;
   const codeMap = props.DpCodesMap;
 
-  const LED_SIZE = 110;
-  const HUE_RADIUS = 135;
-  const HUE_INNER_RADIUS = 76;
-  const THUMB_RADIUS = 27.5;
-  const THUMB_INNER_RADIUS = 22.5;
-
-  const hue = 180;
-  const brightness = 500;
-  const saturation = 500;
-
-  const [styleState, setStyleState] = useState({
-    container: {
-      flex: 1,
-      alignSelf: 'stretch',
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginTop: 40,
-    },
+  const data = {
+    radius: 135,
+    innerRadius: 76, // 内半径
+    thumbRadius: 27.5, // 圆球半径
+    thumbInnerRadius: 22.5, // 圆球内环
+    ringSize: 135 - 76, // 圆环尺寸
+
+    cx: 135 - 27.5,
+    cy: 135 - 27.5,
 
-    displayView: {
-      width: HUE_RADIUS * 2,
-      height: HUE_RADIUS * 2,
+    fixedLength: 135 - (135 - 76) * 0.5, // 可拖动圆球至原点的固定距离（令圆球始终在在色环中居中）
+
+    containerOffset: {
+      // 容器位置
+      x: 0,
+      y: 0,
     },
 
-    led: {
-      left: (HUE_RADIUS * 2 - LED_SIZE) * 0.5,
-      top: (HUE_RADIUS * 2 - LED_SIZE) * 0.5,
-      width: LED_SIZE,
-      height: LED_SIZE,
-      borderRadius: LED_SIZE * 0.5,
-      backgroundColor: 'transparent',
+    mouseMove: {
+      // 父元素偏移
+      x: 0,
+      y: 0,
     },
 
-    controlView: {
-      height: 120,
-      alignSelf: 'stretch',
-      justifyContent: 'space-around',
-      marginTop: 15,
+    location: {
+      // 点击时的小球位置
+      x: 0,
+      y: 0,
     },
-  });
 
-  const toParseInt = (value: number): number => {
-    return Math.floor(value);
+    disabled: false,
+    RingBackground: imgs.colorBg,
+    hue: 0, // 色相
   };
 
-  const handleColorChange = useCallback(
-    (value, type) => {
-      let h = 0;
-      let s = saturation;
-      let v = brightness;
-      switch (type) {
-        case 'hue':
-          h = value;
-          break;
-        case 'saturation':
-          s = value;
-          break;
-        case 'brightness':
-          v = value;
-          break;
-        default:
-          break;
-      }
-      updatePreview(h, s, v);
-      // putControlDataDP(h, s, v);
-    },
-    [hue, saturation, brightness]
-  );
+  const hueToColor = hue => {
+    return hsv2rgbString(hue, 1000, 1000);
+  };
 
-  const updatePreview = (h: number, s: number, v: number) => {
-    const backgroundColor = hsv2rgbString(h, s, v);
-    const data = { ...styleState };
-    data.setStyleState({
-      ...backgroundColor,
-      backgroundColor,
-    });
+  const [translateX, setTranslateX] = useState(0);
+  const [translateY, setTranslateY] = useState(0);
+  const [nowColor, setNowColor] = useState(hueToColor(data.hue));
+
+  const getCoordByHue = (hue: number) => {
+    const rad = ((360 - hue) * Math.PI) / 180;
+    const x = data.cx + data.fixedLength * Math.cos(rad);
+    const y = data.cy + data.fixedLength * Math.sin(rad);
+    return { x, y };
   };
 
-  // 长度不够补齐位数
-  const format = (value: string, len = 2) => {
-    let v = `${value}`;
-    if (v.length < len) {
-      v = '0'.repeat(len - v.length) + v;
-    } else {
-      v = v.slice(0, len);
-    }
-    return v;
+  const handleBarTouch = e => {
+    data.location.x = e.origin.touches[0].clientX;
+    data.location.y = e.origin.touches[0].clientY;
+    data.mouseMove.x = e.origin.currentTarget.offsetLeft;
+    data.mouseMove.y = e.origin.currentTarget.offsetTop;
   };
-  // m: mode; h: hue; s: saturation; v: lightValue; b: whiteBright; k: kelvin;
-  // mode: 0 - 跳变; 1 - 呼吸;
-  const encodeControlData = (m: number, h: number, s: number, v: number, b: number, k: number) => {
-    const hsvbk = [h, s, v, b, k].reduce((total: string, next: number) => {
-      let cur = parseInt(`${next}`, 10).toString(16);
-      cur = format(cur, 4);
-      return total + cur;
-    }, '');
-    return m + hsvbk;
+
+  const getHueByCoord = (dx: number, dy: number) => {
+    // 0 ~ 2π
+    const rad = getRadianByCoord(dx, dy);
+    return (rad * 180) / Math.PI;
+  };
+
+  const getRadianByCoord = (dx: number, dy: number) => {
+    const { thumbRadius } = data;
+    const xCenter = dx - data.cx - thumbRadius;
+    const yCenter = dy - data.cy - thumbRadius;
+    let rad = Math.atan2(yCenter, xCenter);
+    if (xCenter > 0 && yCenter > 0) rad = Math.PI * 2 - rad;
+    if (xCenter < 0 && yCenter > 0) rad = Math.PI * 2 - rad;
+    if (xCenter < 0 && yCenter < 0) rad = Math.abs(rad);
+    if (xCenter > 0 && yCenter < 0) rad = Math.abs(rad);
+    if (xCenter === 0 && yCenter > 0) rad = (Math.PI * 3) / 2;
+    if (xCenter === 0 && yCenter < 0) rad = Math.PI / 2;
+    return rad;
+  };
+
+  const handleMove = e => {
+    // 最近一次的移动路程
+    const dx = e.origin.touches[0].clientX - data.location.x;
+    const dy = e.origin.touches[0].clientY - data.location.y;
+
+    const hue = Math.round(getHueByCoord(dx, dy));
+    const { x = 0, y = 0 } = getCoordByHue(hue);
+    const color = hueToColor(hue);
+    setTranslateX(x);
+    setTranslateY(y);
+    setNowColor(color);
   };
 
   return (
-    <View className={styles.box}>
-      <View className={styles.header}>
-        <View style={styleState.displayView}>
-          <View className={styles.led} style={styleState.led} />
-        </View>
+    <View className={styles.box} style={{ width: data.radius * 2, height: data.radius * 2 }}>
+      {/* 圆环 */}
+      <View
+        className={styles.sectionRing}
+        style={{ width: data.radius * 2, height: data.radius * 2 }}
+      >
+        <Image
+          style={{
+            width: data.radius * 2,
+            height: data.radius * 2,
+            borderRadius: data.radius,
+          }}
+          src={imgs.colorBg}
+        />
       </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
-                activeColor="#fff"
-                backgroundColor="#333333"
-                min={0}
-                max={1000}
-                step={1}
-                value={brightness}
-                onChange={e => handleColorChange(e.value, 'brightness')}
-              />
-            </View>
-            <Text className={styles.SliderValue}>
-              {toParseInt(
-                (dpState.temp_value /
-                  (codeMap.temp_value.property.max - codeMap.temp_value.property.min)) *
-                  100
-              )}
-              %
-            </Text>
-          </View>
-        </View>
+
+      {/* 圆球 */}
+      <View
+        className={styles.bar}
+        style={{
+          width: data.thumbRadius * 2,
+          height: data.thumbRadius * 2,
+          borderRadius: data.thumbRadius,
+          opacity: 1,
+          transform: `translateX(${translateX}) translateY(${translateY})`,
+        }}
+        onTouchStart={handleBarTouch}
+        onTouchMove={handleMove}
+      >
+        <View
+          style={{
+            width: data.thumbInnerRadius * 2,
+            height: data.thumbInnerRadius * 2,
+            borderRadius: data.thumbInnerRadius,
+            backgroundColor: nowColor,
+          }}
+        />
       </View>
     </View>
   );
 };
+
+export default HubColorCircle;
+// nativeEvent
+// changedTouches - 在上一次事件之后，所有发生变化的触摸事件的数组集合（即上一次事件后，所有移动过的触摸点）
+// identifier - 触摸点的 ID
+// locationX - 触摸点相对于父元素的横坐标
+// locationY - 触摸点相对于父元素的纵坐标
+// pageX - 触摸点相对于根元素的横坐标
+// pageY - 触摸点相对于根元素的纵坐标
+// target - 触摸点所在的元素 ID
+// timestamp - 触摸事件的时间戳，可用于移动速度的计算
+// touches - 当前屏幕上的所有触摸点的集合
+// 一个gestureState对象有如下的字段：
+
+// stateID - 触摸状态的 ID。在屏幕上有至少一个触摸点的情况下，这个 ID 会一直有效。
+// moveX - 最近一次移动时的屏幕横坐标
+// moveY - 最近一次移动时的屏幕纵坐标
+// x0 - 当响应器产生时的屏幕坐标
+// y0 - 当响应器产生时的屏幕坐标
+// dx - 从触摸操作开始时的累计横向路程
+// dy - 从触摸操作开始时的累计纵向路程
+// vx - 当前的横向移动速度
+// vy - 当前的纵向移动速度
+// numberActiveTouches - 当前在屏幕上的有效触摸点的数量

src/pages/home/index.tsx

@@ -5,6 +5,7 @@ import { DpState, dpStateAtom, selectDpStateAtom } from '@/atoms';
 import { getDpStateMapByDevInfo, mapDpsMapToDpStateMap, getDpCodeMapByDevInfo } from '@/utils';
 import { ScrollView, View, Text, Image } from '@ray-js/components';
 import HubCircle from '@/components/hubCircle';
+import HubColorCircle from '@/components/hubColorCircle';
 import { hooks, kit } from '@ray-js/panel-sdk';
 import styles from './index.module.less';
 import imgs from '../../res';
@@ -97,7 +98,11 @@ export function Home() {
                   onSetDpState={handleSetPdState}
                 />
               ) : (
-                <View>123</View>
+                <HubColorCircle
+                  DpStateData={DpStateData}
+                  DpCodesMap={DpCodesMap}
+                  onSetDpState={handleSetPdState}
+                />
               )}
             </View>
           )}