海报生成，随心所欲绘制样式，原生canvas方法的二次封装，自定义函数，持续更新

2023-07-06 02:25| 来源: 网络整理| 查看: 265

更新记录 1.3.1（2021-09-10）

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

1.3.0（2021-07-01）

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

查看更多平台兼容性 Vue2 Vue3 √ × App 快应用微信小程序支付宝小程序百度小程序字节小程序 QQ小程序 app-vue × √ × × × × 钉钉小程序快手小程序飞书小程序京东小程序 × × × × H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari × √ √ √ √ × × × × r-canvas简介

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

r-canvas模板列表(码云)

r-canvas-example

r-canvas兼容性

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

平台是否可用 iOS √ Android √ H5或Web √ 微信小程序 √ 支付宝小程序待测试百度小程序待测试字节跳动小程序待测试 QQ小程序待测试快应用待测试 360小程序待测试使用方式

在template中引入组件

在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方法说明方法名称参数类型说明 init Object 初始化canvas setCanvasWidth Number 设置canvas宽度 setCanvasHeight Number 设置canvas高度 drawImage Object 画图 drawText Object 画文字 drawRect Object 画正方图形 drawSpecialText Array 画多样性文字 fillRoundRect Object 画圆角矩形 clearCanvas 清空画布绘制的所有内容 draw Function 生成海报 saveImage String 保存海报

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

init(Object)方法说明参数名默认值类型是否必填说明 canvas_id String 是 id唯一 scale 1 Number 否缩放倍数，整数数值越大，清晰度越高，图片内存越大 global_alpha 1 Number 否只支持0-1之间的小数，设置生成图片的整体透明度，例如：0.5 canvas_width uni.getSystemInfoSync().windowWidth Number 否画布宽度，默认设备屏幕宽度 canvas_height uni.getSystemInfoSync().windowHeight Number 否画布高度，默认设备屏幕高度 background_color #ffffff String 否画布颜色 hidden false Boolean 否是否隐藏画布不呈现在页面上

drawImage(Object)方法说明参数名默认值类型是否必填说明 url String 是支持本地图片、网络路径（需支持跨域）、baes64 x Number 是图片横坐标 y Number 是图片纵坐标 w Number 是图片宽度 h Number 是图片高度 border_width Number 否边框大小 border_color String 否边框颜色 is_radius false Boolean 否是否开启圆图(已废弃，请使用border_radius) border_radius 0 Number 否圆角弧度，例：图片宽高20，想要实现圆图，请设置border_radius:10（宽或高的一半）

drawText(Object)方法说明参数名默认值类型是否必填说明 text String 是文字内容 x Number 是文字横坐标 y Number 是文字纵坐标 font_color #000 String 否文字颜色 font_size 20 Number 否文字大小 font_family Arial String 否文字字体 text_align left String 否文字对齐方式left:居左center:居中right:居右 max_width Number 否文字到达最大宽度，会自动换行 line_height 20 Number 否文字行高，设置max_width属性才能生效 line_clamp Number 否支持最大行数，设置max_width属性才能生效 line_clamp_hint ... String 否超过line_clamp设置的行数则显示省略标识 line_through_height 0 Number 否设置中划线高度，设置值即生效 line_through_color white String 否中划线颜色 line_through_cap butt String 否中划线左右两端类型butt：默认round：圆边square：四方形边 font_style normal String 否规定字体样式normal：默认italic：斜体的字体样式oblique：倾斜的字体样式 font_variant normal String 否规定字体变体normal：默认small-caps：小型大写字母的字体 font_weight normal String 否规定字体的粗细normal：默认boldbolderlighter100200300400500600700800900 is_line_break false Boolean 否是否开启识别换行符自动换行 drawText(Object).then回调参数名类型说明 draw_x Number 返回绘制的起始坐标x draw_y Number 返回绘制的起始坐标y draw_width Number 绘制的整体最大宽度 draw_height Number 绘制的整体最大高度示例 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)方法说明参数名默认值类型是否必填说明 x Number 是图形横坐标 y Number 是图形纵坐标 w Number 是图形宽度 h Number 是图形高度 color String 否图形颜色 border_width 0 Number 否边框大小 border_color black String 否边框颜色

drawSpecialText(Array)方法说明 general参数说明参数名默认值类型是否必填说明 x Number 是文字x坐标 y Number 是文字y坐标

list参数说明

参数名默认值类型是否必填说明 text String 是文字内容 x Number 是文字横坐标(系统只取数组下标为0的数据,只设置数组为0的x值即可) y Number 是文字纵坐标(系统只取数组下标为0的数据,只设置数组为0的y值即可) font_color #000 String 否文字颜色 font_size 20 Number 否文字大小 font_family Arial String 否文字字体

示例

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)方法说明参数名默认值类型是否必填说明 x Number 是矩形横坐标 y Number 是矩形纵坐标 w Number 是矩形宽度 h Number 是矩形高度 radius Number 是矩形圆角弧度 fill_color String 是矩形颜色

draw(Function)方法说明参数名默认值类型是否必填说明 callback Function 否成功回调，也可以用.then获取成功回调

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

学习交流微信

交流微信

【本文地址】

公司简介

联系我们