# 放大效果

<scene-enlarge />

### 实现原理

放大区域根据鼠标在标准区域内的位置设置放大区域的中心点,放大区域的放大比例可以任意设置

#### 实现步骤

1.添加2个 canvas 元素,并且实例化2个 view 视图, 以下称为 标准视图 和 放大视图;

2.实例化一个场景(scene), 并且在场景中添加需要展示的元素;

3.为场景中展示的元素绑定``` onMouseMove ```事件, 参数意义依次为 (事件名, 接收者, 回调函数);

4.先将场景(scene)的``` view ```属性设置为放大视图, 后再将该属性设置为标准视图;

5.编写回调函数, 回调函数的功能为: 根据点坐标, 设置放大视图的中心位置;

6.完毕; 鼠标移入标准视图,就可以在放大视图中看到效果了

##### 详细请看以下 代码详情

::: details 查看代码
<<< @/docs/.vuepress/components/scene/enlarge.vue
:::

::: tip 注意事项

1.该示例为做演示效果设置了,标准视图的不可缩放``` scalable ```为``` false ```

2.演示效果中放大视图设置的放缩比例为放大标准图的 3 倍

3.为防止误操作,示例在放大视图上方设置了透明的 div, 使事件不会传入到下方的的 canvas 中

4.如果不想在鼠标移入的时候就触发右侧的联动,可以绑定其他事件如 ``` onMouseDown ```, ``` onMouseUp ```等事件,注意-> <span style="color:red">没有onMouseClick事件</span>

:::