在小程序中使用画布的示例

一直不怎么用画布，小程序之前只是看了一个视频，所以想找个例子把两者结合起来。于是出现了一个把图片保存为朋友圈相册封面的小演示。在这里，我主要记录了我遇到的一些问题和解决方法。

截图：

渲染/制作页面/颜色选择

主要是以下几个问题：

1.颜色选择器

2.页面通信

3.组件之间的通信

4 .画布(生成图片、预览/保存和包装文本)

1.颜色选择器

在小程序的文档中找不到相应的颜色选择组件。昨天(18.3.13)，小程序插件功能上线，朋友也可以选择插件。我前两天写了这个演示，所以我实现了一个简单的颜色选择。

鉴于组件的复用性，目前小程序的自定义组件只能有自己的wxml模板和wxss样式，js处理还是需要在引用组件的父组件中处理，所以改变了一种新的实现颜色选择的方式：跳转到新的页面进行选择。

注意：使用数据缓存(设置存储同步)来防止某些数据被重新初始化

/*选择color ob:对象值：color value */changecolor:函数(e){ var value=e . target . dataset . value；if (this.data.ob值){ wx . setstoragesync(this . data . ob，值)；wx . navigateto({ URL : '/pages/壁纸/壁纸'，})；} },2.页面通信

数据缓存导航到-url参数

3.组件之间的通信(数据)

模板为=' msgitem '数据=' { }.item } } '//展开模板为=' msgitem' data=' {{item}}'/4。画布(生成图片、预览/保存、换行)

生成图片路径-canvasToTempFilePath

//生成一个=this的picture drawpicture :函数(val){ const；const BTN name=val . CurrentTarget . dataset . BTN name；wx . canvastotemfilepath({ canvasid : ' my canvas '，success : function(RES){ if(btnName==' preview '){ that . preview(RES . tempfilepath)；} else if(BTN name===' save '){ that . save(RES . tempfilepath)；} }，fail:函数(err){ console . log(err)；}})}，预览/保存图片

//preview preview : function(val){ if(val){ wx . preview image({ URLs 3360[val]//要预览的图片的http链接列表})}，//save : function(val){ if(val){ wx . save imagetototototumble({ file path 3360 val，success 360 function(RES){ console . log(' success ')))；}，fail :函数(err) {console.log ('failed '，err)；If(err . errmsg===' SaveImageTotopsalbum : fail auth deny '){ wx . opensetting({ success(settingdata){ console . log(settingdata)If(settingdata。authsetting ['作用域。writephotosalbum ']){ console . log('权限获得成功，系统会提示您再次单击图片将其保存到相册中。')} else {console.log('未能获得权限，给出提示，说明没有权限您不能正常使用')} })} })；}}，文本换行

参考：https://www.jb51.net/html5/637068.html

//cut-wrap(measure text)var lasttubstrindex=0；var dTextWidth=0；var lineHeight=20//行高var initX=10//start x坐标var initY=canvasHeight/2；//起始y坐标为(var I=0；i dText.lengthI){ dTextWidth=CTX . measure text(dText[I])。宽度；if(dTextWidth canvasWidth-initX){ CTX . filltext(dtext . substring(lastsubindex，I)，initX，initY)；initY=行高；dTextWidth=0；lastsubindex=I；} if(I==dtext . length-1){ CTX . filltext(dtext . substring(Lastsubstrindex，i 1)，initX，initY)；} }画布滑动问题

这个问题是我在做的时候发现的，因为我画的图超过了一个屏幕的高度，我需要在画布上添加一个长按事件，导致滑动卡住甚至不滑动。经过各种尝试，我终于得出结论，这个事件不应该放在画布上，而是可以通过在画布上放一层视图来解决。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。