v-scrawl
v-scrawl
是一个vue版本的涂鸦板,目前测试可以使用的有pc
,h5
。
理论上在所有支持canvas
的浏览器中都可以使用
简介
没错,只有一个画布,所有的其他api全部都采用函数的方式调用,因为在实际的应用场景中 ,组件内的按钮跟配置项的ui,大概率也是跟项目内的UI图不匹配的,所以这里就 把所有的配置暴露出来,采用函数的方式调用,其他的需要比如设置画笔的颜色,大小等,则需要自己 再写一些组件,然后调用相应的api即可。
在线地址v-scrawl
演示完成如下图
不嫌弃的话点个star再走好吗
更新说明
详情查看版本更新说明wiki
插件安装
- 注意这个插件使用到了
sass
,所以项目内单独引入需要使用依赖,但是全局引入不需要
yarn install
- 局部使用
<template>
<div id="app" class="app_">
<div >
<v-scrawl
class="test"
ref="scrawl"
/>
</div>
</div>
</template>
import vScrawl from "v-scrawl/src/scrawl/v-scrawl"
export default {
name: 'App',
components: {
vScrawl
},
}
- 全局使用
import vScrawl from "v-scrawl"
Vue.use(vScrawl)
<template>
<v-scrawl
class="test"
ref="scrawl"
/>
</template>
api文档
常用功能
如果看完表格还有不明白,请查看下方的常用功能详细
功能 | 函数 | 参数 | 返回值 | 说明 |
---|---|---|---|---|
绘制开始 | drawStart | ---- | ---- | ---- |
绘制结束 | drawEnd | ---- | ---- | ---- |
绘制中 | drawing | ---- | ---- | ---- |
上一步 | this.$refs.child.handlePre | ---- | ---- | ---- |
下一步 | this.$refs.child.handleNext | ---- | ---- | ---- |
设置背景图片 | this.$refs.child.handleSetImg | url | ---- | 如果传入了url,则使用url对于的图片进行渲染 |
设置背景图片回调 | setImgCallback | ---- | ---- | ---- |
生成图片 | this.$refs.child.createImage | ---- | ---- | ---- |
生成图片回调 | createImgCallback | ---- | 图片的base64编码 | ---- |
设置画笔 | setWriteConfig | {shadowColor,strokeStyle,lineWidth,shadowBlur} | ---- | ---- |
清空画布 | this.$refs.scrawl.clearCanvas() | ---- | ---- | 清空画布会将所有的数据清除 |
暴露参数
参数 | 功能 |
---|---|
background | 背景颜色 |
常用功能详细
# drawStart
- 用法:
绘制开始时
<v-scrawl
@drawStart="drawStart"
/>
# drawEnd
- 用法:
绘制结束时
<v-scrawl
@drawEnd="drawEnd"
/>
# drawing
- 用法:
绘制中
<v-scrawl
@drawing="drawing"
/>
# handlePre
- 用法:
上一步
<v-scrawl
ref="scrawl"
/>
<script>
export default{
methods:{
handlePre(){
this.$refs.scrawl.handlePre()
},
}
}
</script>
# handleNext
- 用法:
下一步
<v-scrawl
ref="scrawl"
/>
<script>
export default{
methods:{
handleNext(){
this.$refs.scrawl.handleNext()
},
}
}
</script>
# handleSetImg
- 说明:如果添加了图片地址,则使用网络图片进行渲染
- 参数:{
url:线上图片地址
} - 用法:
设置背景图片
<v-scrawl
ref="scrawl"
/>
<script>
export default{
methods:{
handleSetImg(){
this.$refs.scrawl.handleSetImg()
this.$refs.scrawl.handleSetImg(url)
},
}
}
</script>
# setImgCallback
- 用法:
设置背景图片回调
<v-scrawl
ref="scrawl"
@setImgCallback='setImgCallback'
/>
# createImage
- 用法:
生成图片
<v-scrawl
ref="scrawl"
/>
<script>
export default{
methods:{
createImage(){
this.$refs.scrawl.createImage()
},
}
}
</script>
# createImgCallback
- 用法:
生成图片回调
<v-scrawl
@createImgCallback='createImgCallback'
/>
<script>
export default{
methods:{
createImgCallback(img){
console.log(img)
},
}
}
</script>
# setWriteConfig
-
参数:{
shadowColor:阴影颜色
strokeStyle:笔触颜色
lineWidth:画笔大小
shadowBlur:阴影迷糊}
-
用法:
设置画笔
<v-scrawl
ref="scrawl"
/>
<script>
export default{
methods:{
setWriteConfig(){
this.$refs.scrawl.setWriteConfig()
},
}
}
</script>
# clearCanvas
- 说明:此函数会清空所有记录,最好加个提示框
- 用法:
清空画布内容
<v-scrawl
ref="scrawl"
/>
<script>
export default{
methods:{
clearCanvas(){
this.$refs.scrawl.clearCanvas()
},
}
}
</script>