집 >위챗 애플릿 >미니 프로그램 개발 >작은 프로그램 캔버스를 사용하여 간단한 그림 응용 프로그램 작성
미니 프로그램 개발 튜토리얼캔버스를 사용하여 그림을 쓰는 방법을 소개하는 칼럼
권장(무료): 미니 프로그램 개발 튜토리얼
애플리케이션 디스플레이
Requirements
작은 응용 프로그램이므로 최종 제품에 적용 가능한 시나리오가 있고 가치 있는
요구 사항 소스
이 응용 프로그램 요구 사항
에 대한 영감은 다음과 같습니다. 이전 직장과 생활에서 우리는 우연히 동료들의 아름다운 사진
을 자주 얻었습니다. 이때 우리는 이 사진을 이모티콘 팩으로 만들고 싶습니다.
보통 사진에 몇 가지 캡션을 추가합니다
흥미로운 의사소통 도구입니다. (이모티콘 팩) 완료
위 요구 사항을 바탕으로 해체
응용 기능 정리
구현
github 저장소 https: //github.com/luosijie /f...
제 프로젝트가 마음에 드셨다면 별표를 주시고 격려해주세요
이 애플리케이션은 미니 프로그램으로 개발되었습니다
상태 관리
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 <p><strong> 이벤트 듣기</strong></p><p><strong>Mobile</strong> </p><pre class="brush:php;toolbar:false">// 移动事件绑定函数 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' }) } }) } } }) } } }) }
위 내용은 작은 프로그램 캔버스를 사용하여 간단한 그림 응용 프로그램 작성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!