可移动视图组件

movable-view 是 Uniapp 中用于实现可拖动和缩放的视图容器组件。该组件允许用户通过拖动、滑动、缩放等交互操作自由调整内容的位置和大小。movable-view 组件必须嵌套在 movable-area 组件中，并且可以控制拖动方向、缩放范围、惯性滑动等功能，非常适用于需要用户交互的场景，例如图片编辑和自由布局等。

1. 什么是 movable-view 组件？

movable-view 组件作为一个可拖动和缩放的元素，通常用于交互式的用户界面中，比如拖动图像、调整对象位置等。它必须嵌套在 movable-area 内，才能实现拖动和缩放功能。movable-view 允许用户通过触控操作或代码控制其位置、大小等。

使用场景

• 图片或地图的拖动与缩放：适合用于需要用户自由拖动或缩放的场景，比如图片查看器或地图应用。
• 布局自由调整：在设计工具或应用中，允许用户拖动元素来自定义布局或设计内容。
• 动画与交互控制：通过代码控制 movable-view 的位置变化或缩放，结合动画实现复杂的用户交互效果。

2. movable-view 组件的常用属性

movable-view 组件提供了一些属性，允许开发者根据需要配置拖动方向、缩放倍数、惯性效果等。以下是一些常用属性及其说明：

属性名	类型	默认值	说明
direction	String	'none'	设置可移动的方向，可选值：'all'（全方向）、'vertical'（垂直）、'horizontal'（水平）、'none'（禁止移动）
inertia	Boolean	false	是否启用拖动惯性，启用后，拖动松手时视图会有惯性滑动效果
out-of-bounds	Boolean	false	是否允许 movable-view 超出 movable-area 可移动区域
x	Number/String	无	X 轴方向的初始位置，单位为 px
y	Number/String	无	Y 轴方向的初始位置，单位为 px
damping	Number	20	阻尼系数，控制移动的动画效果，值越大动画越快
friction	Number	2	摩擦系数，控制惯性滑动的速度，值越大滑动越快停止
disabled	Boolean	false	是否禁用 movable-view 的移动和缩放功能
scale	Boolean	false	是否启用双指缩放功能
scale-min	Number	0.5	最小缩放倍数
scale-max	Number	10	最大缩放倍数
scale-value	Number	1	当前缩放倍数
animation	Boolean	true	是否启用动画过渡

2.1 控制拖动方向 direction

• 说明：设置 movable-view 的拖动方向，可以选择垂直、水平或全方向拖动。
• 类型：String
• 默认值：'none'

<template>
  <movable-area class="movable-area">
    <movable-view direction="all">自由拖动</movable-view>
  </movable-area>
</template>

<style scoped>
.movable-area {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}

.movable-view {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  text-align: center;
  line-height: 100px;
}
</style>

2.2 启用惯性滑动 inertia

• 说明：启用惯性效果后，用户松开拖动操作时，视图会根据滑动速度继续惯性移动。
• 类型：Boolean
• 默认值：false

<template>
  <movable-area class="movable-area">
    <movable-view direction="all" inertia="true">惯性滑动</movable-view>
  </movable-area>
</template>

<style scoped>
.movable-area {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}

.movable-view {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  text-align: center;
  line-height: 100px;
}
</style>

2.3 启用双指缩放 scale

• 说明：启用双指缩放功能，用户可以通过双指手势缩放视图。
• 类型：Boolean
• 默认值：false

<template>
  <movable-area class="movable-area" :scale-area="true">
    <movable-view scale="true" :scale-min="0.5" :scale-max="2">可缩放视图</movable-view>
  </movable-area>
</template>

<style scoped>
.movable-area {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}

.movable-view {
  width: 150px;
  height: 150px;
  background-color: lightcoral;
  text-align: center;
  line-height: 150px;
}
</style>

3. 实现拖动与缩放的案例

以下代码展示了一个可拖动和缩放的案例，结合了多个属性来控制拖动方向、惯性滑动以及缩放功能。

<template>
  <view>
    <!-- 定义一个可拖动和缩放的区域 -->
    <movable-area class="movable-area" :scale-area="true">
      <!-- movable-view 实现可缩放和自由拖动 -->
      <movable-view direction="all" scale="true" inertia="true" :scale-min="0.5" :scale-max="2" @change="onChange" @scale="onScale">
        拖动与缩放视图
      </movable-view>
    </movable-area>
  </view>
</template>

<script setup>
const onChange = (e) => {
  console.log(`移动至: x = ${e.detail.x}, y = ${e.detail.y}`)
}

const onScale = (e) => {
  console.log(`缩放比例: ${e.detail.scale}`)
}
</script>

<style scoped>
/* 定义 movable-area 区域的大小和边框 */
.movable-area {
  width: 300px;
  height: 300px;
  border: 2px solid #ccc;
}

/* 定义 movable-view 的样式 */
.movable-view {
  width: 100px;
  height: 100px;
  background-color: #ffcc00;
  text-align: center;
  line-height: 100px;
  border-radius: 8px;
}
</style>

代码解析

1. movable-area：定义了一个 300px x 300px 的可拖动区域。
2. movable-view：设置了 direction="all" 允许用户在该区域内全方向拖动，同时启用了惯性滑动 inertia="true" 和缩放功能 scale="true"。
3. 事件监听：通过 @change 监听拖动事件，通过 @scale 监听缩放事件，在控制台输出视图移动的坐标和缩放比例。