更新记录

v0.2.7(2020-07-11)

  • 绘制 text 元素时增加对 text-decoration 属性的支持,现在可选的属性值有 "none""line-through"
  • demo 中增加了 text-decoration 属性的 示例
  • demo 中增加了使用 px 作为单位绘制的 示例
  • 更新了 text 元素的 wiki
  • 其它代码和类型优化
  • 见 https://github.com/xlfsummer/mp-painter/releases

v0.2.6(2020-07-06)

支持了 object-position 属性 增加了 object-position 相关的 DEMO 演示 优化了内部图片尺寸的获取

查看更多

mp-painter

npm size build & deploy demo

  • 声明式地创建适用于 uniapp 和原生微信小程序的 canvas 海报
  • 目前对H5、微信、支付宝、百度端做了兼容处理,其它端还未调试过
  • 支持 text / rect / line / text-block / image 等对象绘制
  • 支持基于文字宽度的多行文本换行,lineClamp 控制
  • 基于 typescript 的友好代码提示
  • 支持水平、垂直排列布局和绝对定位
  • 会自动将支付宝的绘制尺寸放大两倍,解决其绘制模糊的问题
  • 支持原生微信小程序使用,见 wiki

安装

npm install mp-painter --save

Hello World

<template>
    <canvas canvas-id="canvas"></canvas>
</template>
import Painter from "mp-painter";

// onReady 中
let painter = new Painter(uni.createCanvasContext("canvas"));
await painter.draw({
    type: "text",
    color: "#fcc",
    fontSize: 60, // = 60rpx
    content: "Hello World" //绘制的文本
});

示例&文档

  • 文档请查看 wiki
  • 示例请查看 在线 DEMODEMO 源码
    也可通过手机扫描下方二维码进入 DEMO
    DEMO站点二维码
  • 作者推荐通过查看在线 DEMO 站点与对应 DEMO 源码的方式理解和学习本插件

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问