Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
canvas draw multi line text and circle avatar
public async drawActivityPoster() {
const {windowWidth} = wx.getSystemInfoSync()
const width = windowWidth * 80 / 100
const ctx = wx.createCanvasContext('poster')
this.drawText({
text: '我的店铺',
ctx :ctx,
x: 0,
y: 100,
fontSize: 14,
color: '#333',
windowWidth: width,
align: 'center'
})
this.drawText({
text: '福利多多,快来看看',
ctx :ctx,
x: 0,
y: 120,
fontSize: 12,
color: '#999',
windowWidth: width,
align: 'center'
})
try {
const qrcode = await this.getImage('http://file.baixing.net/201808/4212f2276fd9239342c94ac4bc5e5818.jpeg')
ctx.drawImage(qrcode.path, (width - 110) / 2, 360, 110, 110)
} catch (e) {
console.log(e)
}
const bg = await this.getImage('http://file.baixing.net/201808/d52a9e248809eac3d62eeed1000a2f64.png')
ctx.beginPath()
const scale = (width - 20) / bg.width
ctx.drawImage(bg.path, 10, 130, width - 20 , bg.height * scale)
ctx.closePath()
this.drawText({
text: '分享本店铺至5个群分享本店铺即',
ctx :ctx,
x: 0,
y: 175,
fontSize: 14,
color: '#333',
windowWidth: width,
align: 'center'
})
this.drawText({
text: '可免至5费获得小米耳机',
ctx :ctx,
x: 0,
y: 195,
fontSize: 14,
color: '#333',
windowWidth: width,
align: 'center'
})
this.drawText({
text: '时间:2018-5-30 至 2018-7-30',
ctx :ctx,
x: 0,
y: 215,
fontSize: 12,
color: '#999',
windowWidth: width,
align: 'center'
})
this.drawMultiLintText({
text: '新店开张好礼送不停!即日起,您只需动动手指转发本店铺至5个微信群,并保存截图转发店小二(店小二微信号:12345678)即可存截图转发店小二…',
x: 10,
y: 280,
width: width,
ctx: ctx,
fontSize: 12,
color: '#999',
})
this.drawText({
text: '长按识别小程序,查看活动详情',
ctx: ctx,
x: 10,
y: 490,
fontSize: 12,
color: '#999',
windowWidth: width,
align: 'center'
})
await this.drawAvatar({
ctx: ctx,
canvasWidth: width,
src: 'http://img-weapp.baixing.net/FrH-uJ5JIAk2vLC_0x8tB1SQcXNs_240p',
width: 30
})
ctx.draw()
wx.hideLoading()
}
public async drawPoster() {
const {windowWidth} = wx.getSystemInfoSync()
const width = windowWidth * 80 / 100
const ctx = wx.createCanvasContext('poster')
const image2 = await this.getImage('http://img-weapp.baixing.net/Fp1Oqt2D8vukVWBpHnlfgtWl-4JQ_640p')
try {
const qrcode = await this.getImage('http://file.baixing.net/201808/4212f2276fd9239342c94ac4bc5e5818.jpeg')
ctx.drawImage(qrcode.path, (width - 120) / 2, 340, 120 , 120)
} catch (e) {
console.log(e)
}
ctx.drawImage(image2.path, 10, 140, width - 20 , 160)
this.drawText({
text: '我的店铺',
ctx :ctx,
x: 0,
y: 100,
fontSize: 14,
color: '#333',
windowWidth: width,
align: 'center'
})
this.drawText({
text: '我有一个非常好的宝贝,迫不及待分享给你',
ctx :ctx,
x: 0,
y: 120,
fontSize: 12,
color: '#999',
windowWidth: width,
align: 'center'
})
//const image = await this.getImage('')
this.drawText({
text: '北京大吉普...',
ctx :ctx,
x: 10,
y: 330,
fontSize: 16,
color: '#333',
windowWidth: width,
align: 'left'
})
this.drawText({
text: '¥6000',
ctx: ctx,
x: 10,
y: 330,
fontSize: 16,
color: '#FF8512',
windowWidth: width,
align: 'right'
})
this.drawText({
text: '长按识别小程序,查看商品详情',
ctx: ctx,
x: 10,
y: 480,
fontSize: 12,
color: '#999',
windowWidth: width,
align: 'center'
})
await this.drawAvatar({
ctx: ctx,
canvasWidth: width,
src: 'http://img-weapp.baixing.net/FrH-uJ5JIAk2vLC_0x8tB1SQcXNs_240p',
width: 30
})
ctx.draw()
console.log('drawed')
wx.hideLoading()
}
public drawText(option: {
text: string,
ctx: any,
x: number,
y: number,
fontSize: number,
color: string,
windowWidth: number,
align: string
}) {
const {text,ctx, x, y, fontSize, color, windowWidth, align } = option
ctx.beginPath()
ctx.setTextAlign('left')
ctx.setFontSize(fontSize)
ctx.setFillStyle(color)
const {width} = ctx.measureText(text)
let left = x
if (align === 'center') {
left = (windowWidth - width) / 2
} else if(align === 'left') {
left = x
} else if (align === 'right') {
left = windowWidth - x - width
}
ctx.fillText(text, left , y)
ctx.closePath()
}
public getImage(url: string) {
return new Promise((resolve, reject) => {
wx.getImageInfo({
src: url ,
success: function (image) {
return resolve(image)
},
fail: function(err) {
return reject(err)
}
})
})
}
public drawMultiLintText(options: {
text: string,
x: number,
y: number,
width: number,
ctx: any,
fontSize: number,
color: string
}) {
const {text, x, y, width, ctx, fontSize, color} = options
ctx.setTextAlign('left')
ctx.setFontSize(fontSize)
ctx.setFillStyle(color)
const w = ctx.measureText('e').width
let lineNumber = 0
let number = Math.floor((width - x * 2 )/ w)
let rows = Math.ceil(text.length / number) * 2
let currentRow = 0
let top = y
let word = []
for(let i = 0 ; i < text.length; i++) {
word.push(text[i])
if(text.charCodeAt(i) > 255) {
lineNumber += 2
} else {
lineNumber++
}
if (lineNumber > number || (i === text.length - 1 && currentRow === rows -1)) {
let str = word.join('')
word = []
top += 20
ctx.fillText(str, x , top)
lineNumber = 0
currentRow++
}
}
}
public async drawAvatar(options: {
ctx: any,
canvasWidth: number,
src: string,
width: number,
}) {
const {ctx,canvasWidth, src, width } = options
ctx.beginPath()
ctx.arc(canvasWidth / 2, width * 1.5 , width, 20, Math.PI * 2, true)
ctx.closePath()
ctx.setFillStyle('red')
ctx.fill()
ctx.clip()
ctx.restore()
const image = await this.getImage(src)
console.log(image.path + '2')
ctx.drawImage(image.path, canvasWidth / 2 - width, width / 2, width * 2, width * 2)
}
public saveCanvas() {
wx.canvasToTempFilePath({
x: 0,
y: 0,
canvasId: 'poster',
success: function (res :any): void {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res: any):void {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 1500
})
},
fail: function (e: any):void {
console.log(e)
}
})
},
fail: function (e: any):void {
console.log(e)
}
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.