@[toc]

一、说明

本代码文件为.vue文件，其中使用了Element-UI组件。可视化代码主要用了JS的Canvas画布。

如果需要可视化，需要在程序中按照一定格式输出如下信息，data表示了每个矩形的坐标和长、宽（注意：这里的l是指矩形的高，w是指矩形的宽）。

data:[{x:0.0,y:0.0,l:116.0,w:113.0}, {x:113.0,y:0.0,l:116.0,w:99.0}, {x:212.0,y:0.0,l:116.0,w:111.0}, {x:323.0,y:0.0,l:116.0,w:20.0}, {x:343.0,y:0.0,l:89.0,w:57.0}, {x:343.0,y:89.0,l:95.0,w:57.0}, {x:0.0,y:116.0,l:100.0,w:113.0}, {x:113.0,y:116.0,l:88.0,w:99.0}, {x:212.0,y:116.0,l:79.0,w:111.0}, {x:323.0,y:116.0,l:58.0,w:20.0}, {x:332.0,y:184.0,l:42.0,w:68.0}, {x:230.0,y:195.0,l:31.0,w:102.0}, {x:113.0,y:204.0,l:71.0,w:117.0}, {x:0.0,y:216.0,l:88.0,w:113.0}, {x:230.0,y:226.0,l:81.0,w:102.0}, {x:332.0,y:226.0,l:97.0,w:68.0}, {x:113.0,y:275.0,l:29.0,w:117.0}, {x:0.0,y:304.0,l:96.0,w:98.0}, {x:98.0,y:304.0,l:96.0,w:84.0}, {x:182.0,y:304.0,l:50.0,w:48.0}, {x:230.0,y:307.0,l:53.0,w:102.0}, {x:332.0,y:323.0,l:37.0,w:68.0}, {x:182.0,y:354.0,l:46.0,w:30.0}, {x:212.0,y:360.0,l:40.0,w:106.0}, {x:318.0,y:360.0,l:40.0,w:82.0}],
isRotate:[0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1],

然后将上面的信息复制到前端代码对应位置即可进行可视化展示。

二、可视化效果展示

可以看到下面的矩形有两种颜色。其中蓝色代表没有旋转，粉色代表进行了90度旋转。

BACK按钮：往后一步

NEXT按钮：往前一步

NUM输入框：展示前n个矩形

REFRESH按钮：刷新页面

三、代码

