很早就想写一个挪动端图片小利用了,最近刚好休业在家,于是抽出工夫实现下本人的小想法
利用展现
截图
在线预览
需要
既然是小利用,那就心愿最终成品是有 实用的场景 且是 有价值 的
需要起源
这个利用需要的灵感
在以前工作生存中,常常会无心中取得共事的 美照
这时咱们想要把这张照片做成表情包
个别给图片增加几个阐明文字
一个有意思的沟通工具(表情包)就实现了
需要剖析
基于以上需要的拆解
能够将要利用性能实现整顿一下
- 用户须要上传一张图片
- 能够增加文字
- 文字能够作 款式调整 和 旋转缩放
- 另外咱们心愿还能够插入一些贴图
- 贴图能够做 旋转缩放
- 用户导出图片到相册
实现
github 仓库 https://github.com/luosijie/f…
如果喜爱我的我的项目,欢送给个星星激励一下
这个利用是用小程序开发的
- 应用框架:mpx
- 应用技术:小程序 canvas
状态治理
import {createStore} from '@mpxjs/core'
const store = createStore({
state: {
cavas: null, // cnavas 实例
ctx: null, // canvas 上下文实例
elements: [], // canvas 元素
activeIndex: null, // 以后编辑中的元素索引
mode: 'background', // 以后编辑模式:background, text, sticker
fontStyle: { // 文字默认款式
opacity: 1,
fillStyle: '#000000',
strokeStyle: '#000000'
}
},
mutations: {setCanvas (state, data) {state.canvas = data},
setCtx (state, data) {state.ctx = data},
setElements (state, data) {state.elements = data},
setMode (state, data) {state.mode = data},
setActiveIndex (state, data) {state.activeIndex = data},
setFontStyle (state, { key, data}) {state.fontStyle[key] = data
},
// 增加文字
addText (state) {
const size = 50
const string = '请输出文字'
const text = {
type: 'text',
data: string,
scale: 1,
size,
left: 100,
top: 100,
rotate: 0,
opacity: state.fontStyle.opacity,
fillStyle: state.fontStyle.fillStyle,
strokeStyle: state.fontStyle.strokeStyle
}
state.elements.push(text)
state.activeIndex = state.elements.length - 1
},
// 增加贴图
addSticker (state, data) {state.elements.push(data)
state.activeIndex = state.elements.length - 1
},
// 删除以后选中
deleteActiveELement (state) {state.elements.splice(state.activeIndex, 1)
state.activeIndex = null
},
// 清空画布
clear (state) {state.elements = []
state.activeIndex = null
}
}
})
export default store
画布初始化
// 初始化画布
async initCanvas() {const query = this.createSelectorQuery()
query
.select('#canvas')
.fields({node: true, size: true})
.exec(async res => {const canvas = res[0].node
const ctx = canvas.getContext('2d')
store.commit('setCanvas', canvas)
store.commit('setCtx', ctx)
await this.loadImage('/images/icon-rotate.png').then(res => {this.image.rotate = res})
canvas.width = res[0].width * this.dpr
canvas.height = res[0].height * this.dpr
ctx.scale(this.dpr, this.dpr)
this.drawGrid()})
}
绘制图片
/**
* 绘制图片
* @param {Object} ele canvas 元素
*/
drawImage(ele) {this.ctx.save()
const width = ele.width
const height = ele.height
const centerX = ele.left + ele.width / 2
const centerY = ele.top + ele.height / 2
this.ctx.translate(centerX, centerY)
this.ctx.rotate(ele.rotate)
this.ctx.drawImage(ele.data, ele.left - centerX, ele.top - centerY, width, height)
this.ctx.restore()}
绘制文字
/**
* 绘制文字
* @param {Object} ele canvas 元素
*/
drawText(ele) {this.ctx.save()
const width = ele.size * ele.data.length
const height = ele.size
const centerX = ele.left + width / 2
const centerY = ele.top + height / 2
this.ctx.translate(centerX, centerY)
this.ctx.rotate(ele.rotate)
this.ctx.font = `${ele.size}px bold sans-serif`
this.ctx.globalAlpha = ele.opacity
this.ctx.fillStyle = ele.fillStyle
this.ctx.strokeStyle = ele.strokeStyle
// this.ctx.lineWidth = 2
this.ctx.textBaseline = 'top'
console.log('draw-text', ele)
this.ctx.fillText(ele.data, ele.left - centerX, ele.top - centerY)
this.ctx.strokeText(ele.data, ele.left - centerX, ele.top - centerY)
this.ctx.restore()}
绘制控制元件
initController(ele) {const cs = this.convert2ControllerSize(ele)
this.ctx.save()
this.ctx.strokeStyle = '#eee'
this.ctx.translate(cs.centerX, cs.centerY)
this.ctx.rotate(cs.rotate)
// 绘制虚线边框
this.ctx.setLineDash([10, 5], 5)
this.ctx.strokeRect(cs.left - cs.centerX, cs.top - cs.centerY, cs.width, cs.height)
// 绘制控制点 - 旋转
this.ctx.drawImage(this.image.rotate, cs.left + cs.width - 10 - cs.centerX, cs.top + cs.height - 10 - cs.centerY, 20, 20)
this.ctx.restore()}
画布渲染函数
// 画布渲染函数
renderCanvas() {this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
this.drawGrid()
console.log('draw-background', this.background)
if (this.background) this.drawImage(this.background)
for (let i = 0; i < this.elements.length; i++) {const ele = this.elements[i]
// 渲染背景
if (ele.type === 'background') {this.drawImage(ele)
}
if (ele.type === 'sticker') {this.drawImage(ele)
}
// 渲染文字
if (ele.type === 'text') {this.drawText(ele)
}
// 选中元素增加控制元件
if (this.activeIndex === i) {this.initController(ele)
}
}
}
事件监听
挪动
// 挪动事件绑定函数
handleMove(e) {console.log('mouse-move', e)
if (e.touches.length > 1) return
const x = e.touches[0].x
const y = e.touches[0].y
const dx = this.startTouches[0].x - x
const dy = this.startTouches[0].y - y
const elements = this.elements.slice()
elements[this.activeIndex || 0].left = this.startSelected.left - dx
elements[this.activeIndex || 0].top = this.startSelected.top - dy
store.commit('setElements', elements)
}
旋转
// 旋转绑定函数
handleRotate(e) {console.log('handleRotate')
const start = this.startTouches[0]
const end = e.touches[0]
const center = {
x: this.startSelected.centerX,
y: this.startSelected.centerY
}
const startLength = Math.sqrt((center.x - start.x) ** 2 + (center.y - start.y) ** 2)
const endLength = Math.sqrt((center.x - end.x) ** 2 + (center.y - end.y) ** 2)
const radian = this.convert2Radian(start, end, center)
const scale = endLength / startLength
const elements = this.elements.slice()
const selected = elements[this.activeIndex]
// 旋转
selected.rotate = this.startSelected.rotate - radian
// 缩放
if (selected.type === 'text') {
selected.left = this.startSelected.centerX - this.startSelected.size * this.startSelected.data.length * scale / 2
selected.top = this.startSelected.centerY - this.startSelected.size * scale / 2
selected.size = this.startSelected.size * scale
}
if (selected.type === 'sticker') {
selected.left = this.startSelected.centerX - this.startSelected.width * scale / 2
selected.top = this.startSelected.centerY - this.startSelected.height * scale / 2
selected.width = this.startSelected.width * scale
selected.height = this.startSelected.height * scale
}
store.commit('setElements', elements)
}
缩放
// 缩放事件绑定函数
handleScale(e) {if (e.touches.length !== 2 || this.mode !== 'background') return
const startLength = Math.sqrt((this.startTouches[0].x - this.startTouches[1].x) ** 2 +
(this.startTouches[0].y - this.startTouches[1].y) ** 2
)
const endLength = Math.sqrt((e.touches[0].x - e.touches[1].x) ** 2 + (e.touches[0].y - e.touches[1].y) ** 2
)
const scale = endLength / startLength
const elements = this.elements.slice()
const selected = elements[this.activeIndex || 0]
selected.left = this.startSelected.centerX - this.startSelected.width * scale / 2
selected.top = this.startSelected.centerY - this.startSelected.height * scale / 2
selected.width = this.startSelected.width * scale
selected.height = this.startSelected.height * scale
// elements[this.activeIndex || 0].scale = this.startSelected.scale * scale
store.commit('setElements', elements)
}
导出图片
export() {if (!store.state.elements.length) {
wx.showToast({
title: '加点货色再导出吧',
icon: 'none'
})
return
}
wx.showModal({
title: '提醒',
content: '图片将保留到手机相册',
success(res) {if (res.confirm) {console.log('export-canvas', store.state.ctx)
const canvas = store.state.canvas
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: canvas.width,
height: canvas.height,
canvas,
complete(res) {if (res.errMsg === 'canvasToTempFilePath:ok') {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({
title: '图片保留胜利',
icon: 'none'
})
}
})
}
}
})
}
}
})
}
我的项目继续更新优化,感兴趣的敌人能够关注一下,一起交流学习
github 仓库 https://github.com/luosijie/f…