基于 Taro 框架的微信小程序 canvas 绘图组件（基于的近义词）

基于 Taro 框架的微信小程序 canvas 绘图组件（基于的近义词）

taro-plugin-canvas

概述

taro-plugin-canvas 是基于 Taro 框架的微信小程序 canvas 绘图组件，封装了常用的操作，通过配置的方式生成分享图片

本组件是基于 wxa-plugin-canvas 的Taro封装版本

生成效果

组件原理说明

参见 wxa-plugin-canvas => https://juejin.im/post/5b7e48566fb9a01a1059543f

使用之前

使用 taro-plugin-canvas 前，请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。

安装

通过 npm 安装 (推荐)

小程序已经支持使用 npm 安装第三方包，详见 npm 支持

# npmnpm i taro-plugin-canvas -S --production# yarnyarn add taro-plugin-canvas --production

使用组件

// 引入代码import { TaroCanvasDrawer } from '../../component/taro-plugin-canvas';// 在 render 方法中调用// 注意点 // config 绘图配置信息 - 必填项// onCreateSuccess 绘图成功回调 - 必须实现 => 接收绘制结果、重置 TaroCanvasDrawer 状态// onCreateFail 绘图失败回调 - 必须实现 => 接收绘制错误信息、重置 TaroCanvasDrawer 状态

方式二.-代码

直接通过 git - taro-plugin-canvas 源代码，并将src/component/taro-plugin-canvas目录拷贝到自己的项目的 src/component目录中

使用组件

// 引入代码 *引入方式和上面的方式一略有不同import TaroCanvasDrawer from '../../component/taro-plugin-canvas';// 在 render 方法中调用 和方式一一样

使用注意事项

图片的域名务必添加到downloadFile合法域名中（开发设置-服务器域名-downloadFile合法域名） 【P.s 开发时可 选中不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书】 【P.s 真机运行，可打开调试模式】

组件参数解释

config字段

blocks字段

texts字段

images字段

lines字段

事件

success

成功回调 onCreateSuccess

返回生成海报图片的本地url，一般做法是使用wx.previewImage预览海报或者在指定位置预览，如下

// 绘制成功回调函数 （必须实现）=> 接收绘制结果、重置 TaroCanvasDrawer 状态 onCreateSuccess = (result) => { const { tempFilePath, errMsg } = result; Taro.hideLoading(); if (errMsg === 'canvasToTempFilePath:ok') { this.setState({ shareImage: tempFilePath, // 重置 TaroCanvasDrawer 状态 canvasStatus: false, config: null }) } else { // 重置 TaroCanvasDrawer 状态 this.setState({ canvasStatus: false, config: null }) Taro.showToast({ icon: 'none', title: errMsg || '出现错误' }); console.log(errMsg); } }

fail

错误回调 onCreateFail

// 绘制失败回调函数 （必须实现）=> 接收绘制错误信息、重置 TaroCanvasDrawer 状态 onCreateFail = (error) => { Taro.hideLoading(); // 重置 TaroCanvasDrawer 状态 this.setState({ canvasStatus: false, config: null }) console.log(error); }

Demo

以下是简易的Demo实现，也可以clone代码，里面有具体实现，线上案例见小程序 RssFeed

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。