eagle-eyes.md 1.7 KB

鹰眼模式

::: 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()