使用applet canvas编写一个简单的图片应用程序（applet canvas生成海报）

小程序开发教程专栏介绍了使用canvas编写图片

推荐（免费）:小程序开发教程

应用程序显示

截图

要求

既然是小应用，就希望最终产品有适用场景，有价值。

需求来源

这种应用需求的启发在以往的工作和生活中，我们经常会在不经意间得到同事的美照。这时候我们要把这张照片做成表情包，一般给图片加上几句说明性的话，一个有趣的交流工具（表情包）就完成了。

基于上述需求的需求分析可以拆解出需要应用的功能。

用户需要上传一张图片，可以添加文字，可以调整样式并旋转和缩放。此外，我们希望插入一些地图，您可以旋转和缩放，并且用户可以将图片导出到相册中。

https://github.com/luosijie/f github仓库...

如果你喜欢我的项目，欢迎给一颗星以鼓励这个应用程序是用小程序开发的。

使用框架:mpx使用技术:applet画布状态管理

从“@ mpxjs/core”const store = createstore（{ state:{ cavas:null，//cnavas实例ctx: null，// canvas上下文实例elements:【】，// canvas元素activeIndex: null，//当前编辑元素索引模式:“背景”，//当前编辑模式:背景，文本，贴纸字体样式:{//文本默认样式不透明度:1，Fillstyle:“# 000000”，笔画样式:“# 00000”} } }，突变:{ set canvas（state，data）{ state . can data）{ state . mode = data }，setActiveIndex（state，data）{ state . activeindex = data }，setfont style（state，{ key，data }）{ state . font style【key】= data }，//Add text Add text（state）{ const size = 50 const string =‘Please enter text‘const text = { type:‘text‘，data: string，scale: 1，size，left: 100，top: 100， 元素=【】状态。Active index = null}}）导出默认商店画布初始化。

//初始化画布asyncinitcanvas（）{ const query = this。CreateSelectorQuery（）查询。选择（# canvas）。字段（{node: true，size: true}）。exec（async RES =》{ const canvas = RES【0】。node const CTX = canvas . get context（‘2d’）store . commit（‘set canvas’，canvas）store . commit（‘set CTX’，CTX）wait this . load image（‘images/icon -rotate . png’）。然后（res = & gt{这个。形象。rotate = res}）画布。width = RES【0】。宽度*这个。DPR画布。高度= RES【0】。身高*这个。DPR·CTX。规模（这个。DPR这是。DPR）这个。Draw grid（）} }画一幅画。

/* * *绘制图片* @ param { Object } ele canvas element */Draw image（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（center x，centerY）this . CTX . rotate（ele . rotate）this . CTX . draw image（ele . data，ele.left-centerx，ele.top-centery，width，height）this . CTX

/* * * Draw text * @ param { Object } ele canvas element */Draw text（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 . CTX . font = ` $ { ele . size

init controller（ele）{ const cs = this . convert 2 controller size（ele）this . CTX . save（）this . CTX . stroke style =‘# eee‘this . CTX . translate（cs . centerx，cs . centery）this . CTX . rotate（cs . rotate ）//绘制虚线边框this . CTX . setline dash（【10，5】，5）thi

//画布渲染函数render canvas（）{ this . CTX . clear rect（0，0，this.ctx.canvas.width，this . CTX . canvas . height）this . draw grid（‘draw -background‘，this . background）if（this . background）this . draw image（this . background）for（让I = 0；我& ltp & gt& ltstrong & gt事件监督

这几篇文章你可能也喜欢：

• 介绍了微信小程序画布开发的注意事项。
• 通过实例了解如何在小程序中实现画布拖动功能（微信小程序画布插件）
• 如何使用小程序的画布绘制二维码？（如何利用小程序的画布绘制二维码图形）
• 教你如何在微信小程序中用画布绘制天气折线图（附代码）（小程序天气预报源代码）
• 本文介绍了微信小程序canvas开发中的注意事项。

本文由主机参考刊发，转载请注明：使用applet canvas编写一个简单的图片应用程序（applet canvas生成海报） https://zhujicankao.com/118835.html