v-scrawl
v-scrawl是一个vue版本的涂鸦板，目前测试可以使用的有pc,h5。
理论上在所有支持canvas的浏览器中都可以使用
简介
在线地址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>
