web端根据pgm绘制canvas图形

huifeidexiang87

已于 2022-07-21 11:02:25 修改

阅读量890

点赞数

文章标签： vue

于 2022-07-21 10:50:29 首次发布

本文链接：https://blog.csdn.net/huifeidexiang87/article/details/125599868

版权

在项目中，首先通过接口拿到pgm文件的Id，通过id查询到文件后进行转换。这里直接随便给个id。（要绘制的地图pgm文件都有一个配套的yaml文件用于存放地图原点坐标与缩放比例，在本篇文章中由于不绘制路径，所以不涉及yaml文件的处理。）

文章中处理解析pgm文件的核心工具是MapImage。这个js文件中封装了处理pgm,pbm,ppm文件的方法。感兴趣的可以仔细看下里面的具体内容。

由于文章只大概给出pgm展示的思路，所以关于鼠标缩放，拖曳等动作并没有加上。代码需读者根据自身具体项目进行修改、调试。如果直接拷贝，这里不保证可以直接运行。请读者注意。

// map/index.vue
<template>
  <div
    ref="canvas-container"
  >
    <canvas :id="`canvas_${canvasId}`" />
  </div>
</template>
<script>
import {fabric} from 'fabric';
import MapImage from '/MapImage';
import { getFileByBlob, readAsBinaryString } from '/file';
export default {
  data() {
    return {
      canvasId: uuid(),
      canvasRef: null,
      scaleX: 1,
      mapWidth: '',
      mapHeight: '',
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      await this.initCanvas();
      await this.renderMap();
    },
    initCanvas() {
      let { width, height } = this.$refs['canvas-container'].getBoundingClientRect();
      let options = {
        canvasId: this.canvasId,
        container: this.$refs['canvas-container'],
        editable: true,
        zoomEnabled: true,
        width,
        height,
        maxZoom: 1100,
        minZoom: this.minZoom,
        backgroundColor: '#f3f3f3',
        renderOnAddRemove: false,
      };
      fabric.perfLimitSizeTotal = 360000000;
      fabric.maxCacheSideLimit = 14999;
      this.canvas = new fabric.Canvas(`canvas_${this.canvasId}`, options);
    },
    // 设置地图
    async renderMap() {

      //文件id
       const pgmId = '2323222322';
      try {
        // 读取pgm文件
        const blob = await getFileByBlob(mapPgmFileId);
        // 转为二进制
        const binary = await readAsBinaryString(blob);
        // 二进制pgmData转canvas
        const mapImage = new MapImage(binary);
        let canvas = mapImage.getInitMap('canvas');
        let imgSrc = canvas.toDataURL({
          format: 'png',
          withoutTransform: true,
        });
        // 绘制地图
        this.workarea = new fabric.Image(imgSrc);
        const imageFromUrl = (src) => {
          fabric.Image.fromURL(src, (img) => {
           // 根据canvas大小与图片大小确定