wx-canvas
基于mpvue的canvas绘图工具,用于快速还原设计稿,自适应保证不同手机下视觉效果一致(canvas宽度与屏幕比例与设计图中canvas和屏幕比例一致,如果高度不够则定高宽度等比缩放),基本用法就是,按照设计稿的画就行了。
使用方法
1. 使用npm下载并引用(推荐,我把编译版单独的仓库删了,太懒了...)
npm install wx-canvas --save
import {WxCanvas, Shape} from 'wx-canvas'
2. 下载wxCanvas文件,并在项目中引入
可以在这个仓库下的/src/utils/wxCanvas.js 下面找到
// 比如我放在了/src/utils/wxCanvas
import {WxCanvas, Shape} from '/src/utils/wxCanvas'
创建一个canvas标签,需要拖动的话要绑定三个触摸事件
<template>
<canvas canvas-id="canvas"
// 这里的canvasSize需要在data中预先定义,随便什么变量都ok
:style="{width: canvasSize.width + 'px', height: canvasSize.height + 'px'}"
@touchstart="handleTouchStart"
@touchmove='handleTouchMove'
@touchend='handleTouchEnd'
>
</canvas>
</template>
//methods中定义三个方法,并调用this.wxCanvas的相应方法
<script>
export default {
methods: {
handleTouchStart (e) {
this.wxCanvas.touchStart(e)
},
handleTouchMove (e) {
this.wxCanvas.touchMove(e)
},
touchend (e) {
this.wxCanvas.touchEnd(e)
}
}
}
</script>
需要一个变量接收计算过的宽高值,并动态设置canvas宽高
export default {
data () {
return {
wxCanvas: null,
canvasSize: {
width: null, // canvas真实宽,初始化时在wxCanvas对象上调用initCanvasInfo()获取
height: null // canvas真实高
}
}
},
传入配置参数,初始化wxCanvas对象
WxCanvas(canvas爸爸)
参数 |
类型 |
必填 |
说明 |
canvas |
Object |
是 |
canvas绘画上下文 |
config |
Object |
是 |
初始配置,设计图宽高,canvas宽高,具体如下代码 |
let ctx = wx.createCanvasContext('canvas', this)
this.wxCanvas = new WxCanvas(ctx, {
canvasWidth: 710, // 设计图canvas宽
canvasHeight: 940, // 设计图canvas高
uiWidth: 750, // 设计图屏幕宽
uiHeight: 1334 // 设计图屏幕高
})
//开始时务必调用一下initCanvasInfo()方法并把值赋给canvasSize(可自定义)
this.canvasSize = this.wxCanvas.initCanvasInfo()
WxCanvas方法:
saveImage() :保存canvas到相册
参数 |
类型 |
必填 |
说明 |
loadingText |
String |
否 |
loading时候的文字,不写默认没有loading |
successText |
String |
否 |
完成保存到相册时候的文字,不写默认没有提示 |
imagePreview |
Boolean |
否 |
是否在保存后预览图片,默认false |
callback |
Function |
否 |
完成绘画后的回调,返回canvas生成图片地址和是否成功保存到相册 |
this.wxCanvas.saveImage({loadingText: '保存中...', successText: '已保存到相册', imagePreview: true}, (imageUrl, isSaveSuccess) => {
console.log(imageUrl)
console.log(isSaveSuccess)
})
Shape对象
参数 |
类型 |
必填 |
说明 |
type |
String |
是 |
形状类型:rect,circle,roundRect,image,circleImage,text,line |
drawData |
Object |
是 |
形状参数,宽高,x,y,颜色,绘画方式之类的 |
dragable |
Boolean |
是 |
是否可拖动,默认false |
创建一个可拖动的矩形
let rect = new Shape('rect', {x: 100, y: 100, w: 100, h: 100, color: 'blue', fillMethod: 'fill'}, true)
将矩形显示到canvas上
this.wxCanvas.add(this.rect)
(此处应有图,然而并没有)
Shape对象方法
clone() :克隆形状
// 这样写就多了个和rect一样的双胞胎
let rect2 = rect.clone()
this.wxCanvas.add(this.rect2)
updateOption(): 更新属性
参数 |
类型 |
必填 |
说明 |
option |
Object |
是 |
要更新的属性 |
calcScale |
Boolean |
否 |
更新的属性是否按照设计图来,即是否需对更新的属性进行等比缩放 |
dragable |
Boolean |
否 |
是否可拖动,要定义此属性需要定义calcScale,反正就是这个东西得是,第三个参数 |
// 这样rect2就变红了,并且上下左右居中
rect2.updateOption({color: 'red, locX: 'center', locY: 'center'})
bind(): 绑定事件(现在只有点击事件可以绑定,而且没有取消的,嘻嘻)
参数 |
类型 |
必填 |
说明 |
type |
String |
是 |
事件类型(只有点击类型) click |
method |
Object |
是 |
回调函数 |
bind(): 绑定事件(现在只有点击事件可以绑定,而且没有取消的,嘻嘻)
参数 |
类型 |
必填 |
说明 |
type |
String |
是 |
事件类型(只有点击类型) click |
method |
Object |
是 |
回调函数 |
未完善的充满bug的功能
animate():增加动画
参数 |
类型 |
必填 |
说明 |
option |
Object |
是 |
现在只支持x, y, r, w, h, color的动画,而且不能自适应缩放- -只能px为单位。两种写法:'+10', '-10'or 10。增加10或者到10位置这样子。颜色支持rgb,rgba,16进制表示,支持小程序官网的预定义颜色 |
duration |
Number |
是 |
持续时间 |
start():开始动画
参数 |
类型 |
必填 |
说明 |
loopTime |
Number |
否 |
循环次数,true为无限循环,默认1次 |
calcScale |
Boolean |
是 |
是否按设计图缩放(未来可能的参数,现在不存在的) |
// 效果就是先向右向下位移100,然后回到原位,然后循环两次,自行脑补...
rect.animate({x: '+100', y: '+100'}, 1000).animate({x: 100,y: 100}, 1000).start(2)
各种图形
注:若方向不填则默认X,y的默认值,left,right,loc等优先级高于x,y
Circle: 圆
参数 |
类型 |
必填 |
说明 |
fillMethod |
String |
是 |
'fill' or 'stroke', 默认fill |
color |
String |
是 |
各种色值 |
x |
Number |
否 |
默认0 |
y |
Number |
否 |
默认0 |
r |
Number |
是 |
10 |
left |
Number, String |
否 |
canvas左边界到图形左边距离,可选值:数字,百分比 |
right |
Number, String |
否 |
同上,方向换一换 |
top |
Number, String |
否 |
同上,方向换一换 |
bottom |
Number, String |
否 |
同上,方向换一换 |
locX |
Number, String |
否 |
图形中点到左边距离,可选值:数字,百分比, 'center'(居中,即50%)。 |
locY |
Number, String |
否 |
图形中点到上边距离,可选值:数字,百分比, 'center'(居中,即50%)。 |
// 圆
let circle = new Shape('circle', {locX: 50%, y: 100, r: 10, fillMethod: 'fill', color: 'red'})
CircleImage: 圆形图片,放个头像啥的**(模拟器图片可能会超出圆,真机没问题)
参数 |
类型 |
必填 |
说明 |
url |
String |
是 |
图片路径 |
imgH |
Number |
否 |
图片高 |
imgW |
Number |
否 |
图片宽 |
x |
Number |
否 |
默认0 |
y |
Number |
否 |
默认0 |
r |
Number |
是 |
10 |
left |
Number, String |
否 |
canvas左边界到图形左边距离,可选值:数字,百分比 |
right |
Number, String |
否 |
同上,方向换一换 |
top |
Number, String |
否 |
同上,方向换一换 |
bottom |
Number, String |
否 |
同上,方向换一换 |
locX |
Number, String |
否 |
图形中点到左边距离,可选值:数字,百分比, 'center'(居中,即50%)。 |
locY |
Number, String |
否 |
图形中点到上边距离,可选值:数字,百分比, 'center'(居中,即50%)。 |
// 圆形图片
let circleImage = new Shape('circleImage', {locX: 50%, y: 100, r: 10, url: 'XXX/XXX.png'})
Rect: 矩形
参数 |
类型 |
必填 |
说明 |
fillMethod |
String |
是 |
'fill' or 'stroke', 默认fill |
color |
String |
是 |
各种色值 |
x |
Number |
否 |
默认0 |
y |
Number |
否 |
默认0 |
w |
Number |
是 |
宽 |
h |
Number |
是 |
高 |
left |
Number, String |
否 |
canvas左边界到图形左边距离,可选值:数字,百分比 |
right |
Number, String |
否 |
同上,方向换一换 |
top |
Number, String |
否 |
同上,方向换一换 |
bottom |
Number, String |
否 |
同上,方向换一换 |
locX |
Number, String |
否 |
图形中点到左边距离,可选值:数字,百分比, 'center'(居中,即50%)。 |
locY |
Number, String |
否 |
图形中点到上边距离,可选值:数字,百分比, 'center'(居中,即50%)。 |
// 矩形
let rect = new Shape('rect', {locX: 50%, y: 100, w: 10, h: 10, fillMethod: 'fill', color: 'blue'})
RoundRect: 圆角矩形
参数 |
类型 |
必填 |
说明 |
fillMethod |
String |
是 |
'fill' or 'stroke', 默认fill |
color |
String |
是 |
各种色值 |
x |
Number |
否 |
默认0 |
y |
Number |
否 |
默认0 |
w |
Number |
是 |
宽 |
h |
Number |
是 |
高 |
r |
Number |
否 |
圆角弧度 默认0 |
left |
Number, String |
否 |
canvas左边界到图形左边距离,可选值:数字,百分比 |
right |
Number, String |
否 |
同上,方向换一换 |
top |
Number, String |
否 |
同上,方向换一换 |
bottom |
Number, String |
否 |
同上,方向换一换 |
locX |
Number, String |
否 |
图形中点到左边距离,可选值:数字,百分比, 'center'(居中,即50%)。 |
locY |
Number, String |
否 |
图形中点到上边距离,可选值:数字,百分比, 'center'(居中,即50%)。 |
// 圆角矩形
let roundRect = new Shape('roundRect', {locX: 50%, y: 100, w: 50, h: 50, r: 10, fillMethod: 'fill', color: 'blue'})
Image: 图片
参数 |
类型 |
必填 |
说明 |
url |
String |
是 |
图片路径 |
imgH |
Number |
否 |
原图片高 |
imgW |
Number |
否 |
原图片宽 |
x |
Number |
否 |
默认0 |
y |
Number |
否 |
默认0 |
w |
Number |
是 |
绘画图片宽度 |
h |
Number |
是 |
绘画图片高度 |
left |
Number, String |
否 |
canvas左边界到图形左边距离,可选值:数字,百分比 |
right |
Number, String |
否 |
同上,方向换一换 |
top |
Number, String |
否 |
同上,方向换一换 |
bottom |
Number, String |
否 |
同上,方向换一换 |
locX |
Number, String |
否 |
图形中点到左边距离,可选值:数字,百分比, 'center'(居中,即50%)。 |
locY |
Number, String |
否 |
图形中点到上边距离,可选值:数字,百分比, 'center'(居中,即50%)。 |
// 图片
let image = new Shape('image', {locX: 50%, y: 100, w: 50, h: 50, url: 'XXX/XXX.png'})
Text: 文字
参数 |
类型 |
必填 |
说明 |
fillMethod |
String |
是 |
'fill' or 'stroke', 默认fill |
text |
String |
是 |
文字内容 |
align |
String |
否 |
对齐方式,可选值:'left', 'center', 'right'。默认'left' |
fontSize |
Number |
否 |
文字大小, 默认14 |
family |
String |
否 |
字体,默认san-serlf |
color |
String |
否 |
文字颜色 |
x |
Number |
否 |
默认0 |
y |
Number |
否 |
默认0 |
h |
Number |
是 |
设计图文字高度,用于计算位置= =算出来不是很准 |
left |
Number, String |
否 |
canvas左边界到图形左边距离,可选值:数字,百分比 |
right |
Number, String |
否 |
同上,方向换一换 |
top |
Number, String |
否 |
同上,方向换一换 |
bottom |
Number, String |
否 |
同上,方向换一换 |
locX |
Number, String |
否 |
图形中点到左边距离,可选值:数字,百分比, 'center'(居中,即50%)。 |
locY |
Number, String |
否 |
图形中点到上边距离,可选值:数字,百分比, 'center'(居中,即50%)。 |
// 文字, 注意h必填
let text = new Shape('text', {text: '嘿嘿嘿', locX: 50%, y: 100, h: 30, fillMethod: 'fill', color: '#000'})
Line: 线条(不支持动画,拖动)
参数 |
类型 |
必填 |
说明 |
fillMethod |
String |
是 |
'fill' or 'stroke', 默认fill |
color |
String |
否 |
文字颜色 |
x1 |
Number |
是 |
默认0, 第一个坐标点x坐标 |
y1 |
Number |
是 |
默认0, 第一个坐标点y坐标 |
x2 |
Number |
是 |
默认0, 第二个坐标点x坐标 |
y2 |
Number |
是 |
默认0, 第二个坐标点y坐标 |
w |
Number |
否 |
线段粗细, 默认1 |
// 图片
let line = new Shape('line', {x:0, y: 0, x2: 100, y2: 100, w: 3, fillMethod: 'fill', color: '#000'})
感谢dalao的源码,虽然并看不懂,但是还是给了很多帮助,地址在右边 这是地址
Over , 一起来玩bug吧 !