使用canvas怎么绘制一个图片小程序

发布时间：2021-06-21 16:26:12 作者：Leah
来源：亿速云阅读：190

本篇文章为大家展示了使用canvas怎么绘制一个图片小程序，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

git clone https://github.com/kuckboy1994/mp_canvas_drawer

想在手机上使用配置自己的 appid 即可。

编译模式中已经为你配置好比较常用的两种模式：

使用canvas怎么绘制一个图片小程序

左侧是 canvasdrawer 绘制的，右侧是UI给的图

在使用页面注册组件

{
  "usingComponents": {
    "canvasdrawer": "/components/canvasdrawer/canvasdrawer"
  }
}

在页面 **.wxml 文件中加入如下代码
```
<canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>
```
painting 是需要传入的 json。 getImage 方法是绘图完成之后的回调函数，在 event.detail 中返回绘制完成的图片地址。
当前栗子中的 painting 简单展示一下。详细配置请看 API
painting（点击展开）

对象结构一览

数据对象的第一层需要三个参数: width、height、mode、views。配置中所有的数字都是没有单位的。这就意味着 canvas 绘制的是一个比例图。具体显示的大小直接把返回的图片路径放置到 image 标签中即可。

mode 可选值有 same, 默认值为空，常规下尽量不要使用。如要使用请看 Q&A的第1点。

当前可以绘制3种类型的配置: image、text、rect。配置的属性基本上使用的都是 css 的驼峰名称，还是比较好理解的。

属性	含义	默认值
url	绘制的图片地址，可以是本地图片，如：`/images/1.jpeg`
top	左上角距离画板顶部的距离
left	左上角距离画板左侧的距离
width	要画多宽	0
height	要画多高	0

属性	含义	默认值	可选值
content	绘制文本	''（空字符串）
color	颜色	black
fontSize	字体大小	16
textAlign	文字对齐方式	left	center、right
lineHeight	行高，只有在多行文本中才有用	20
top	文本左上角距离画板顶部的距离	0
left	文本左上角距离画板左侧的距离	0
breakWord	是否需要换行	false	true
MaxLineNumber	最大行数，只有设置 `breakWord: true` ，当前属性才有效，超出行数内容的显示为...	2
width	和 `MaxLineNumber` 属性配套使用，`width` 就是达到换行的宽度
bolder	是否加粗	false	true
textDecoration	显示中划线、下划线效果	none	underline（下划线）、line-through（中划线）

最佳实践
绘制操作的时候最好 锁住屏幕 ，例如在点击绘制的时候
```
wx.showLoading({
  title: '绘制分享图片中',
  mask: true
})
```
绘制完成之后
```
wx.hideLoading()
```
具体可以参考项目下的 /pages/multiple
[mpvue] 由于 canvasdrawer 不主动呈现绘制内容，而是交给调用者去使用 image 来展示，所以在mpvue更新数据就会render整个组件的，之后 canvasdrawer 又会重新被渲染，导致无限循环，所以默认情况下我把代码改为，传入的 painting 和之前的一样的话，组件就不渲染了。只有出现差异的内容才会更新（触发回调），这种个人认为还是可以接受的。增加顶层参数 mode, mode: 'same' 为可以绘制同样的内容。在 mpvue 模式下勿用。
二维码和小程序码如何绘制？

由于完成一些效果，例如： 文字下划线 等。必须要使用微信小程序 rect 相关的接口，和 clip 接口感觉相处的不好（存在bug）。可以查看微信小程序社区的帖子。
so，提供一种解决方式：使用一张中间镂空的图片盖在头像上。

上述内容就是使用canvas怎么绘制一个图片小程序，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。

相关阅读