如何实现将拖动物体限制在某个圆形内--实现方式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

巴特西

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

最新文章

热门文章