<template>
  <div style="margin: 20px;display: flex">
    <div style="margin-right: 20px">
      <el-card style="text-align: center;width: 180px;height: 83vh">
        <div slot="header" class="clearfix">
          <el-image src="https://picgo-wskh.oss-cn-guangzhou.aliyuncs.com/公文包,工具箱,手提包,行李包.svg"></el-image>
        </div>
        <div>
          <el-button icon="el-icon-d-arrow-left" type="danger" @click="diff()" style="margin-top: 10px">BACK</el-button>
          <el-input v-model="n" style="margin-top: 10px;" @change="draw()">
            <template slot="prepend">NUM<b>:</b></template>
          </el-input>
          <el-button icon="el-icon-d-arrow-right" type="success" @click="add()" style="margin-top: 10px">NEXT
          </el-button>
          <el-button icon="el-icon-refresh" type="primary" @click="refresh()" style="margin-top: 10px">REFRESH
          </el-button>
        </div>
      </el-card>
    </div>
    <div style="width:100%">
      <el-card style="text-align: center;height: 83vh;overflow: auto">
        <h1>矩形绘制：</h1>
        <div ref="cardCanvas" id="canvasDiv">
          <canvas id="canvas" style="border: 2px solid #409EFF;background-color: #f6f6fd;" ref="canvas"
                  :width="canvasWidth" :height="canvasHeight"
          ></canvas>
        </div>
        <h3>信息：{{ data }}</h3>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      n: 0,
      stander: 500,
      canvas: {},
      context: {},
      canvasWidth: 400,
      canvasHeight: 400,
      data:[{x:0.0,y:0.0,l:115.0,w:59.0}, {x:59.0,y:0.0,l:115.0,w:21.0}, {x:80.0,y:0.0,l:115.0,w:46.0}, {x:374.0,y:0.0,l:99.0,w:26.0}, {x:258.0,y:0.0,l:99.0,w:116.0}, {x:179.0,y:0.0,l:99.0,w:79.0}, {x:126.0,y:0.0,l:102.0,w:53.0}, {x:179.0,y:99.0,l:118.0,w:79.0}, {x:258.0,y:99.0,l:111.0,w:116.0}, {x:374.0,y:99.0,l:102.0,w:26.0}, {x:138.0,y:102.0,l:63.0,w:41.0}, {x:0.0,y:115.0,l:39.0,w:59.0}, {x:59.0,y:115.0,l:60.0,w:21.0}, {x:90.0,y:115.0,l:50.0,w:48.0}, {x:0.0,y:154.0,l:86.0,w:55.0}, {x:80.0,y:165.0,l:33.0,w:58.0}, {x:146.0,y:165.0,l:114.0,w:33.0}, {x:55.0,y:175.0,l:97.0,w:25.0}, {x:80.0,y:198.0,l:82.0,w:66.0}, {x:379.0,y:201.0,l:108.0,w:21.0}, {x:291.0,y:210.0,l:99.0,w:88.0}, {x:258.0,y:210.0,l:66.0,w:33.0}, {x:179.0,y:217.0,l:111.0,w:79.0}, {x:0.0,y:240.0,l:87.0,w:55.0}, {x:55.0,y:272.0,l:55.0,w:24.0}, {x:258.0,y:276.0,l:47.0,w:27.0}, {x:149.0,y:279.0,l:46.0,w:30.0}, {x:79.0,y:280.0,l:76.0,w:70.0}, {x:285.0,y:309.0,l:44.0,w:94.0}, {x:380.0,y:309.0,l:58.0,w:20.0}, {x:258.0,y:323.0,l:56.0,w:27.0}, {x:149.0,y:325.0,l:73.0,w:30.0}, {x:0.0,y:327.0,l:73.0,w:55.0}, {x:55.0,y:327.0,l:61.0,w:24.0}, {x:196.0,y:328.0,l:51.0,w:62.0}, {x:285.0,y:353.0,l:44.0,w:49.0}, {x:334.0,y:353.0,l:47.0,w:34.0}, {x:81.0,y:356.0,l:42.0,w:68.0}, {x:179.0,y:379.0,l:21.0,w:103.0}],
      isRotate:[0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 1, 0, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0],
    }
  },
  created() {
    let max = Math.max(this.canvasWidth, this.canvasHeight)
    this.r = this.stander / max
    this.canvasWidth = this.canvasWidth * this.r
    this.canvasHeight = this.canvasHeight * this.r
  },
  mounted() {
    this.canvas = document.getElementById('canvas')
    // 坐标矫正
    this.context = this.canvas.getContext('2d')
    this.context.translate(0, this.canvasHeight)
    this.context.rotate(this.getRad(180))
    this.context.scale(-1, 1)
    this.n = this.data.length
    this.draw()
  },
  methods: {
    refresh() {
      location.reload()
    },
    clearCanvas() {
      this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
    },
    diff() {
      this.n = -1 + parseInt(this.n)
      this.draw()
    },
    add() {
      this.n = 1 + parseInt(this.n)
      this.draw()
    },
    draw() {
      if (this.judgeN()) {
        this.clearCanvas()
        for (let i = 0; i < this.n; i++) {
          let tube = this.data[i]
          this.drawRect(tube.x, tube.y, tube.l, tube.w, this.isRotate[i])
        }
      }
    },
    judgeN() {
      if (this.n < 0) {
        this.n = 0
        this.$message.warning('矩形数量已经为0了！')
        return false
      } else if (this.n > this.data.length) {
        this.n = this.data.length
        this.$message.warning('所有的矩形已经放置完毕！')
        return false
      }
      return true
    },
    drawRect(x, y, l, w, isRotate) {

      let r = this.r

      w = w * r
      l = l * r
      x = x * r
      y = y * r

      this.context.strokeStyle = '#5190da'
      this.context.lineWidth = 2
      this.context.beginPath()
      this.context.rect(x, y, w, l)
      this.context.stroke()

      // this.context.fillStyle = '#d1e4f9';
      if(isRotate === 1){
        this.context.fillStyle = 'rgba(212,152,218,0.29)'
      }else{
        this.context.fillStyle = 'rgba(123,159,199,0.29)'
      }
      this.context.beginPath()
      this.context.rect(x, y, w, l)
      this.context.fill()

    },
    getRad(degree) {
      return degree / 180 * Math.PI
    }
  }
}
</script>

<style scoped>

</style>