Needling Perl Mongers

    wxa-plugin-canvas

    1.1.12 • Public • Published

    wxa-plugin-canvas

    小程序组件-小程序海报组件 npm npm

    概述

    wxa-plugin-canvas是一个生成二维码海报的组件,通过非常简单的配置就可以生成精美的海报

    生成效果

    组件原理说明文章

    https://juejin.im/post/5b7e48566fb9a01a1059543f

    使用之前

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

    安装

    方式一.通过 npm 安装 (推荐)

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

    # npm
    npm i wxa-plugin-canvas -S --production
    
    # yarn
    yarn add wxa-plugin-canvas --production
    

    方式二.下载代码

    直接通过 git 下载 wxa-plugin-canvas 源代码,并将miniprogram_dist目录拷贝到自己的项目组件目录中

    使用组件

    {
      "usingComponents": {
        "poster": "wxa-plugin-canvas/poster",
      }
    }

    接着就可以在 wxml 中直接使用组件

    <poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
        <button>点击生成海报</button>
    </poster>

    使用注意事项

    1. 图片的域名务必添加到downloadFile合法域名中(开发设置-服务器域名-downloadFile合法域名)
    2. 如果要使用异步生成海报的方法,务必组件要加上id="poster"

    组件参数解释

    config字段

    字段 类型 必填 描述
    width Number(单位:rpx) 画布宽度
    height Number(单位:rpx) 画布高度
    backgroundColor String 画布颜色
    debug Boolean false隐藏canvas,true显示canvas,默认false
    pixelRatio Number 1为一般,值越大越清晰
    preload Boolean true:图片资源预下载 默认false
    hide-loading Boolean true:隐藏loading 默认false
    blocks Object Array(对象数组) 看下文
    texts Object Array(对象数组) 看下文
    images Object Array(对象数组) 看下文
    lines Object Array(对象数组) 看下文

    blocks字段

    字段名 类型 必填 描述
    x Number(单位:rpx) 块的坐标
    y Number(单位:rpx) 块的坐标
    width Number(单位:rpx) 如果内部有文字,由文字宽度和内边距决定
    height Number(单位:rpx)
    paddingLeft Number(单位:rpx) 内左边距
    paddingRight Number(单位:rpx) 内右边距
    borderWidth Number(单位:rpx) 边框宽度
    borderColor String 边框颜色
    backgroundColor String 背景颜色
    borderRadius Number(单位:rpx) 圆角
    text Object 块里面可以填充文字,参考texts字段解释
    zIndex Int 层级,越大越高

    texts字段

    字段名 类型 必填 描述
    x Number(单位:rpx) 坐标
    y Number(单位:rpx) 坐标
    text String|Object 当Object类型时,参数为text字段的参数,marginLeft、marginRight这两个字段可用(示例请看下文)
    fontSize Number(单位:rpx) 文字大小
    color String 颜色
    opacity Int 1为不透明,0为透明
    lineHeight Number(单位:rpx) 行高
    lineNum Int 根据宽度换行,最多的行数
    width Number(单位:rpx) 没有指定为画布宽度
    marginLeft Number(单位:rpx) 当text字段为Object可以使用,用来控制多行文字间距
    marginRight Number(单位:rpx) 当text字段为Object可以使用,用来控制多行文字间距
    textDecoration String 目前只支持 line-through(贯穿线),默认为none
    baseLine String top| middle|bottom基线对齐方式
    textAlign String left|center|right对齐方式
    zIndex Int 层级,越大越高
    fontFamily String 小程序默认字体为'sans-serif', 请输入小程序支持的字体,例如:'STSong'
    fontWeight String 'bold'加粗字体,目前小程序不支持 100 - 900 加粗
    fontStyle String 'italic'倾斜字体

    images字段

    字段 类型 必填 描述
    x Number(单位:rpx) 右上角的坐标
    y Number(单位:rpx) 右上角的坐标
    url String 图片url(需要添加到下载白名单域名中)也支持本地图片
    width Number(单位:rpx) 宽度(会根据图片的尺寸同比例缩放
    height Number(单位:rpx) 高度(会根据图片的尺寸同比例缩放
    borderRadius Number(单位:rpx) 圆角,跟css一样
    borderWidth Number(单位:rpx) 边框宽度
    borderColor String 边框颜色
    zIndex Int 层级,越大越高

    lines字段

    字段 类型 必填 描述
    startX Number(单位:rpx) 起始坐标
    startY Number(单位:rpx) 起始坐标
    endX Number(单位:rpx) 终结坐标
    endY Number(单位:rpx) 终结坐标
    width Number(单位:rpx) 线的宽度
    color String 线的颜色
    zIndex Int 层级,越大越高

    事件

    success

    返回生成海报图片的本地url,一般做法是使用wx.previewImage预览海报,如下

    onPosterSuccess(e) {
        const { detail } = e;
        wx.previewImage({
            current: detail,
            urls: [detail]
        })
    }

    fail

    返回错误信息

    异步生成海报

    有些场景可能需要发起ajax请求后才能获取生成海报的数据,这里提供了异步生成海报的方式。

    只需要引入组件中的poster/poster.js,如下调用就行了

    import Poster from '../../miniprogram_dist/poster/poster';
    Page({
        /**
         * 异步生成海报
         */
        onCreatePoster() {
         // setData配置数据
         this.setData({ posterConfig: {...} }, () => {
             Poster.create(); 
         });
        }
    })

    自定义组件异步生成海报

    有些场景可能需要发起ajax请求后才能获取生成海报的数据,这里提供了异步生成海报的方式。

    只需要引入组件中的poster/poster.js,如下调用就行了,与page不同的是,需要在Poster.create中加入this。

    import Poster from '../../miniprogram_dist/poster/poster';
    Component({
        /**
         * 自定义组件异步生成海报
         */
        onCreatePoster() {
         // setData配置数据
         this.setData({ posterConfig: {...} }, () => {
             Poster.create(true, this); 
         });
        }
    })

    赞赏

    问题反馈

    有什么问题可以直接提issue

    提issue

    Keywords

    Install

    npm i wxa-plugin-canvas

    DownloadsWeekly Downloads

    24

    Version

    1.1.12

    License

    ISC

    Unpacked Size

    46.6 kB

    Total Files

    12

    Last publish

    Collaborators

    • jasondu