361 lines
9.0 KiB
Vue
361 lines
9.0 KiB
Vue
<template>
|
||
<view style="width: 100%;height: 100%;position: relative;">
|
||
<zero-loading v-show="loading && !noloading" position="absolute" v-if="loading && !noloading"></zero-loading>
|
||
<canvas :id="cId" type="2d" :style="{width:width,height:height}" :canvas-id="cId"></canvas>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
windowWidth: 0,
|
||
type: 'app',
|
||
ctx: null,
|
||
textArr: [],
|
||
imgArr: [],
|
||
lineArr: [],
|
||
circleArr: [],
|
||
rectArr: [],
|
||
loading: true,
|
||
canvasWidth: null,
|
||
canvasHeight: null
|
||
}
|
||
},
|
||
props: {
|
||
cId: {
|
||
type: [String, Number],
|
||
default: 'canvas'
|
||
},
|
||
width: {
|
||
type: [String, Number],
|
||
default: '100%'
|
||
},
|
||
height: {
|
||
type: [String, Number],
|
||
default: '100%'
|
||
},
|
||
canvasData: {
|
||
type: Array,
|
||
default: () => {
|
||
return []
|
||
}
|
||
},
|
||
noloading: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
watch: {
|
||
canvasData: {
|
||
handler(val) {
|
||
if (val && val.length) {
|
||
this.getSystemInfo()
|
||
}
|
||
},
|
||
deep: true,
|
||
immediate: true
|
||
}
|
||
},
|
||
mounted() {
|
||
// this.getSystemInfo()
|
||
},
|
||
methods: {
|
||
getSystemInfo() {
|
||
const self = this
|
||
// 获取屏幕尺寸
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
this.windowWidth = res.windowWidth
|
||
},
|
||
})
|
||
uni.getSystemInfo({
|
||
success: function(res) {
|
||
// const platform = res.hostName.toLowerCase()
|
||
if (res.uniPlatform || res.uniPlatform === 'app') {
|
||
self.type = 'app'
|
||
//获取app的canvas的dom
|
||
self.getAppDom()
|
||
} else {
|
||
self.type = 'wx'
|
||
//获取小程序的canvas的dom
|
||
self.getWXDom()
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
clear() {
|
||
if (this.type === 'wx') {
|
||
this.ctx.globalCompositeOperation = 'destination-out';
|
||
this.ctx.beginPath();
|
||
this.ctx.fillStyle = 'red';
|
||
this.ctx.fillRect(0, 0, 8000, 80000);
|
||
this.ctx.fill();
|
||
this.ctx.globalCompositeOperation = 'source-over';
|
||
// this.ctx.draw();
|
||
} else {
|
||
// this.ctx.clearRect(2000, 2000, 2000, 2000);
|
||
// this.ctx.fillStyle = '#ffffff'
|
||
// this.ctx.draw(true);
|
||
}
|
||
|
||
},
|
||
//获取app的canvas DOM
|
||
getAppDom() {
|
||
var context = uni.createCanvasContext(`${this.cId}`)
|
||
this.ctx = context
|
||
this.draw(null)
|
||
},
|
||
//获取微信的canvas DOM
|
||
getWXDom() {
|
||
// const instance = getCurrentInstance()
|
||
let query = wx.createSelectorQuery().in(this)
|
||
query
|
||
.select(`#${this.cId}`)
|
||
.fields({
|
||
node: true,
|
||
size: true
|
||
}, () => {})
|
||
.exec(this.initCanvas.bind(this))
|
||
},
|
||
initCanvas(res) {
|
||
|
||
const width = res[0].width
|
||
const height = res[0].height
|
||
const canvas = res[0].node
|
||
this.ctx = canvas.getContext('2d')
|
||
|
||
const dpr = wx.getSystemInfoSync().pixelRatio
|
||
canvas.width = width * dpr
|
||
canvas.height = height * dpr
|
||
this.canvasWidth = canvas.width
|
||
this.canvasHeight = canvas.height
|
||
this.ctx.scale(dpr, dpr)
|
||
this.draw(canvas)
|
||
},
|
||
draw(canvas) {
|
||
this.textArr = []
|
||
this.circleArr = []
|
||
this.rectArr = []
|
||
this.imgArr = []
|
||
this.lineArr = []
|
||
this.canvasData.forEach((item) => {
|
||
if (item.type === 'text') {
|
||
this.textArr.push(item)
|
||
}
|
||
if (item.type === 'image') {
|
||
this.imgArr.push(item)
|
||
}
|
||
if (item.type === 'line') {
|
||
this.lineArr.push(item)
|
||
}
|
||
if (item.type === 'circle') {
|
||
this.circleArr.push(item)
|
||
}
|
||
if (item.type === 'rect') {
|
||
this.rectArr.push(item)
|
||
}
|
||
})
|
||
if (this.imgArr.length) {
|
||
this.drawImages(this.imgArr, canvas ? canvas : null)
|
||
}
|
||
if (this.lineArr.length) {
|
||
this.drawLine(this.lineArr)
|
||
}
|
||
if (this.circleArr.length) {
|
||
this.drawCircle(this.circleArr)
|
||
}
|
||
if (this.rectArr.length) {
|
||
this.drawRect(this.rectArr)
|
||
}
|
||
if (this.textArr.length) {
|
||
this.drawText(this.textArr)
|
||
}
|
||
|
||
// this.drawLine(this.lineArr)
|
||
// this.drawCircle(this.circleArr)
|
||
// this.drawRect(this.rectArr)
|
||
// this.drawText(this.textArr)
|
||
if (this.type === 'app') {
|
||
this.ctx.draw()
|
||
}
|
||
this.loading = false
|
||
|
||
|
||
},
|
||
drawRect(draw) {
|
||
draw.forEach((item, index) => {
|
||
let x = this.fitSize(item.coord[0][0])
|
||
let y = this.fitSize(item.coord[0][1])
|
||
let w = this.fitSize(item.coord[1][0])
|
||
let h = this.fitSize(item.coord[1][1])
|
||
this.ctx.beginPath();
|
||
if (this.type === 'app') {
|
||
if (item.rectType === 'stroke') {
|
||
this.ctx.setStrokeStyle(item.borderColor); // 设置边框颜色
|
||
this.ctx.setLineWidth(item.width); // 设置边框宽度
|
||
this.ctx.strokeRect(x, y, w, h); // 绘制无填充矩形
|
||
} else {
|
||
this.ctx.setFillStyle(item.background || 'transparent');
|
||
this.ctx.fillRect(x, y, w, h);
|
||
}
|
||
|
||
} else {
|
||
if (item.rectType === 'stroke') {
|
||
this.ctx.strokeStyle = item.borderColor
|
||
this.ctx.lineWidth = item.width
|
||
this.ctx.strokeRect(x, y, w, h);
|
||
} else {
|
||
this.ctx.fillStyle = item.background || 'transparent'
|
||
this.ctx.fillRect(x, y, w, h);
|
||
}
|
||
}
|
||
})
|
||
|
||
},
|
||
countChineseAndEnglishCharacters(str, x) {
|
||
var chineseCount = str.match(/[\u4e00-\u9fa5]/g)
|
||
? str.match(/[\u4e00-\u9fa5]/g).length
|
||
: 0;
|
||
var englishCount = str.match(/[a-zA-Z]/g)
|
||
? str.match(/[a-zA-Z]/g).length
|
||
: 0;
|
||
var otherCount = str.length - chineseCount - englishCount;
|
||
const obj = {
|
||
otherCount: otherCount,
|
||
chineseCount: chineseCount,
|
||
englishCount: englishCount,
|
||
};
|
||
return (
|
||
obj.englishCount * 6 + obj.chineseCount * 12 + obj.otherCount * 7.5 + x
|
||
);
|
||
},
|
||
|
||
drawText(draw) {
|
||
draw.forEach((item, index) => {
|
||
if (item.font.length) {
|
||
if (item.font.length > 1) {
|
||
item.font.forEach((item2, index2) => {
|
||
if (this.type === 'app') {
|
||
this.ctx.setFontSize(item2.size)
|
||
} else {
|
||
this.ctx.fontSize = item2.size
|
||
}
|
||
this.ctx.fillStyle = item2.color
|
||
const x = this.countChineseAndEnglishCharacters(item.font[0].text,item.coord[0][0])
|
||
this.ctx.fillText(item2.text, this.fitSize( index2 === 1 ? x : item.coord[0][0]), this.fitSize(item.coord[0][1]))
|
||
this.ctx.closePath()
|
||
})
|
||
} else {
|
||
if (this.type === 'app') {
|
||
this.ctx.setFontSize(item.font[0].size)
|
||
} else {
|
||
this.ctx.fontSize = item.font[0].size
|
||
}
|
||
this.ctx.fillStyle = item.font[0].color
|
||
this.ctx.fillText(item.font[0].text, this.fitSize(item.coord[0][0]), this.fitSize(item
|
||
.coord[0][1]))
|
||
this.ctx.closePath()
|
||
}
|
||
|
||
|
||
}
|
||
})
|
||
|
||
|
||
},
|
||
drawImages(draw, canvas) {
|
||
let x,
|
||
y,
|
||
w,
|
||
h = 0
|
||
|
||
draw.forEach((item) => {
|
||
if (item.coord.length >= 2) x = item.coord[0][0]
|
||
y = item.coord[0][1]
|
||
w = item.coord[1][0]
|
||
h = item.coord[1][1]
|
||
if (this.type === 'wx') {
|
||
let img = canvas.createImage()
|
||
img.src = item.url
|
||
img.onload = () => {
|
||
this.ctx.drawImage(
|
||
img,
|
||
this.fitSize(item.coord[0][0]),
|
||
this.fitSize(item.coord[0][1]),
|
||
this.fitSize(item.coord[1][0]),
|
||
this.fitSize(item.coord[1][1])
|
||
)
|
||
|
||
this.drawLine(this.lineArr)
|
||
this.drawCircle(this.circleArr)
|
||
this.drawRect(this.rectArr)
|
||
this.drawText(this.textArr)
|
||
if (this.type === 'app') {
|
||
this.ctx.draw()
|
||
}
|
||
this.loading = false
|
||
}
|
||
} else {
|
||
this.ctx.drawImage(item.url, this.fitSize(x), this.fitSize(y), this.fitSize(w),
|
||
this
|
||
.fitSize(h))
|
||
|
||
}
|
||
})
|
||
},
|
||
drawLine(draw) {
|
||
draw.forEach((item) => {
|
||
let x1 = this.fitSize(item.coord[0][0])
|
||
let y1 = this.fitSize(item.coord[0][1])
|
||
let x2 = this.fitSize(item.coord[1][0])
|
||
let y2 = this.fitSize(item.coord[1][1])
|
||
this.ctx.beginPath()
|
||
this.ctx.moveTo(x1, y1)
|
||
this.ctx.lineTo(x2, y2)
|
||
if (this.type === 'app') {
|
||
this.ctx.setStrokeStyle(item.color)
|
||
this.ctx.setLineWidth(item.width)
|
||
} else {
|
||
this.ctx.strokeStyle = item.color
|
||
this.ctx.lineWidth = item.width
|
||
}
|
||
|
||
if (item.dash && item.dash.length > 0) {
|
||
//虚线
|
||
this.ctx.setLineDash(item.dash)
|
||
}
|
||
|
||
this.ctx.stroke()
|
||
this.ctx.closePath()
|
||
})
|
||
|
||
|
||
},
|
||
drawCircle(draw) {
|
||
draw.forEach((item) => {
|
||
let x = this.fitSize(item.coord[0][0])
|
||
let y = this.fitSize(item.coord[0][1])
|
||
let r = this.fitSize(item.r)
|
||
this.ctx.beginPath()
|
||
this.ctx.arc(x, y, r, 0, Math.PI * 2, false)
|
||
this.ctx.fillStyle = item.color
|
||
this.ctx.fill()
|
||
this.ctx.closePath()
|
||
})
|
||
},
|
||
fitSize(coordinate) {
|
||
let newWindowWidth = this.windowWidth //这个windowWidth指的是该设备宽度，可以onLoad监听页面加载中获取
|
||
let v = 375 / newWindowWidth //375是设计稿的大小，得到的v值是：设计稿和设备宽度的比例关系，也可理解成在设计稿的大小基础上放大或缩小的倍数
|
||
return coordinate / v //返回的是当前坐标值或者大小与v的比例
|
||
}
|
||
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style> |