放大效果

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

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等事件,注意-> 没有onMouseClick事件

:::