效果图镇楼:
本文将讲述使用wx-canvas-2d插件来实现生成海报图并保存到相册的功能,wx-canvas-2d
使用canvas 2d接口。
首先需要在页面中准备一个canvas容器,代码如下:
<canvas
type="2d"
id="poster-canvas"
class="poster-canvas"
style="width: 300rpx; height: 900rpx;"
disable-scroll="{{ true }}"
/>
style属性中的样式可以在
.wxss
文件中设置。
在 .js
文件中引入 wx-canvas-2d
,并实例化:
import {
WxCanvas2d,
Text // 绘制文本需要引入这个
} from 'wx-canvas-2d'
// 实例化对象
const canvas = new WxCanvas2d()
在页面加载完毕,页面上存在 canvas
元素之后执行 create
方法初始化画布。
// 创建画布
canvas.create({
query: '.poster-canvas', // 必传,canvas元素的查询条件
rootWidth: 750, // 参考设备宽度 (即开发时UI设计稿的宽度,默认375,可改为750)
bgColor: '#fff', // 背景色,默认透明
component: this, // 自定义组件内需要传 this
radius: 16 // 海报图圆角,如果不需要可不填
})
现在画布已经准备好了,让我们来尝试一下“Hello World”
canvas.draw({
series: [
{
type: Text,
text: 'Hello World',
fontSize: 30
}
]
})
此时可以看到画布上有了效果:
上面这只是最简单的一个演示,更复杂的绘制只需要在 series
数组中添加更多的配置项。
插件具体支持的配置项有哪些可以查看文档:https://kiccer.github.io/wx-canvas-2d/
引入的时候提示这个 怎么解决大佬
保存功能能不能详细一点
能设置透明背景吗
小程序后台运行后再切回来 绘制好的画布变成空白了