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

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

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

如图

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

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

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

第一步先画出UI

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

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;
        };
      };
    };

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

整体代码

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

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

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

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

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

github: https://github.com/willian12345

开发问题记录

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

相关

标签