如何实现将拖动物体限制在某个圆形内--实现方式vue3.0

如何实现蓝色小圆可拖动，并且边界限制在灰色大圆内？如下所示

需求源自 业务上遇到一个组件需求，设计师设计了一个“脸型整合器”根据可拖动小圆的位置与其它脸型的位置关系计算融合比例

如图

我们先把具体的人脸功能去掉再分析

中间的蓝色小圆可由鼠标拖动，但拖动需要限制在大的圆形内

以下代码全部为 vue3.0版本，如果你是vue2.0, react，或者原生js ，实现原理都一样

第一步 先画出UI

---

我们的蓝色可拖动小圆点 pointer = ref(null) 为 小圆点dom的 引用

<template>
  <div class="face-blender-container">
    <div class="blender-circle">
      <div
        class="blend-pointer"
        ref="pointer"
        :style="{
          left: `${pointerPosition.x}px`,
          top: `${pointerPosition.y}px`,
        }"
      ></div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";

export default {
  setup() {
    const BLENDER_BORDER_WIDTH = 2; // 圆形混合器边宽
    const BLENDER_RADIUS = 224 * 0.5 - BLENDER_BORDER_WIDTH; // 圆形混合器半径
    // 圆形混合器中心点
    const center = {
      x: BLENDER_RADIUS,
      y: BLENDER_RADIUS,
    };
    const state = reactive({
      pointerPosition: { x: center.x, y: center.y },
    });
    const pointer = ref(null);

    return {
      ...toRefs(state),
      pointer,
    };
  },
};
</script>

<style lang="less" scoped>
@stageDiameter: 360px;
@blenderCircleDiameter: 224px;
@PointerDiameter: 20px;
.face-blender-container {
  position: relative;
  width: @stageDiameter;
  height: @stageDiameter;
}
.blender-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: @blenderCircleDiameter * -0.5;
  margin-top: @blenderCircleDiameter * -0.5;
  width: @blenderCircleDiameter;
  height: @blenderCircleDiameter;
  border-radius: @blenderCircleDiameter;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.08);
}

.blend-pointer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: @PointerDiameter;
  height: @PointerDiameter;
  margin-left: @PointerDiameter * -0.5;
  margin-top: @PointerDiameter * -0.5;
  border-radius: @PointerDiameter;
  background: #11bbf5;
  border: 2px solid #ffffff;
  z-index: 10;
}
</style>

ui 如图(整体背景为黑色)

第二步 实现小圆点的无限制拖动

---

此时小圆点是可以拖到圆外的如图

