更新记录
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
查看更多
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
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中引入组件
<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方法说明
方法名称 |
参数类型 |
说明 |
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
学习交流微信
![交流微信](http://www.xvue.cn/rohlin-wechat-ercode.png)