persagy-web-doc/docs/guides/tDInsert/partChange.md

局部放大与局部移动

::: details 目录 [[toc]] :::

绘制示例(点击图中区域和点位)

源码展示

::: details 查看代码 <<< @/docs/.vuepress/components/tDInsert/partChange.vue :::

源码解析

::: details 点击区域局部放大

 //1. 解析业务空间 设置 selectable 和 showSelect
    mapSpace(val) {
      if (!this.scene) return;
      const parse = new SZoneParser();
      parse.parseData(val);
      parse.zoneList.forEach((item) => {
        // 添加到场景
        ////////////重要
        item.selectable = true;
        item.showSelect = false;
        item.connect("onMouseDown", this, this.spaceDown);
        this.scene.addItem(item);
      });
    },
  // 2.  点击空间 selected 为true
    spaceDown(item, e) {
      item.selected = true;
      this.sizeGraphy();
    },
//   3. 设置放大比例 （最大为1）
   // 局部放大
    sizeGraphy() {
      this.view.fitSelectedToView(0.9);
    },

:::

::: details 图例移入画布中心点

  //   点击获取到图例item 后执行此方法
  // 画布移动到中部
    locationGraphy(item) {
      let centerX = this.view.width / 2 - item.x * this.view.scale;
      let centerY = (this.view.height / 2 - item.y * this.view.scale);
      this.view.origin = new SPoint(centerX, centerY);
    },

:::