Newton's Preposterous Miscalculation

    taro-canvas-helper
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.16 • Public • Published

    taro-canvas-helper

    基于 Taro 开发的 Canvas 绘制工具,能够快捷绘制矩形,图片,文字,二维码等

    安装方法

    npm install taro-canvas-helper -s
    

    使用方法

    import CanvasHelper from 'taro-canvas-helper';
    const ctx  = Taro.createCanvasContext('canvasId')
    const helper=new CanvasHelper({
        ctx
    });
    helper.drawRect({
        width: 750,
        height: baseHeight,
        x: 0,
        y: 0,
        bgColor: '#e63127',
        radius:10
    });
    helper.initText({
        fontSize: 28,
        color: '#e93629',
        text: currentDate,
        x: 227,
        y: 167,
        lineHeight: 43,
        textAlign: 'center',
        fontWeight: 'bold'
    });
    // 绘制完成必须调用draw方法
    helper.draw();

    API

    drawImage

    功能:绘制图片

    helper.drawImage({
        width: 750,
        height: 100,
        x: 0,
        y: 0,
        url: '',
        radius:[10,20,30,10]
    });
    参数名 类型 介绍
    url string <必填> 图片加载后的本地地址,图片必须先 load 后才能使用绘制 api
    x number<必填> x 轴起点
    y number<必填> y 轴起点
    width number<必填> 绘制宽度
    height number<必填> 绘制高度
    radius number|number[]<非必填,默认值为 0> 圆角
    hMode 'center'| 'left'|'right'<非必填,默认值为 center> 水平方向对齐方式
    vMode 'center' | 'top' | 'bottom'<非必填,默认值为 center> 垂直方向对齐方式

    drawRect

    功能:绘制矩形

    helper.drawRect({
        width: 750,
        height: 100,
        x: 0,
        y: 0,
        bgColor: '#e63127',
        radius:[10,20,30,10]
    })
    参数名 类型 介绍
    bgColor string <必填> 背景颜色
    x number<必填> x 轴起点
    y number<必填> y 轴起点
    width number<必填> 绘制宽度
    height number<必填> 绘制高度
    radius number|number[]<非必填,默认值为 0> 圆角

    initText

    功能:绘制文本

    helper.initText({
        text: '',
        x: 0,
        y: 0,
        color: '#fff',
        fontSize: 16,
        lineHeight: 26
    })
    参数名 类型 介绍
    color string <必填> 字体颜色
    fontSize number <必填> 字体大小
    fontWeight 'bold'|'normal' <非必填,默认值 normal> 字体粗细
    lineHeight number <非必填,默认值为字体大小> 行高
    x number<必填> x 轴起点
    y number<必填> y 轴起点
    text number<必填> 内容
    textAlign 'left'|'center'|'right'<非必填,默认值 left> 对齐方式
    textDecoration 'line-through'|'none'<非必填,默认值 none> 文本修饰

    breakText

    功能:字体换行,超出以... 结尾

    const strArr=helper.breakText({
        str:'',
        maxByteLength:10,
        maxLine:1
    })
    参数名 类型 介绍
    str string <必填> 内容
    maxByteLength number <必填> 单行最大字节数(中文为 2 个字节,英文为 1 个字节)
    maxLine number <必填> 最大行数

    draw

    功能:完成绘制

    helper.draw()

    Install

    npm i taro-canvas-helper

    DownloadsWeekly Downloads

    33

    Version

    1.0.16

    License

    ISC

    Unpacked Size

    9.76 kB

    Total Files

    3

    Last publish

    Collaborators

    • bryce94