更新记录

3.1.6（2023-02-20）

更新新版地址

老插件不再维护

3.1.5（2022-11-24）

细节修改

3.1.4（2022-11-08）

\n 换行失效的bug

平台兼容性

sakura-canvas(海报生成器)

新版地址: https://ext.dcloud.net.cn/plugin?id=10960

公告

本次更新为一次大更新，重新架构插件结构，之前的js隐性多继承太low了。！！！这次更新没有完全向下兼容！！！，一些地方需要做出改变。

如有不懂的地方先查看示例项目或者添加下面的联系方式，联系本人。！！！

1) 新增了监听回调 ！！！ 重要更新

2) 新增了修改画布宽高方法 draw.setCanvasStyle(宽度, 高度)

3) 新增了修改导出画布样式的方法draw.setExportImageStyle

4) 修复了一些问题 比如：字节跳动小程序导出的图片太模糊，性能问题 ...

5) 新增动态设置画布大小

6) Draw类初始化参数改变

1，fileType，quality参数移至exportImageStyle属性

2、exportDelayTime改名为exportImageDelayTime

3、新增fontStyle属性用于设置字体的全局样式

4、新增exportImageTips属性用于导出图片时的提示

5、移除success属性，移至到监听(init)事件

7) 一些方法改名

1、 createPoster方法改名为drawPoster

2、callBack回调改名为callback ！！！

8) 这次更新之后不在内部调用绘制背景，需要用户自行调用方法！！！方法名称为drawBackground！！！

9) 本次更新完善2d绘制不在只限制微信小程序，目前可用于字节跳动，微信，支付宝小程序。

10）更新示例项目，

1、添加v3写法与v2写法的示例

2、更新动态画布大小的示例

联系方式

QQ: 2445263384

提示:

1、最好引入示例项目看一下如何使用

2、现已支持小程序2d绘制(微信小程序，字节跳动小程序，支付宝小程序均可使用)

3、已支持钉钉小程序(不支持2d绘制)

4、绘制文字已添加高亮文字！！！

5、绘制文字已添加文本框, 可以用来为文字添加边框，可以是边框也可以是填充的背景色

6、矩形,矩形图片圆角属性已实现设置多个不同圆角角度

感谢话语

非常感谢QQ: 119582291 对本项目的bug修复于2d绘制的完善！！！

引入

import Draw from '@/uni_modules/sakura-canvas/js_sdk/index'

Draw类初始化属性

const draw = new Draw({
    width: 375,
    height: 500,
    canvasId: 'myCanvas',
    _this: this,
    unit: 'px',
    background: {
        type: 'color', 
        color: '#fffff',
        w: 375,
        h: 500
    },
    exportImageStyle:{
        // 导出图片的类型只支持 JPG/PNG
        fileType: 'png',
        // 导出图片的质量 0~1之间
        quality: 1
    },
    drawDelayTime: 200,
    exportImageDelayTime: 200,
    drawTipsText: '绘制中...',
    exportImageTips: '导出图片中...'
})

Draw监听回调

import Draw from '@/uni_modules/sakura-canvas-js/js_sdk'
const draw = new Draw({
    width: 375,
    height: 500,
    canvasId: 'myCanvas',
    _this: this,
    unit: 'px',
    background: {
        type: 'color', 
        color: '#fffff',
        w: 375,
        h: 500
    },
    exportImageStyle:{
        // 导出图片的类型只支持 JPG/PNG
        fileType: 'png',
        // 导出图片的质量 0~1之间
        quality: 1
    },
    drawDelayTime: 200,
    exportImageDelayTime: 200,
    drawTipsText: '绘制中...',
    exportImageTips: '导出图片中...'
})
// init: 初始化完成可以绘制画布背景(现在画布背景需要自行调用方法绘制)，等同于之前的success属性
draw.$on('init', () => {
    // 绘制画布背景
    await draw.drawBackground()
})
// background: 绘制画布背景完成，会具体返回背景的宽度高度和一个style(不需要监听时可以不监听)
// 用于当背景为图片(mode: widthFix/heightFix)时不确定的宽度/高度，可以动态修改画布的宽
draw.$on('background', async result => {
    // w: 背景宽度 h: 背景高度
    const { w, h } = result
    // 可以在此处调用setCanvasStyle方法用于修改画布大小
})
// drawComplete: 用于监听绘制完成事件, 可以返回当前画布的宽度高度和已经绘制完成内容的高度, 用于当前的情况，不确定画布高度时，动态修改画布的高度
draw.$on('drawComplete', async result => {
    // width: 设置的画布的宽度
    // height:设置的画布的高度
    // contentWidth: 绘制出来的内容宽度
    // contentWidth: 绘制出来的内容高度
    const { width, height, contentHeight, contentWidth } = result
    // 可以在此处调用setCanvasStyle方法用于修改画布大小
})

