我要评论
前言
上两篇文章已经可以在画布上绘制基础的图形了，但是比较死板，没有其它的设置，如对画布的设置，对已经画好的对象的操作等，本篇文章还是，会针对这些问题，对这个项目进行完善
提示：以下是本篇文章正文内容，下面案例可供参考
一、画布的放大缩小
在选择按钮下面，通过滚动滚轮，实现画布的放大和缩小
// 监听鼠标滚轮缩放事件
'mouse:wheel': opt => {
const delta = opt.e.deltay // 滚轮，向上滚一下是 -100，向下滚一下是 100
let zoom = this.canvas.getzoom() // 获取画布当前缩放值
zoom *= 0.999 ** delta
if (zoom > 20) zoom = 20 // 限制最大缩放级别
if (zoom < 0.01) zoom = 0.01 // 限制最小缩放级别
// 以鼠标所在位置为原点缩放
this.canvas.zoomtopoint(
{ // 关键点
x: opt.e.offsetx,
y: opt.e.offsety
},
zoom // 传入修改后的缩放级别
)
},
效果如下：
二、画布的平移
在选择按钮下面，通过按住ctrl按键，鼠标左键按下，实现画布的移动
当鼠标按下的时候：
// 是否按住alt，可以拖拽画布
if (evt.altkey === true) {
this.isdragging = true // isdragging 是自定义的，开启移动状态
this.lastposx = evt.clientx
this.lastposy = evt.clienty
}
当鼠标移动的时候：
// 鼠标移动，移动画布
if (this.isdragging) {
let e = opt.e;
let vpt = this.canvas.viewporttransform;
vpt[4] += e.clientx - this.lastposx
vpt[5] += e.clienty - this.lastposy
this.canvas.requestrenderall()
this.lastposx = e.clientx
this.lastposy = e.clienty
}
当鼠标抬起的时候：
// 关闭画布移动
this.isdragging = false
效果如下：
三、删除元素
通过选中元素，点击delete按钮，可直接删除
选中元素
//选中画布
'selection:cleared': opt => {
this.flagup = false
},
//更换选中对象
'selection:updated': opt => {
this.flagup = opt
},
//选中对象
'selection:created': opt => {
this.flagup = opt
}
监听键盘，删除选中的元素、对象
//监听键盘事件
document.addeventlistener('keyup', e => {
//当按下delete删除选中的对象
if (this.flagup && e.key === 'delete') {
//判断文字是否在编辑状态
if (this.flagup.selected[0].isediting === true) return
this.flagup.selected.foreach(item => {
this.canvas.remove(item)
})
//抛弃当前处于活动状态的object
this.canvas.discardactiveobject()
this.flagup = false
}
})
效果如下：
四、画布的放大缩小
在选择按钮下面，通过按住ctrl按键，然后滚动滚轮，或者直接滚动滚轮，实现画布的放大和缩小
import numpy as np
五、画布的上一步、下一步
在进行删除等操作之后，可以通过上一步、下一步等操作恢复、撤销恢复画布中的对象
首先先把画面布局修改一下
<!-- 操作按钮 -->
<el-row @change="operationclickevent">
<el-button size="small" v-for="item in operationmenubarfun" :key="item.id" @click="operationclickevent(item.name)" :title="item.title">{{ item.title }}</el-button>
</el-row>
然后根据operationclickevent方法，实现上一步和下一步
case 'back':
//需要将每次绘画的对象存在一个栈中，对栈顶的元素进行删除操作
if (this.backstack.length == 0) return
//要删除的对象
let backobj = this.backstack[this.backstack.length - 1]
this.canvas.remove(backobj)
//将删除的元素存到删除栈中
this.nextstack.push(backobj)
//更改栈的长度
this.backstack.length = this.backstack.length - 1
this.canvas.requestrenderall()
break
case 'next':
//将删除的元素在压入栈顶
if (this.nextstack.length == 0) return
//将最后元素添加在画布中
let nextobj = this.nextstack[this.nextstack.length - 1]
this.canvas.add(nextobj)
//将刚刚元素加入到back栈中
this.backstack.push(nextobj)
//改变栈的长度
this.nextstack.length = this.nextstack.length - 1
this.canvas.requestrenderall()
break
//获取当前画布的宽和高
this.form = {
setwidth: this.canvas.getwidth(),
setheight: this.canvas.getheight()
}
//显示设置
this.dialogformvisible = true
this.canvas.requestrenderall()
break
效果如下：
六、对象的属性修改
1.修改属性
代码如下（示例）：
<span class="top1">宽度：</span>
<div><el-input v-model="borderwidth" @change="borderwidthchange" placeholder="请输入内容" size="small"></el-input></div>
<span class="top1">边框颜色：</span>
<div><el-color-picker v-model="bordercolor" @change="bordercolorchange" size="small"></el-color-picker></div>
//全局属性设置
borderwidthchange(value){
this.borderwidth=value
},
bordercolorchange(value){
this.bordercolor=value
},
效果如下：
总结
关于vue2+fabric.js库的使用就介绍到这里，后续可根据这个再自己进行优化，叠加功能
发表评论