圆盘拖动

components/circleCom/index.css

+/* c:\Users\Tina\Desktop\tuya-miniapp-explorer-template\components/circleCom.css */
+.app {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #264653;
+}
+.circle-container {
+  position: relative;
+  z-index: 30;
+}
+.circle-container .circle {
+  position: absolute;
+  z-index: 10;
+  left: 0;
+  top: 0;
+  border-radius: 50%;
+  border: 10px solid #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #ffffff;
+  font-size: 20px;
+  -webkit-user-select: none;
+}
+.circle-container .circle-bar {
+  position: absolute;
+  z-index: 50;
+  border-radius: 50%;
+  background-color: transparent;
+  border:4px solid rgba(255, 255, 255, 1);
+  cursor: pointer;
+  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.6);
+}

components/circleCom/index.js

+// c:\Users\Tina\Desktop\tuya-miniapp-explorer-template\components/circleCom.js
+Component({
+  options: {},
+  properties: {
+
+  },
+  data: {
+    isDrag: false,
+    angleValue: 0, // 角度信息 0 ~ 360
+    angelShow: 0, // 角度展示 0 ~ 180
+    tempValue:[2700,6500], // 色温范围
+    tempshow:(6500-2700)/2+2700, // 色温展示
+
+    containerWidth: 200, //容器宽度
+    containerHeight: 200, //容器高度
+    containerOffset: { // 容器位置
+      x: 50,
+      y: 50
+    },
+
+    mouse_offset: { x: 0, y: 0 },
+
+    circle_r: 100, // 圆形外半径(容器宽度/2)
+    circle_b: 42, // 圆形边距
+    bar_r: 21, // 小球半径(圆形边距/2)
+
+    angleLimit: 135, // 角度限制
+
+    barStyle_left: 79, // 小球位置(容器宽度/2-小球半径)
+    barStyle_top: 0
+  },
+  pageLifetimes: {
+    show: function () {
+      const that = this
+      const query = this.createSelectorQuery()
+      query.select("#container").boundingClientRect(function (res) {
+        that.setData({
+          'containerOffset.x': res.left,
+          'containerOffset.y': res.top
+        })
+      }).exec()
+    }
+  }, // 组件生命周期
+  methods: {
+    barTouch: function (e) {
+      this.getMouseOffset(e)
+    },
+
+    barMove: function (e) {
+      const event_offset_x = (e.touches[0].clientX
+        - this.data.mouse_offset.x
+        - this.data.containerOffset.x
+        - this.data.circle_r)
+      const event_offset_y = -(e.touches[0].clientY
+        - this.data.mouse_offset.y
+        - this.data.containerOffset.y
+        - this.data.circle_r)
+
+      const radian = Math.atan2(event_offset_y, event_offset_x)
+      const x = Math.cos(radian) * (this.data.circle_r - this.data.circle_b / 2)
+      const y = Math.sin(radian) * (this.data.circle_r - this.data.circle_b / 2)
+
+      const left = x - this.data.bar_r + this.data.circle_r
+      const top = this.data.circle_r - (y + this.data.bar_r)
+
+      this.updateContent(radian)
+
+      if (!this.data.isDrag) {
+        return
+      }
+      this.setData({
+        barStyle_left: left,
+        barStyle_top: top
+      })
+    },
+
+    updateContent: function (radian) {
+      let angle = radian * (180 / Math.PI)  // -180 ~ 180
+      if (angle >= -180 && angle <= 90) {
+        angle = 90 - angle
+      } else {
+        angle = 360 - (angle - 90)
+      }
+      // 0 ~ 360
+      const angleValue = Math.floor(angle)
+
+      // 0 ~ 180
+      const angelShow = angleValue > 180 ? 360 - angleValue : angleValue
+
+      const tempStart=this.data.tempValue[0]
+      const tempEnd=this.data.tempValue[1]
+      const angleLimit=this.data.angleLimit
+
+      let tempshow=(tempEnd-tempStart)/2+tempStart // 中间值 角度对应0
+      if(angleValue < 180){
+        tempshow=tempshow+(tempEnd-tempshow)/angleLimit*angelShow
+      }
+
+      if(angleValue > 180){
+        tempshow=tempshow-(tempEnd-tempshow)/angleLimit*angelShow
+      }
+
+      if (angelShow > 135) {
+        this.setData({
+          isDrag: false,
+        })
+        return
+      } else if (!this.data.isDrag) {
+        this.setData({
+          isDrag: true,
+        })
+      }
+      tempshow=Math.floor(tempshow)
+      this.setData({
+        angleValue: angleValue,
+        angelShow: angelShow,
+        tempshow:tempshow
+      })
+    },
+
+    getMouseOffset: function (e) {
+      // 移动距离：小球的坐标位置-容器的偏移位置-小球相对容器的偏移位置-小球半径
+      const mouse_offset_x = (e.touches[0].clientX
+        - this.data.containerOffset.x
+        - e.currentTarget.offsetLeft
+        - this.data.bar_r)
+      const mouse_offset_y = -(e.touches[0].clientY
+        - this.data.containerOffset.y
+        - e.currentTarget.offsetTop
+        - this.data.bar_r)
+      this.setData({
+        'mouse_offset.x': mouse_offset_x,
+        'mouse_offset.y': mouse_offset_y
+      })
+    }
+  }
+});
\ No newline at end of file

