Skip to content

基于mpvue的小程序canvas库,用于快速还原设计稿,自适应保证不同手机下视觉效果一致

Notifications You must be signed in to change notification settings

hunmix/wxCanvas

Repository files navigation

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吧 !

About

基于mpvue的小程序canvas库,用于快速还原设计稿,自适应保证不同手机下视觉效果一致

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published