::: details 目录 [[toc]] :::
::: details 示例demo <<< @/docs/.vuepress/components/tuopu/baseTopu9.vue :::
::: details 鹰眼 view 类 <<< @/docs/.vuepress/components/tuopu/items/EagleView.ts :::
// <!-- 1 添加鹰眼canvas -->
<canvas
id="enlarge"
width="200"
height="150"
tabindex="0"
style="border: 1px solid red; position: absolute; bottom: 0; left: 0"
/>
// 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()