components/circleCom/index.json

+{
+  "component": true
+}

components/circleCom/index.tyml

+<view class="circle-container"  id="container"
+      style="width:{{containerWidth}}px;
+             height:{{containerHeight}}px;
+             background-image: url(../../assets/images/test/tempBg.png);
+             background-size:{{containerWidth}}px {{containerHeight}}px
+             " 
+    >
+    <view class="circle" 
+          style="width:{{circle_r}}px;
+          height:{{circle_r}}px;
+          left:{{containerWidth/2-circle_r/2}}px;
+          top:{{containerWidth/2-circle_r/2}}px">
+          {{tempshow}}K
+    </view>
+    <view class="circle-bar" 
+          style="left:{{barStyle_left}}px;
+                 top:{{barStyle_top}}px;
+                 width:{{bar_r*2}}px;
+                 height:{{bar_r*2}}px;" 
+          catchtouchstart="barTouch" 
+          catchtouchmove="barMove" 
+    >
+    </view>
+</view>

pages/testDemo/index.json

@@ -6,6 +6,7 @@
   "enablePullDownRefresh": true,
   "onReachBottomDistance": 100,
   "usingComponents": {
-    "mpicon": "@tuya-miniapp/miniapp-components-plus/iconEx/index"
+    "mpicon": "@tuya-miniapp/miniapp-components-plus/iconEx/index",
+    "circleCom":"/components/circleCom/index"
   }
 }
\ No newline at end of file

pages/testDemo/index.tyml

@@ -12,22 +12,7 @@
   <view style="backgroundColor:black; height: 100vh">
     <view class="{{!dpCodes.switch_led ? 'backimg' :''}} content">
       <view ty:if="{{dpCodes.switch_led}}" class="img-container">
-        <image
-          src="/assets/images/test/tempBg.png"
-          style="width:{{radius * 2}}rpx;height: {{radius * 2}}rpx;borderRadius:{{radius}}rpx"
-        />
-        <view class="thumb" style="left{{-thumbSize / 2}}px;
-                top: {{-tempProps.thumbSize / 2}}px;
-                width: {{tempProps.thumbSize}}px;
-                height: {{tempProps.thumbSize}}px;
-                borderRadius: {{tempProps.thumbSize / 2}}px;
-                opacity: {{disabled ? 0.2 : 1}};
-                transform:translate({{tempProps.thumbX}}px,{{tempProps.thumbY}}px);
-                "
-                catchtouchstart="controlTemp"
-                >
-        
-        </view>
+            <circleCom></circleCom>
       </view>
       <view>
         <view  ty:if="{{dpCodes.switch_led}}" class="config-list">

pages/testDemo/index.tyss

@@ -133,3 +133,10 @@
   background-color: transparent;
   border: 5px solid #fff;
 }
+
+.circleContent {
+  /* display: flex;
+  justify-content: center;
+  align-items: center; */
+  padding:50px
+}