更新记录

1.3.1（2021-09-10）

修复 scale属性导致drawText().then返回的draw_width位置不精确；

1.3.0（2021-07-01）

新增 设置画布宽度setCanvasWidth()和高度setCanvasHeight()

1.2.9（2021-07-01）

新增 drawRect函数新增设置边框大小（border_width）和颜色（border_color）并支持同时使用border_radius

平台兼容性

r-canvas简介

插件名：r-canvas
插件说明：基于原生canvas绘制2D海报，canvas原生方法的二次封装，函数扩展，自定义函数，生成图片不失帧，还原真实画质，兼容性强，打造适配所有端，打造最好用的canvas插件，有问题请留言反馈，作者看到会第一时间快速修复并发版，还请留意更新公告！

r-canvas模板列表(码云)

r-canvas-example

r-canvas兼容性

此插件适应所有手机屏幕，承诺打造兼容所有端的r-canvas插件，待测试可以使用还请开发者们第一时间反馈，你们的支持是我更新插件的最大动力！~

使用方式

在template中引入组件

<r-canvas ref="rCanvas"></r-canvas>

在script中引入组件

import rCanvas from "@/components/r-canvas/r-canvas.vue"
export default{
    components:{
        rCanvas
    }
}

使用示例

onReady(){
    this.$nextTick(async ()=>{

        // 初始化
        await this.$refs.rCanvas.init({
            canvas_id:"rCanvas"
        })

        // 画图
        await this.$refs.rCanvas.drawImage({
            url:"/static/product_poster.png",
            x:0,
            y:0,
            w:375,
            h:630
        }).catch(err_msg=>{
            uni.showToast({
                title:err_msg,
                icon:"none"
            })
        })

        // 画文字
        await this.$refs.rCanvas.drawText({
            text:"精选好物",
            max_width:0,
            x:38,
            y:590,
            font_color:"rgb(175, 174, 175)",
            font_size:11
        }).catch(err_msg=>{
            uni.showToast({
                title:err_msg,
                icon:"none"
            })
        })

        // 生成海报
        await this.$refs.rCanvas.draw((res)=>{
            //res.tempFilePath：生成成功，返回base64图片
            // 保存图片
            this.$refs.rCanvas.saveImage(res.tempFilePath)
        })
    })
}

r-canvas方法说明

每个方法都有成功回调”.then()“ 和 错误回调”.catch()“，还请写上.catch捕捉错误信息方便调试错误。

init(Object)方法说明

drawImage(Object)方法说明

drawText(Object)方法说明

drawText(Object).then回调

示例

this.$refs.rCanvas.drawText({
    text:"精选好物",
    max_width:0,
    x:38,
    y:590,
    font_color:"rgb(175, 174, 175)",
    font_size:11
}).then(res=>{
    // res.draw_x
    // res.draw_y
    // res.draw_width
    // res.draw_height
}).catch(err_msg=>{
    uni.showToast({
        title:err_msg,
        icon:"none"
    })
})

drawRect(Object)方法说明

drawSpecialText(Array)方法说明

general参数说明	参数名	默认值	类型	是否必填	说明
x		Number	是	文字x坐标
y		Number	是	文字y坐标

list参数说明

示例

await this.$refs.rCanvas.drawSpecialText({
    general:{
        x:20,
        y:480,
    },
    list:[
        {
            text:'￥',
            font_color:'red',
            font_size:15
        },
        {
            text:'5999',
            font_color:'red',
            font_size:24
        },
        {
            text:'+',
            font_color:'rgb(255, 101, 3)',
            font_size:24,
            margin_top:2,
        },
        {
            text:'9999',
            font_color:'rgb(165, 26, 251)',
            font_size:20
        },
        {
            text:'劵',
            font_color:'rgb(165, 26, 251)',
            font_size:15
        },
    ]
}).catch(err=>{
    uni.showToast({
        title:err,
        icon:'none'
    })
})

fillRoundRect(Object)方法说明

draw(Function)方法说明

saveImage(String)方法说明

保存图片到本地

clearCanvas()方法说明

清空画布绘制的所有内容

setCanvasWidth(Number)方法说明

设置画布宽度，建议在init函数设置画布宽度，init函数有canvas_width属性

例子：
this.$refs.rCanvas.setCanvasWidth(375)

setCanvasHeight(Number)方法说明

设置画布高度，建议在init函数设置画布高度，init函数有canvas_height属性

例子：
this.$refs.rCanvas.setCanvasHeight(500)

如果r-canvas没有你需要的函数，请反馈留言，也可以使用以下方式自行扩展canvas原生方法，谢谢理解

//ctx字段相当于原生canvas对象，可自行扩展canvas原生方法
this.$refs.rCanvas.ctx

学习交流微信