<template>
  <div ref="graphyMain" class="canvasGraphy" style="width:100%;">
    <div class="saga-message" v-if="type != 3">{{type == 1 ? '请选择楼层' : '当前楼层尚无平面图，请去空间管理根据模型生成'}}</div>
    <div style="width:100%;" v-else>
      <canvas id="canvas" :width="canvasW" :height="canvasH"></canvas>
    </div>
    <el-button
      v-if="type == 3"
      size="small"
      @click="pointToSpace"
      style="height: 30px;z-index:999;overflow: hidden;transform: translateX(-50%);position: absolute;top: 10%;right: 5%;"
      type="primary"
    >标签与空间关联</el-button>
    <div
      v-if="type == 3"
      style="height: 30px;z-index:999;overflow: hidden;transform: translateX(-50%);position: absolute;bottom: 10%;left: 50%;"
    >
      <el-button size="small" @click="smallSize" type="primary">- 缩小</el-button>
      <el-button size="small" @click="suitableSize" type="primary">合适比例</el-button>
      <el-button size="small" @click="bigSize" type="primary">+ 放大</el-button>
    </div>
    <!-- <button @click="addPoint">添加标记</button> -->
    <!-- <button @click="locationGraphy({ X: -35146.875, Y: 40680 })">定位</button> -->
    <!-- <button @click="addLine">添加虚拟墙</button> -->
    <div v-show="menuShow" id="menu" ref="menu">
      <p v-if="pointShow" @click="getDatails">编辑该标签</p>
      <p v-if="pointShow" @click="clearXY">清除该点位的坐标</p>
      <p v-if="pointShow" @click="noLocate">修改为无法定位到楼层的点位</p>
      <!-- <p v-if="lineShow" @click="detaleWall">虚拟墙删除</p> -->
    </div>
  </div>
</template>

<script>
import axios from "axios";

//引擎的引用
import {
  SGraphyView,
  SGraphyScene,
  SGraphyRectItem
} from "@/assets/node-templete";

//item组件
import SGraphyLineItem from "@/assets/js/items/SGraphyLineItem";
import SGraphyPolygonItem from "@/assets/js/items/SGraphyPolygonItem";
import SGraphyVirtualItem from "@/assets/js/items/SGraphyVirtualItem";
import SGraphyImageItem from "@/assets/js/items/SGraphyImageItem";
import tools from "@/assets/js/tools";
let data = "";
let scale = 120; //缩放比例
let myData = [];
let colorArr = [
  "rgba(0,245,255,.05)",
  "rgba(255,218,185,.05)",
  "rgba(132,112,255,.05)",
  "rgba(127,255,0,.05)",
  "rgba(238,92,66,.05)",
  "rgba(255,255,224,.05)",
  "rgba(238,233,233,.05)",
  "rgba(156,156,156,.05)",
  "rgba(144,238,144,.05)",
  "rgba(180,205,205,.05)"
];
function changeXY(arr) {
  let data;
  if (arr && arr.length) {
    data = arr.map(item => {
      (item.X = item.X), (item.Y = item.Y);
    });
  }
  return data;
}

class MainScene extends SGraphyScene {
  constructor() {
    super();
    //资产id
  } // Function constructor()

  /**
   * 绘制背景
   *
   * @param   canvas      画布
   * @param   rect        更新绘制区域
   */
  // drawBackground(canvas, rect) {}
}

import { updatePoint, getPoint, formBIMToPri, getPointList, updateBusiness } from "@/api/request";
import pako from '@/assets/pako/pako'

