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>
网友评论