## 鹰眼模式 ::: details 目录 [[toc]] ::: ### 绘制示例 ### 源码 ::: details 示例demo <<< @/docs/.vuepress/components/tuopu/baseTopu9.vue ::: ::: details 鹰眼 view 类 <<< @/docs/.vuepress/components/tuopu/items/EagleView.ts ::: ### 源码解析 ```js // // 2.实例化一个场景(scene), view和鹰眼view共用; this.enlarge_view = new EagleView("enlarge"); // 小图 if (this.scene) { this.view.scene = this.scene; this.enlarge_view.scene = this.scene; } //3.为场景中展示的元素绑定onMouseMove事件, 参数意义依次为 (事件名, 接收者, 回调函数); // 监听放大视图中滚轮放缩事件, wheelScale 是回调 this.view.connect("onMouseWheel", this, this.wheelScale); // 监听放大视图中滚轮按下拖动事件, midMouseMove 是回调 this.view.connect("leftMove", this, this.midMouseMove); // 监听标准视图的事件, 回调函数是 mouseMove this.enlarge_view.connect("viewMouseMove", this, this.mouseMove); // 4. FloorView.ts 中新增移动回调 protected onMouseMove(event: MouseEvent): void { super.onMouseMove(event); // 按左键移动 let se = new SMouseEvent(event); if (se.buttons & SMouseButton.LeftButton) { this.origin.x += se.x - this._leftKeyPos.x; this.origin.y += se.y - this._leftKeyPos.y; this.update() // 鼠标左键拖动 this.$emit('leftMove', se) }; ...... } // Function onMouseMove() ```