export default {
  name: "HelloWorld",
  props: {
    param: null
  },
  data() {
    return {
      view: "",
      mainScene: new MainScene(),
      dataMax: "", //最大值最小值数据
      scene: {
        x: 0,
        y: 0
      },
      id: null,
      menuShow: false, //右键菜单的显示
      lineShow: false,
      pointShow: false,
      canvasH: 600,
      canvasW: 800,
      detaleItem: null, //需要删除的数组
      wallArr: [], //虚拟墙添加时的数组
      wallList: [], //处理后的墙的线条
      detaleLine: [], //需要删除的虚拟墙
      type: 1, //1  没有选择楼层， 2没有平面图， 3有平面图
      data: {},
      list: "",
      buildMess: {},
      imageUrl:
        "http://prod.dp.sagacloud.cn:28888/image-service/common/image_get?systemId=dev&key=graphy.png"
    };
  },
  created() { },
  mounted() {
    this.resize()
  },
  methods: {
    resize() {
      this.canvasW =
        document.getElementsByClassName("graphy-main")[0].offsetWidth - 2;
      this.canvasH =
        document.getElementsByTagName("body")[0].offsetHeight - 20;
    },

    pointToSpace() {
      let data = []//空间数组列表
      this.mainScene.root.children.map(item => {
        if (item.type == 3) {
          data.push(item)
        }
      })
      let relation = []
      this.list.map(item => {
        data.map(child => {
          if (tools.isIn(item.X, item.Y * -1, child.containsArr)) {
            relation.push({
              pointId: item.id,
              spaceId: child.id,
              pointName: item.Name
            })
          }
        })
      })
      //找到没有元空间id的对象，取出对应的array
      let noIdList = [], hasIdList = []
      relation.map(item => {
        if (!!item.spaceId) {
          hasIdList.push(item)
        } else {
          noIdList.push(item)
        }
      })
      let name = ""
      if (noIdList.length) {
        for (let i = 0; i < noIdList.length; i++) {
          name += noIdList[i].pointName + "、"
        }
      }
      let msg = noIdList.length ? "一个空间下重复的点位标签信息录入将会被覆盖！以下标签所在的元空间不存在元空间id：" + name + "，是否继续" : "一个空间下重复的点位标签信息录入将会被覆盖！是否将其标签所在的信息录入元空间中？"
      this.$confirm(msg, "提示").then(_ => {
        this.getPointList(hasIdList)
      }).catch(_ => {
        this.$message("取消关联")
      })
    },

    //获取标签列表
    getPointList(hasIdList) {
      let idList = hasIdList.map(item => { return item.pointId })
      let param = {
        IdList: idList,
        ProjId: this.$route.query.projId,
        UserId: this.$route.query.userId,
      }
      getPointList(param, res => {
        console.log(res)
        if (res.PointList && res.PointList.length) {
          hasIdList.map(item => {
            res.PointList.map(child => {
              if (child.PointId == item.pointId) {
                item.Pic = child.ImageList
                item.LocalId = child.PointLocalId
              }
            })
          })
          this.setMess(hasIdList)
        }
      })
    },

    //给空间中写入信息
    setMess(hasIdList) {
      let param = {
        data: { criterias: null },
        ProjId: this.$route.query.projId,
        secret: this.$route.query.secret
      }
      hasIdList = tools.arrayUnique(hasIdList, "spaceId")
      param.data.criterias = hasIdList.map(item => {
        let criteria = { infos: {} }
        if (!!item.Pic && item.Pic.length) {
          criteria.infos.Pic = [{
            value: item.Pic.map(child => {
              return {
                key: child.key,
                name: child.name,
                type: child.type,
                systemId: "dataPlatform"
              }
            })
          }]
        }
        criteria.id = item.spaceId
        criteria.infos.RoomLocalName = [{ value: item.pointName || "" }]
        criteria.infos.RoomLocalID = [{ value: item.LocalId || "" }]
        return criteria
      })
      updateBusiness(param).then(res => {
        console.log(res)
      })
    },

    //获取数据
    getData(data) {
      if (!data.map) {
        this.type = 2;
      } else {
        this.buildMess = data;
        this.type = 3;
        // this.getJson(this.buildMess.map);
      }
    },

    getJson(jsonId) {
      axios({
        method: 'get',
        url: "/img/image-service/common/file_get/" + jsonId + "?systemId=revit",
        data: {},
        responseType: 'blob',
        // contentType: "charset=utf-8"
      })
        .then(res => {
          let data = null
          var blob = res.data;
          var reader = new FileReader();
          reader.readAsBinaryString(blob)
          let _this = this
          reader.onload = function (readerEvt) {
            var binaryString = readerEvt.target.result;
            // let base64Data = btoa(binaryString)
            let base64Data = btoa(binaryString)
            let unGzipData = pako.unzip(base64Data)
            data = unGzipData
            _this.dataMax = tools.getPoint(data);
            if (data.WallList && data.WallList.length) {
              tools.changeMap(data.WallList, -1, "PointList");
            }
            if (data.SpaceList && data.SpaceList.length) {
              tools.changeMap(data.SpaceList, -1, "Paths");
            }
            if (data.ColumnList && data.ColumnList.length) {
              tools.changeMap(data.ColumnList, -1, "Path");
            }
            if (data.VirtualWallList && data.VirtualWallList.length) {
              tools.changeMap(data.VirtualWallList, -1, "PointList");
            }
            if (data.EquipmentList && data.EquipmentList.length) {
              tools.changeMap(data.EquipmentList, -1, "PointList");
            }
            let ids = [];
            if (data.SpaceList && data.SpaceList.length) {
              data.SpaceList.map(items => {
                items.BimId = _this.buildMess.code + ":" + items.BimId;
                ids.push(items.BimId);
              });
            } else {
              _this.$message("没有元空间数据")
            }
            _this.createCanvas(ids, data);
          };
        });
    },

    //创建实例
    async createCanvas(ids, data) {
      //初始化
      if (!!this.view && !!this.view.scene) {
        this.view.scene.root.children = [];
        this.view = null;
      }
      if (this.type != 3) {
        return;
      }
      this.view = new SGraphyView("canvas", this.mainScene);
      this.view.onDraw();
      this.view.canvasView.addEventListener("mouseup", this.dataChange);
      this.view.canvasView.addEventListener("contextmenu", this.contextMenu);
      this.view.canvasView.addEventListener("mousemove", this.canvasMove);

      //添加事件使右键菜单隐藏
      window.addEventListener("click", this.menuNone);
      //   this.bimIdToId(ids, data);
      await this.bimIdToId(ids, data);
      //   this.getJson(this.buildMess.map)
    },

    //事件：canvas的划过事件
    canvasMove(e) { },

    //画虚拟墙
    addLine() {
      this.view.canvasView.addEventListener("click", this.addLineClick);
    },

    //画点位坐标
    doPoint(list) {
      console.log("list", list)
      this.list = list;
      this.getJson(this.buildMess.map)
    },

    //排序函数
    compare(property) {
      return function (a, b) {
        let value1 = a[property];
        let value2 = b[property];
        return value1 - value2;
      };
    },

    //删除虚拟墙
    detaleWall() {
      let arr = this.view.scene.root.children;
      let index = arr.indexOf(this.detaleLine);
      if (index > -1) {
        arr.splice(index, 1);
        this.detaleLine = null;
      }
    },

    //获取点到线的最短距离
    getMinDistance(arr, dot) {
      let len;

      //如果arr[0].x==arr[1].x 说明是条竖着的线
      if (arr[0].x - arr[1].x == 0) {
        len = Math.abs(dot.X - arr[0].x);
      } else {
        let A = (arr[0].y - arr[1].y) / (arr[0].x - arr[1].x);
        let B = arr[0].y - A * arr[0].x;

        len = Math.abs((A * dot.X + B - dot.Y) / Math.sqrt(A * A + 1));
      }

      return {
        min: len,
        line: arr
      };
    },

    //获取最近的交点
    getIntersection(arr, point) {
      let P = {};
      // 斜率为：k = ( pt2.y - pt1. y ) / (pt2.x - pt1.x );
      // 该直线方程为：y = k* ( x - pt1.x) + pt1.y。

      //其垂线的斜率为 - 1 / k，垂线方程为：y = (-1/k) * (x - point.x) + point.y 。

      //联立两直线方程解得：x = ( k^2 * pt1.x + k * (point.y - pt1.y ) + point.x ) / ( k^2 + 1) ，y = k * ( x - pt1.x) + pt1.y;
      //如果arr[0].x==arr[1].x 说明是条竖着的线
      if (arr[0].x == arr[1].x) {
        P.x = arr[0].x;
        P.y = point.Y;
      } else {
        let k = (arr[1].y - arr[0].y) / (arr[1].x - arr[0].x);
        // let y = k * (x - arr[0].x) + arr[0].y;
        // let y1 = (-1/k) * (x - point.X) + point.Y
        // let x =
        //     (k * k * arr[0].x + k * (point.Y - arr[0].y) + point.X) /
        //     (k * k * k),
        //   y = k * (x - arr[0].x) + arr[0].y;
        // if(x > arr[0].x && x > arr[1].x){
        //   if(arr[0].x > arr[1].x){
        //     x = arr[0].x
        //     y = arr[0].y
        //   }else{
        //     x = arr[1].x
        //     y = arr[1].y
        //   }
        // }
        // P.x = x
        // P.y = y
        let A = (arr[0].y - arr[1].y) / (arr[0].x - arr[1].x);
        let B = arr[0].y - A * arr[0].x;
        let m = point.X + A * point.Y;

        P.x = (m - A * B) / (A * A + 1);
        P.y = A * P.x + B;
      }
      return P;
    },

    //右键菜单的查看详情
    getDatails() {
      let arr = this.view.scene.root.children;
      let index = arr.indexOf(this.detaleItem);
      this.$emit("getDetails", { Id: arr[index].id });
    },

    //右键的清除该点位的坐标
    clearXY() {
      let param = {
        PointId: this.detaleItem.id,
        ProjId: this.param.ProjId,
        UserId: this.param.UserId
      };
      this.changePoint(param, { x: 0, y: 0 }, false);
    },

    //右键的修改为无法定位到楼层的点位
    noLocate() {
      let param = {
        PointId: this.detaleItem.id,
        ProjId: this.param.ProjId,
        UserId: this.param.UserId
      };
      this.changePoint(param, { x: 0, y: 0 }, 2);
    },

    //右键菜单隐藏
    menuNone() {
      this.menuShow = this.lineShow = this.pointShow = false;
    },

    async bimIdToId(ids, data) {
      await formBIMToPri({
        type: ["Si"],
        ids: ids,
        ProjId: this.$route.query.projId,
        secret: this.$route.query.secret
      })
        .then(res => {
          if (res.data.Result == "success") {
            data.SpaceList.map((item, index) => {
              res.data.Content.map((i, li) => {
                //判断bimId是否相同
                if (item.BimId == i.infos.BIMID) {
                  item.id = i.id;
                }
              });
            });
            // this.createCanvas();
            // this.initGraphy(data);
            this.initGraphy(data);
            return data
          } else {
            this.$message.error(res.data.ResultMsg);
          }
        })
        .catch(() => {
          this.$message.error("请求出错");
        });
    },

    //实例化视图
    initGraphy(data) {
      this.view.pos.x = this.view.pos.y = -50;
      let equip = data.EquipmentList,
        wall = data.WallList,
        virtual = data.VirtualWallList,
        space = data.SpaceList,
        column = data.ColumnList,
        spaceStr;

      //空间
      if (space && space.length) {
        for (let i = 0; i < space.length; i++) {
          if (space[i].Paths[0] && space[i].Paths[0].length >= 2) {
            spaceStr = new SGraphyPolygonItem(
              space[i].Paths[0],
              1,
              "red",
              colorArr[i % 10],
              space[i].id
            );
            this.mainScene.addItem(spaceStr);
          }
          for (let j = 0; j < space[i].Paths.length; j++) {
            if (space[i].Paths[0] && j > 1 && space[i].Paths[j].length >= 2) {
              spaceStr = new SGraphyPolygonItem(
                space[i].Paths[j],
                2,
                "#fff",
                "#fff",
                space[i].id
              );
              this.mainScene.addItem(spaceStr);
            }
          }
        }
      }

      // 画柱子
      if (column && column.length) {
        for (let i = 0; i < column.length; i++) {
          if (column[i].Path && column[i].Path.length >= 2) {
            spaceStr = new SGraphyPolygonItem(
              column[i].Path,
              1,
              "#000",
              "#000"
            );
            this.mainScene.addItem(spaceStr);
          }
        }
      }

      // 画墙
      if (wall && wall.length) {
        for (let i = 0; i < wall.length; i++) {
          for (let j = 0; j < wall[i].PointList.length - 1; j++) {
            let str = "wall" + i;
            str = new SGraphyLineItem(
              wall[i].PointList[j].X,
              wall[i].PointList[j].Y,
              wall[i].PointList[j + 1].X,
              wall[i].PointList[j + 1].Y
            );
            this.mainScene.addItem(str);
          }
        }
        wall.map((res, index) => {
          if (res.PointList.length > 1) {
            res.PointList.map((list, inde) => {
              if (res.PointList[inde + 1] != undefined) {
                this.wallList.push([
                  { x: list.X, y: list.Y },
                  { x: res.PointList[inde + 1].X, y: res.PointList[inde + 1].Y }
                ]);
              } else {
                return undefined;
              }
            });
          }
        });
      }

      // //画虚拟墙
      if (virtual && virtual.length) {
        for (let i = 0; i < virtual.length; i++) {
          for (let j = 0; j < virtual[i].PointList.length - 1; j++) {
            let str = "virtual" + i + j;
            str = new SGraphyVirtualItem(
              virtual[i].PointList[j].X,
              virtual[i].PointList[j].Y,
              virtual[i].PointList[j + 1].X,
              virtual[i].PointList[j + 1].Y,
              "green",
              2,
              true,
              true
            );
            this.mainScene.addItem(str);
          }
        }
      }

      if (this.list && this.list.length) {
        this.list = this.list.map(item => {
          if (item.X == 0 && item.Y == 0) {
            return undefined;
          } else {
            return {
              id: item.Id,
              X: item.X,
              Y: item.Y,
              Name: item.Name
            };
          }
        });
        this.list = this.list.filter(item => item);
        for (let i = 0; i < this.list.length; i++) {
          let space = "point" + i;
          let url = this.imageUrl;
          space = new SGraphyImageItem(30, 30, url, this.list[i].id);
          space.moveTo(this.list[i].X, this.list[i].Y * -1);
          this.mainScene.addItem(space);
        }
      }

      //获取中心点
      let rect = this.view.scene.worldRect();

      //初始化画布缩放比例
      this.view.scale = 1;

      //计算缩放比例
      this.view.scale = Math.min(
        this.view.width / (rect.width * 1.2),
        this.view.height / (rect.height * 1.2)
      );
      this.view.minScale = this.view.scale / 10
      this.view.maxScale = this.view.scale * 10
      // 移动画布
      this.view.pos.x =
        (-(rect.right + rect.left) / 2) * this.view.scale + this.view.width / 2;
      this.view.pos.y =
        (-(rect.bottom + rect.top) / 2) * this.view.scale +
        this.view.height / 2;
    },

    // 定位
    locationGraphy(point) {
      // 移动画布
      this.view.pos.x = -point.X * this.view.scale + this.view.width / 2;
      this.view.pos.y = -point.Y * this.view.scale + this.view.height / 2;
      this.view.scale = this.view.scale;
    },

    //点击按钮
    addPoint(item) {
      let bbox = this.view.canvasView.getBoundingClientRect();
      this.id = item.Id;
      this.view.canvasView.style.cursor =
        "url(http://prod.dp.sagacloud.cn:28888/image-service/common/image_get?systemId=dev&key=graphy.png),auto";
      this.view.canvasView.addEventListener("click", this.getPoint);
    },

    //获取鼠标相对canvas的位置
    getMouseCanvas(e) {
      let bbox = this.view.canvasView.getBoundingClientRect();
      let x = e.clientX - bbox.left,
        y = e.clientY - bbox.top;
      return {
        x: x,
        y: y
      };
    },

    //修改点位坐标信息
    changePoint(getParam, pointWall, falg, createPoint) {
      let pointList = null;
      getPoint(getParam).then(res => {
        if (res.data.Result == "success") {
          let param = {
            ProjId: this.param.ProjId,
            UserId: this.param.UserId,
            PointList: res.data.PointList[0]
          };
          param.PointList.X = pointWall.x;
          param.PointList.Y = pointWall.y * -1;
          if (!param.PointList.FloorId) {
            param.PointList.FloorId = this.data.code;
          }
          if (falg == 2) {
            param.PointList.FloorId = "";
          }
          updatePoint(param).then(res => {
            if (res.data.Result == "success") {
              this.id = null;
              if (falg == 1) {
                this.mainScene.addItem(createPoint);
                this.$message.success("标记成功");
              } else if (falg == 2) {
                this.view.scene.removeItem(this.detaleItem);
                this.detaleItem = null;
                this.$message.success("修改成功");
              } else if (falg == 3) {
                this.detaleItem = null;
                this.$message.success("修改成功");
              } else {
                this.view.scene.removeItem(this.detaleItem);
                this.detaleItem = null;
                this.$message.success("修改成功");
              }
              this.$emit("resetPoint");
            } else {
              this.$message("标记失败，请重新标记");
            }
          });
        } else {
          this.$message.error("获取点位信息失败");
        }
      });
    },

    /** canvas事件------------------------------------------------------------------------------------*/

    //点击事件
    getPoint(e) {
      let pointMess = this.getMouseCanvas(e);
      // 获取真实的point
      let pointWall = this.view.mapToScene(pointMess);
      let url = this.imageUrl;
      let createPoint = new SGraphyImageItem(30, 30, url, this.id);
      //移动新建的point
      createPoint.moveTo(pointWall.x, pointWall.y);
      let getParam = {
        PointId: this.id,
        ProjId: this.param.ProjId,
        UserId: this.param.UserId
      };
      this.changePoint(getParam, pointWall, 1, createPoint);

      this.view.canvasView.style.cursor = "auto";
      this.view.canvasView.removeEventListener("click", this.getPoint);
    },

    //右键菜单
    contextMenu(e) {
      //取消默认的浏览器自带的右键
      e.preventDefault();

      //将canvas的坐标转换成数据坐标
      let point = this.view.mapToScene(this.getMouseCanvas(e));

      //设立falg判断是否在标签上
      let falg = false,
        index = 0,
        wallIndex = 0,
        wallFalg = false;
      let items = this.view.scene.root.children;
      for (let i = 0; i < items.length; i++) {
        if (items[i].type == 1) {
          if (items[i].contains(point.x, point.y)) {
            index = i;
            falg = true;
          }
        }
        // if (items[i].type == 4) {
        //   if (items[i].contains(point.x, point.y)) {
        //     wallIndex = i;
        //     wallFalg = true;
        //   }
        // }
      }

      //如果在标签上
      if (falg || wallFalg) {
        this.menuShow = true;
        let el = this.$refs.graphyMain;
        if (falg) {
          this.detaleItem = items[index];
          this.pointShow = true;
        } else if (wallFalg) {
          this.detaleLine = items[wallIndex];
          this.lineShow = true;
        }
        if (el.offsetWidth < e.layerX + 200) {
          this.$refs.menu.style.left = e.layerX - 200 + "px";
          this.$refs.menu.style.top = e.layerY + "px";
        } else if (el.offsetHeight < e.layerY + 150) {
          this.$refs.menu.style.left = e.layerX + "px";
          this.$refs.menu.style.top = e.layerY - 100 + "px";
        } else {
          this.$refs.menu.style.left = e.layerX + "px";
          this.$refs.menu.style.top = e.layerY + "px";
        }
        // this.mainScene.removeItem(items[index]);
      } else {
        this.lineShow = this.pointShow = false;
        this.menuShow = false;
      }
    },

    //鼠标抬起事件，数据发生改变
    dataChange(e) {
      let item = this.mouseInElement(this.view, e);
      let childRen = this.view.scene.root.children;
      myData = [];
      for (let i in childRen) {
        if (childRen[i].type == 1) {
          myData.push({
            Id: childRen[i].id,
            name: childRen[i].name,
            PointList: {
              X: childRen[i]._pos.x,
              Y: childRen[i]._pos.y
            }
          });
        }
      }

      myData.map(item => {
        for (let j = 0; j < this.list.length; j++) {
          if (item.Id == this.list[j].id && (item.PointList.X != this.list[j].X || item.PointList.Y * -1 != this.list[j].Y)) {
            this.list[j].X = item.PointList.X
            this.list[j].Y = item.PointList.Y
            let param = {
              PointId: item.Id,
              ProjId: this.param.ProjId,
              UserId: this.param.UserId
            };
            this.changePoint(param, { x: item.PointList.X, y: item.PointList.Y }, 3);
          }
        }
      })
    },

    /**
     *
     * @param {*} view graphy class
     * @param {*} e    mouse元素e
     */
    mouseInElement(view, e) {
      let mouse = this.getMouseCanvas(e),
        falg = false,
        items = view.scene.root.children,
        i = 0;
      for (; i < items.length; i++) {
        if (items[i].type == 1) {
          if (items[i].contains(mouse)) {
            falg = true;
            break;
          }
        }
      }
      return {
        falg,
        item: items[i] || [],
        index: i
      };
    },

    //调整到合适比例
    suitableSize() {
      //获取中心点
      let rect = this.view.scene.worldRect();
      //计算缩放比例
      this.view.scale = Math.min(
        this.view.width / (rect.width * 1.2),
        this.view.height / (rect.height * 1.2)
      );
      // 移动画布
      this.view.pos.x =
        (-(rect.right + rect.left) / 2) * this.view.scale + this.view.width / 2;
      this.view.pos.y =
        (-(rect.bottom + rect.top) / 2) * this.view.scale +
        this.view.height / 2;
    },

    //调整到小比例
    smallSize() {
      //获取中心点
      let rect = this.view.scene.worldRect();
      //计算缩放比例
      this.view.scale = this.view.scale * 0.9;
      // 移动画布
      this.view.pos.x =
        (-(rect.right + rect.left) / 2) * this.view.scale + this.view.width / 2;
      this.view.pos.y =
        (-(rect.bottom + rect.top) / 2) * this.view.scale +
        this.view.height / 2;
    },

    bigSize() {
      //获取中心点
      let rect = this.view.scene.worldRect();
      //计算缩放比例
      this.view.scale = this.view.scale * 1.1;
      // 移动画布
      this.view.pos.x =
        (-(rect.right + rect.left) / 2) * this.view.scale + this.view.width / 2;
      this.view.pos.y =
        (-(rect.bottom + rect.top) / 2) * this.view.scale +
        this.view.height / 2;
    }

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.canvasGraphy {
  position: relative;
  canvas {
    border: 1px solid #ccc;
  }
  .saga-message {
    height: 400px;
    line-height: 400px;
    color: #ccc;
    font-size: 24px;
    text-align: center;
  }
  #menu {
    width: 200px;
    z-index: 88;
    overflow: hidden;
    box-shadow: 0 1px 1px #888, 1px 0 1px #ccc;
    position: absolute;
    background-color: #fff;
  }
  #menu p {
    width: 100%;
    padding-left: 5px;
    overflow: hidden;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    margin: 0;
    text-align: left;
    cursor: pointer;
  }
  #menu p:hover {
    background-color: aqua;
  }
}
</style>