// 可拖动圆型指示器
    const initPointer = () => {
      const pointerDom = pointer.value;
      pointerDom.onmousedown = (e) => {
        // 鼠标按下，计算当前元素距离可视区的距离
        const originX = e.clientX - pointerDom.offsetLeft - POINTER_RADIUS;
        const originY = e.clientY - pointerDom.offsetTop - POINTER_RADIUS;
        document.onmousemove = function (e) {
          // 通过事件委托，计算移动的距离
          const left = e.clientX - originX;
          const top = e.clientY - originY;

          state.pointerPosition.x = left
          state.pointerPosition.y = top
        };
        document.onmouseup = function (e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    };

    onMounted(() => {
      initPointer();
    });

注意是在onMouted 勾子内初始化的可拖动代码

第三步 实现小圆点的限制在大圆内拖动

---

由于是要限制在圆形内，与限制在方形内的通常计算方法不一样

关键点是计算鼠标 mousemove 时与大圆中心点的弧度 radian 与 距离 dist

弧度公式

dx = x2 - x1

dy = y2 - y1

radian = Math.atan2(dy, dx)

距离公式

dist = Math.sqrt(dx * dx + dy * dy)

当计算出了弧度与距离后，则要计算具体位置了

圆形位置公式
x = 半径 * Math.cos(弧度) + 中心点x
y = 半径 * Math.sin(弧度) + 中心点y

可以看出在圆形公式内控制或限制半径，就限制了小圆的可拖动最大半径范围，所以需要判断，当dist距离大于等于半径时，计算圆形公式内的半径设置为大圆半径即可

具体代码

// 计算 x y
    const getPositionByRadian = (radian, radius) => {
      const x = radius * Math.cos(radian) + center.x;
      const y = radius * Math.sin(radian) + center.y;
      return { x, y };
    };
    // 可拖动圆形指示器
    const initPointer = () => {
      const pointerDom = pointer.value;
      pointerDom.onmousedown = (e) => {
        // 鼠标按下，计算当前元素距离可视区的距离
        const originX = e.clientX - pointerDom.offsetLeft - POINTER_RADIUS;
        const originY = e.clientY - pointerDom.offsetTop - POINTER_RADIUS;
        document.onmousemove = function (e) {
          // 通过事件委托，计算移动的距离
          const left = e.clientX - originX;
          const top = e.clientY - originY;
          const dx = left - center.x;
          const dy = top - center.y;
          // 计算当前鼠标与中心点的弧度
          const radian = Math.atan2(dy, dx);
          // 计算当前鼠标与中心点距离
          const dist = Math.sqrt(dx * dx + dy * dy);
          const radius = dist >= BLENDER_RADIUS ? BLENDER_RADIUS : dist;
          // 根据半径与弧度计算 x, y
          const { x, y } = getPositionByRadian(radian, radius);
          state.pointerPosition.x = x
          state.pointerPosition.y = y
        };
        document.onmouseup = function (e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    };

这样就实现了最大可拖动范围限制在大圆边界

---

整体代码

<template>
  <div class="face-blender-container">
    <div class="blender-circle">
      <div
        class="blend-pointer"
        ref="pointer"
        :style="{
          left: `${pointerPosition.x}px`,
          top: `${pointerPosition.y}px`,
        }"
      ></div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";

export default {
  setup() {
    const BLENDER_BORDER_WIDTH = 2; // 圆形混合器边宽
    const BLENDER_RADIUS = 224 * 0.5 - BLENDER_BORDER_WIDTH; // 圆形混合器半径
    const POINTER_RADIUS = 20 * 0.5; // 可拖动指示器半径
    // 圆形混合器中心点
    const center = {
      x: BLENDER_RADIUS,
      y: BLENDER_RADIUS,
    };
    const state = reactive({
      pointerPosition: { x: center.x, y: center.y },
    });
    const pointer = ref(null);
    // 计算 x y
    const getPositionByRadian = (radian, radius) => {
      const x = radius * Math.cos(radian) + center.x;
      const y = radius * Math.sin(radian) + center.y;
      return { x, y };
    };
    // 可拖动圆型指示器
    const initPointer = () => {
      const pointerDom = pointer.value;
      pointerDom.onmousedown = (e) => {
        // 鼠标按下，计算当前元素距离可视区的距离
        const originX = e.clientX - pointerDom.offsetLeft - POINTER_RADIUS;
        const originY = e.clientY - pointerDom.offsetTop - POINTER_RADIUS;
        document.onmousemove = function (e) {
          // 通过事件委托，计算移动的距离
          const left = e.clientX - originX;
          const top = e.clientY - originY;
          const dx = left - center.x;
          const dy = top - center.y;
          // 计算当前鼠标与中心点的弧度
          const radian = Math.atan2(dy, dx);
          // 计算当前鼠标与中心点距离
          const dist = Math.sqrt(dx * dx + dy * dy);
          const radius = dist >= BLENDER_RADIUS ? BLENDER_RADIUS : dist;
          // 根据半径与弧度计算 x, y
          const { x, y } = getPositionByRadian(radian, radius);
          state.pointerPosition.x = x
          state.pointerPosition.y = y
        };
        document.onmouseup = function (e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    };

    onMounted(() => {
      initPointer();
    });

    return {
      ...toRefs(state),
      pointer,
    };
  },
};
</script>

<style lang="less" scoped>
@stageDiameter: 360px;
@blenderCircleDiameter: 224px;
@faceCircleDiameter: 64px;
@PointerDiameter: 20px;
.face-blender-container {
  position: relative;
  width: @stageDiameter;
  height: @stageDiameter;
}
.blender-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: @blenderCircleDiameter * -0.5;
  margin-top: @blenderCircleDiameter * -0.5;
  width: @blenderCircleDiameter;
  height: @blenderCircleDiameter;
  border-radius: @blenderCircleDiameter;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.08);
}

.blend-pointer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: @PointerDiameter;
  height: @PointerDiameter;
  margin-left: @PointerDiameter * -0.5;
  margin-top: @PointerDiameter * -0.5;
  border-radius: @PointerDiameter;
  background: #11bbf5;
  border: 2px solid #ffffff;
  z-index: 10;
}
</style>

---

至于其它计算距离，计算反比例的脸形整合业务代码，就不放了

脸形容器的位置还是用圆形公式算出来

各个脸形容器与小圆点距离，距离还是用距离公式得出

知道各个距离了就可以根据业务需要算比例了

---

转载入注明博客园池中物 willian12345@126.com sheldon.wang

github: https://github.com/willian12345

---