基于mpvue的canvas绘图工具,用于快速还原设计稿,自适应保证不同手机下视觉效果一致(canvas宽度与屏幕比例与设计图中canvas和屏幕比例一致,如果高度不够则定高宽度等比缩放),基本用法就是,按照设计稿的画就行了。
文件github地址 也可以在这个仓库下的/src/utils/wxCanvas.js 下面找到 (最好还是,去网址下载- -谁知道是是不是一个版本呢)
// 比如我放在了/src/utils/wxCanvas
import {WxCanvas, Shape} from '/src/utils/wxCanvas'
npm install -save
import {WxCanvas, Shape} from 'wx-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>
export default {
data () {
return {
wxCanvas: null,
canvasSize: {
width: null, // canvas真实宽,初始化时在wxCanvas对象上调用initCanvasInfo()获取
height: null // 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()
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
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)
(此处应有图,然而并没有)
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
无 | 无 | 无 | 无 |
// 这样写就多了个和rect一样的双胞胎
let rect2 = rect.clone()
this.wxCanvas.add(this.rect2)
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
option | Object | 是 | 要更新的属性 |
calcScale | Boolean | 否 | 更新的属性是否按照设计图来,即是否需对更新的属性进行等比缩放 |
dragable | Boolean | 否 | 是否可拖动,要定义此属性需要定义calcScale,反正就是这个东西得是,第三个参数 |
// 这样rect2就变红了,并且上下左右居中
rect2.updateOption({color: 'red, locX: 'center', locY: 'center'})
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
type | String | 是 | 事件类型(只有点击类型) click |
method | Object | 是 | 回调函数 |
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
type | String | 是 | 事件类型(只有点击类型) click |
method | Object | 是 | 回调函数 |
未完善的充满bug的功能 |
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
option | Object | 是 | 现在只支持x, y, r, w, h, color的动画,而且不能自适应缩放- -只能px为单位。两种写法:'+10', '-10'or 10。增加10或者到10位置这样子。颜色支持rgb,rgba,16进制表示,支持小程序官网的预定义颜色 |
duration | Number | 是 | 持续时间 |
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
loopTime | Number | 否 | 循环次数,true为无限循环,默认1次 |
calcScale | Boolean | 是 | 是否按设计图缩放(未来可能的参数,现在不存在的) |
// 效果就是先向右向下位移100,然后回到原位,然后循环两次,自行脑补...
rect.animate({x: '+100', y: '+100'}, 1000).animate({x: 100,y: 100}, 1000).start(2)
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
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({locX: 50%, y: 100, r: 10, fillMethod: 'fill', color: 'red'})
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
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({locX: 50%, y: 100, r: 10, url: 'XXX/XXX.png'})
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
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({locX: 50%, y: 100, w: 10, h: 10, fillMethod: 'fill', color: 'blue'})
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
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({locX: 50%, y: 100, w: 50, h: 50, r: 10, fillMethod: 'fill', color: 'blue'})
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
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({locX: 50%, y: 100, w: 50, h: 50, url: 'XXX/XXX.png'})
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
fillMethod | String | 是 | 'fill' or 'stroke', 默认fill |
text | String | 是 | 文字内容 |
align | String | 否 | 对齐方式,可选值:'left', 'center', 'right'。默认'left' |
fontSize | Number | 否 | 文字大小, 默认14 |
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%)。 |
// 文字
let text = new Shape({text: '嘿嘿嘿', locX: 50%, y: 100, h: 30, fillMethod: 'fill', color: '#000'})
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
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({x:0, y: 0, x2: 100, y2: 100, w: 3, fillMethod: 'fill', color: '#000'})
感谢dalao的源码,虽然并看不懂,但是还是给了很多帮助,地址在右边 这是地址