更新记录

0.0.7（2022-09-07）

更新一下命名

0.0.8（2022-09-07）

第一个版本希望大家多提意见 如果好用请去github点个星号哦谢谢

平台兼容性

easyposter

介绍

一个基于uniapp的canvas绘制海报库，让绘海报更简单更美好

参考声明

部分代码基础参考了小凡同学的代码特此感谢(已获得本人授权)

演示地址

https://github.com/boosver/easyPosterDemo

安装教程

$ npm install easyposter

$ pnpm add easyposter

$ yarn add easyposter

使用说明

import easyposter from 'easyposter'

const ctx = uni.createCanvasContext('canvasId')

const ep = new easyposter({
    ctx
})

API参考

easyRectangle

向目标画布绘制一个矩形

ep.easyRectangle(0,0,width,height,20,"#ddd222");

easyText

向目标画布绘制一段文字

ep.easyText('easyPoster真好用', 0, 0, 12, '#FFFFFFF',"'PingFang SC',tahoma,arial,'helvetica neue'");

easyGetImageInfo(Promise)

获取图片信息(支持uniapp)

ep.easyGetImageInfo('http://www.baidu.com');

easyDrawImgCover

绘制图片不变形

ep.easyDrawImgCover(path, x, y, width, height);

easyDrawCircular

绘制圆形头像

ep.easyDrawCircular(url, x, y, width, height);

easyDrawChart(Promise)

绘制图标到海报中

ep.easyDrawCircular(uCharts, 'line', uChartsConfig, {
    x: 10,
    y: 10,
    width: 300,
    height: 181
});

easyDrawSaveImg(Promise)

绘制canvas并且生成一个图片返回

ep.easyDrawSaveImg({
    canvasId: 'poster',
    destWidth: 340,
    destHeight: 501,
}).then((canvasImg) => {

})

关于绘制图表的重要提示

首先为了保证库的小巧精干，并且市面上已经有了很多靠谱成熟的解决方案所以easyposter直接拿了一个开箱即用的解决方案来进行一些封装

首先我们用的是uCharts解决方案

npm i @qiun/ucharts

uCharts对于uniapp跨端兼容性比较好，所以选用了这个方案 况且一般来说对于海报只会使用简单的图表不会用很多复杂的图表 所以uCharts的提供的图表已经满足很多日常需求。 如果你的项目中绘制海报需求要绘制图表的话，那么你就在你的项目中安装uCharts 否则则不需要安装，uCharts对于easyposter这个库来说不是必要的

具体使用请参考以下代码

const canvasWidth = 300;
const canvasHehgit = 181
const lineCtx = uni.createCanvasContext('line')
let uChartsConfig = {
    type: "area",
    context: lineCtx,
    width: canvasWidth,
    height: canvasHehgit,
    categories: ["2016", "2017", "2018", "2019", '2020'],
    series: [
        {
            name: "成交量A",
            data: [1, 5, 23, 10, 29],
            legendText: ''
        },

    ],

    animation: true,
    background: "#FFFFFF",
    color: ["#FA9371", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452","#9A60B4", "#ea7ccc"],
    padding: [15, 10, 0, 15],
    legend: {
        show: false
    },
    xAxis: {
        disableGrid: true
    },
    yAxis: {
        gridType: "dash",
        dashLength: 2
    },
    extra: {
        area: {
            type: "curve",
            opacity: 1,
            addLine: true,
            width: 2,
            gradient: true
        }
    }
}

ep.easyDrawChart(uCharts, 'line', uChartsConfig, {
    x: 10,
    y: 10,
    width: canvasWidth,
    height: canvasHehgit
}).then(() => {
    ep.easyDrawSaveImg({
        canvasId: 'poster',
        destWidth: 340,
        destHeight: 501,
    }).then((res) => {
        this.canvasImg = res;
    })
})

要注意的是如果想保证绘制出来的图表和添加到海报中的图表不变形，那么canvas的宽度和高度要与添加的图表保持一致

其余的图表配置项请参考uCharts官方文档

https://www.ucharts.cn/v2/#/