可移动区域组件

movable-area 是 Uniapp 中用于创建可拖动和缩放区域的核心组件，广泛应用于实现用户交互的可拖动元素。与普通的拖动不同，movable-area 组件通过与 movable-view 搭配，能够以高性能的方式在指定区域内实现拖动和缩放功能，特别适用于自由布局、图片编辑等场景。

1. 什么是 movable-area 组件？

movable-area 组件定义了一个可以拖动和缩放的区域，允许开发者在此范围内嵌套 movable-view 组件。用户可以通过手势或鼠标拖动 movable-view，甚至可以通过双指手势进行缩放。movable-area 的作用是提供拖动和缩放的边界，确保 movable-view 不会超出该范围。

使用场景

• 图片或对象的拖动和缩放：适用于图片编辑、自由布局等场景，允许用户在指定区域内自由拖动并缩放图片或对象。
• 互动式布局设计：通过 movable-area 组件，用户可以在移动端上进行自由的拖动布局和位置调整。

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

movable-area 组件提供了灵活的配置属性，使得开发者可以控制拖动区域的行为。以下是常用属性的详细说明及使用示例：

属性名	类型	默认值	说明
scale-area	Boolean	false	如果 movable-view 支持双指缩放，设置此属性后，整个 movable-area 都将成为缩放手势的生效区域。

注意：movable-area 必须设置 width 和 height 属性，否则默认宽高为 10px。

2.1 scale-area

• 说明：是否允许 movable-area 区域内的 movable-view 进行缩放。启用后，整个区域都可以接受缩放手势。
• 类型：Boolean
• 默认值：false

<template>
  <movable-area class="movable-area" :scale-area="true">
    <movable-view class="movable-view" :scale="true">
      <view class="content">可以缩放的内容</view>
    </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: lightcoral;
}
</style>

在上述示例中，整个 movable-area 区域都可以进行缩放操作。

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

movable-view 组件是 movable-area 的子组件，实际的拖动和缩放操作都是在 movable-view 内进行的。以下是 movable-view 的常用属性及其详细说明：

属性名	类型	默认值	说明
direction	String	none	设置拖动方向，可选值为 all（全方向拖动）、horizontal（水平拖动）、vertical（垂直拖动）
scale	Boolean	false	是否允许缩放。启用后可以通过双指进行缩放操作。
scale-min	Number	0.5	允许缩放的最小比例。
scale-max	Number	10	允许缩放的最大比例。
inertia	Boolean	false	是否启用惯性拖动。启用后，当手指或鼠标抬起时，视图会继续惯性滑动。

3.1 启用全方向拖动和惯性滑动

• 说明：通过 direction="all" 启用全方向拖动，同时设置 inertia="true" 开启惯性滑动效果。
• 类型：String 和 Boolean
• 默认值：direction 默认为 none，inertia 默认为 false

<template>
  <movable-area class="movable-area">
    <movable-view class="movable-view" direction="all" inertia="true">
      <view class="content">可全方向拖动</view>
    </movable-view>
  </movable-area>
</template>

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

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

4. 实现拖动和缩放功能案例

下面是一个实现可拖动和缩放的案例，用户可以在一个指定区域内自由拖动并缩放视图内容。

<template>
  <view>
    <!-- 定义一个可拖动和缩放的区域 -->
    <movable-area class="movable-area" :scale-area="true">
      <!-- 定义可拖动和缩放的视图，启用双指缩放和全方向拖动 -->
      <movable-view class="movable-view" direction="all" :scale="true" :scale-min="0.5" :scale-max="2" inertia="true">
        <view class="content">
          可拖动且可缩放的内容
        </view>
      </movable-view>
    </movable-area>
  </view>
</template>

<script setup>
// 无复杂逻辑，依赖组件内置行为
</script>

<style scoped>
/* 设置movable-area的尺寸 */
.movable-area {
  width: 300px;
  height: 300px;
  border: 2px solid #ccc;
  position: relative;
}

/* movable-view 的样式 */
.movable-view {
  width: 100px;
  height: 100px;
  background-color: #ffcc00;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 内部内容的样式 */
.content {
  font-size: 16px;
  color: #333;
}
</style>

代码解析：

1. movable-area：该区域定义了 300px x 300px 的可拖动和缩放范围。

   • scale-area="true" 启用了整个区域的缩放功能。

2. movable-view：

   • 拖动方向：通过 direction="all" 允许全方向拖动。
   • 缩放功能：设置 scale="true" 启用了双指缩放功能，并限定了缩放比例范围。
   • 惯性效果：inertia="true" 开启惯性滑动效果。