1.Canvas 的使用

使用Canvas画手机顶部的icon

首先，存放icon的文件夹，遍历获取所有的icon

icon文件存放

index.js 获取所有的文件

const power = require.context('./power', false, /.png$/).keys()
export var powers = power.map((item) => {
  return {
    key: item.split('/')[1].split('.')[0],
    value: item.split('/')[1],
    file: 'power'
  }
})
const ring = require.context('./ring', false, /.png$/).keys()
export var rings = ring.map((item) => {
  return {
    key: item.split('/')[1].split('.')[0],
    value: item.split('/')[1],
    file: 'ring'
  }
})
const signal = require.context('./signal', false, /.png$/).keys()
export var signals = signal.map((item) => {
  return {
    key: item.split('/')[1].split('.')[0],
    value: item.split('/')[1],
    file: 'signal'
  }
})
const wifi = require.context('./wifi', false, /.png$/).keys()
export var wifis = wifi.map((item) => {
  return {
    key: item.split('/')[1].split('.')[0],
    value: item.split('/')[1],
    file: 'wifi'
  }
})

2.画图文件目录

画图文件目录

draw.vue //此处遇到一个坑，需使用img.onload等图片加载完成后再进行绘制，否者显示不出图片

<template>
  <div class="draw-contain">
    <div class="canvas-main">

      <canvas
        id="phoneCanvas"
        width="360"
        height="640"
      />

    </div>
    <div class="choose">
      <div class="colorTool">
        <span>背景颜色修改：</span>
        <el-color-picker
          v-model="topColor"
          size="medium"
          class="colorPicker"
          @change="colorChange"
        />
        <span>时间修改：</span>
        <el-time-picker
          v-model="timeValue"
          format="HH:mm"
          value-format="HH:mm"
          placeholder="选择时间"
          style="width:150px"
          @change="drawTime"
        />
      </div>
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <span>电量</span>
        </div>
        <choose
          ref="powers"
          :refs="powers"
          :top-color="topColor"
          :x="320"
          :y="-1"
          :width="25"
          :height="26"
        />
      </el-card>

      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <span>WIFI</span>
        </div>
        <choose
          ref="wifis"
          :refs="wifis"
          :top-color="topColor"
          :x="295"
          :y="2"
          :width="20"
          :height="20"
        />
      </el-card>
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <span>信号</span>
        </div>
        <choose
          ref="signals"
          :refs="signals"
          :top-color="topColor"
          :x="270"
          :y="2"
          :width="20"
          :height="20"
        />
      </el-card>
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <span>铃声</span>
        </div>
        <choose
          ref="rings"
          :refs="rings"
          :top-color="topColor"
          :x="245"
          :y="2"
          :width="20"
          :height="20"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import choose from './components/choose'
import { powers, rings, signals, wifis } from '@/images/icon' // icon
export default {
  components: { choose },
  data() {
    return {
      ctx: {},
      img: new Image(),
      powers, rings, signals, wifis,
      topColor: '#909399',
      timeValue: ''
    }
  },
  mounted() {
    this.initCanvas()
  },
  created() {

  },
  methods: {

    colorChange(val) {
      this.drawTop()
    },
    drawTop() {
      this.ctx.rect(0, 0, 360, 25)
      this.ctx.fillStyle = this.topColor
      this.ctx.fill()
    },
    drawTime() {
      this.ctx.fillStyle = this.topColor
      this.ctx.fillRect(0, 0, 50, 25)
      this.ctx.fillStyle = '#fff'
      this.ctx.font = '15px arial'
      this.ctx.fillText(this.timeValue, 15, 18)
    },
    initCanvas() {
      var canvas = document.getElementById('phoneCanvas')
      this.ctx = canvas.getContext('2d')

      this.drawTop()
      this.$refs.powers.ctx = this.ctx
      this.$refs.rings.ctx = this.ctx
      this.$refs.signals.ctx = this.ctx
      this.$refs.wifis.ctx = this.ctx
      var _this = this
      var img = new Image()
      img.src = this.$route.query.picUrl
      img.onload = function() {
        // console.log('图片加载成功')
        _this.ctx.drawImage(img, 0, 0, 360, 640)
        _this.ctx.rect(0, 0, 360, 25)
        _this.ctx.fillStyle = this.topColor
        _this.ctx.fill()
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.draw-contain {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  .canvas-main {
    width: 50%;
    height: calc(100vh - 50px);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box-card {
    >>> .el-card__body {
      background-color: #909399;
    }
  }
  .choose {
    width: 50%;
    height: 100px;
    padding: 20px;
    .colorTool {
      height: 40px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
  }
}
</style>

choose.vue 组件

<template>
  <div>
    <div
      v-for="(pow,index) in refs"
      :key="index"
      class="icon"
      @click="handleChoose(pow.file,pow.value,true)"
    >
      <img
        :src="require('@/images/icon/'+pow.file+'/'+pow.value)"
        alt=""
      >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    refs: {
      type: Array,
      default: () => []
    },
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    },
    width: {
      type: Number,
      default: 0
    },
    height: {
      type: Number,
      default: 0
    },
    topColor: {
      type: String,
      default: ''
    }
  },
  data: function() {
    return {
      ctx: {}
    }
  },
  mounted() {
    // console.log(this.refs[0].value)

    // this.handleChoose(this.refs[0].value, false)
  },
  methods: {
    handleChoose(file, key, isclear) {
      this.updateIcon(require('@/images/icon/' + file + '/' + key), isclear)
    },
    updateIcon(url, isclear) {
      var img = new Image()
      img.src = url
      var _this = this
      if (isclear) {
        this.clear()
      }
      img.onload = function() {
        _this.ctx.drawImage(img, _this.x, _this.y, _this.width, _this.height)
      }
    },
    clear() {
      this.ctx.fillStyle = this.topColor
      this.ctx.fillRect(this.x, this.y, this.width, this.height)
    }
  }
}
</script>

<style lang="scss" scoped>
.icon {
  display: inline-block;
}
img {
  width: 30px;
  height: 30px;
}
</style>