目录

绘制文字 返回目录

绘制矩形 返回目录

绘制圆形 返回目录

绘制图片 返回目录

绘制三角形 返回目录

绘制线条 返回目录

绘制二维码 返回目录

特殊类型参数

DrawBackground 点我返回

ExportImageStyle 点我返回

Font 点我返回

LineHeight 点我返回

HighlightText(注意这是一个数组对象，下面描述对象属性值) 点我返回

textRect 点我返回

tips: 在微信小程序上绘制的边框可能并不是那种和文字非常的对称的敬请谅解

Rotate 返回绘制矩形 返回绘制圆形 返回绘制图片

QrCodeImage 返回绘制二维码

TriangleRotate 返回绘制三角形

Gradient 返回绘制矩形 返回绘制圆形

// 线性
const react = {
    type: 'rect',
    w: 400,
    h: 200,
    gradient: {
        show: true,
        position: {
            x0: 0,
            y0: 0,
            x1: 400,
            y1: 0
        },
        colors: [{
            stop: 0,
            color: 'red'
        }, {
            stop: 1,
            color: 'white'
        }]
    }
}
// 圆形
const circle = {
    type: 'arc',
    y: 200,
    r: 100,
    gradient: {
        show: true,
        type: 'circle',
        position: {
            x: 0,
            y: 0,
            r: 50,
        },
        colors: [{
            stop: 0,
            color: 'red'
        }, {
            stop: 1,
            color: 'white'
        }]
    }
}

线性渐变Position参数 点我返回

圆形渐变Position参数 点我返回

渐变colors参数 点我返回

Shadow 阴影参数 返回绘制矩形 返回绘制圆形 返回绘制图片

callback 返回绘制文字 返回绘制矩形 返回绘制圆形 返回绘制图片 返回绘制线条 返回绘制二维码 返回绘制三角形

 callback: (before, all) => {
     let { sx, sy, ex, ey, w, h } = before
     // sx: 上一次绘制内容开始的x轴位置
     // sy: 上一次绘制内容开始的y轴位置
     // ex: 上一次绘制内容结束的x轴位置
     // ey: 上一次绘制内容结束的y轴位置
     // w: 上一次绘制内容的宽度
     // h: 上一次绘制内容的高度
     // callback 返回的对象会覆盖原属性
     return {
         x: sx,
         y: sy
     }
 }

JSON方式绘制海报 返回目录

const res = await draw.drawPoster(({ bgObj, ctxObj }) => {
    // bgObj: 背景的宽高
    // ctxObj: 画布的宽高
    // 文字
    const text = {
        type: 'text',
        // 查看绘制文字的参数
    }
    // 矩形
    const react = {
        type: 'rect',
        // 查看绘制矩形的参数
    }
    // 圆形
    const arc = {
        type: 'arc',
        //  查看绘制圆形的参数
    }
    // 三角形
    const triangle = {
        type: 'triangle',
        // 查看绘制三角形的参数
    }
    // 线条
    const line = {
        type: 'line',
        // 查看绘制线条的参数
    }
    // 图片
    const image = {
        type: 'image',
        // 查看绘制图片的参数
    }
    // 二维码
    const qrcode = {
        type: 'qrcode',
        // 查看绘制二维码的参数
    }
    // 自定义绘制
    const custom = {
        type: 'custom',
        setDraw(Context) {
            // 原生方法绘制
            Context.fillText('你好', 0, 200)
        }
    }
    return [ react, arc, text ]
})
let { success, message, data } = res
// succes: 是否绘制成功
// message: 绘制成功与失败时的提示
// data: 绘制成功时返回的图片地址

[#textRect]: