private init () {
this.canvas = new fabric.Canvas(this.$refs.canvas, {
// isDrawingMode: this.editable, }); this.canvas.on('mouse:down', this.mouseDown); this.canvas.on('mouse:move', this.mouseMove); this.canvas.on('mouse:up', this.mouseUp); this.canvas.on('mouse:dblclick', this.onPolygonDrawEnd); this.canvas.on('selection:updated', e => {
this.edit(e.target); }); this.canvas.on('selection:created', e => {
this.edit(e.target); }); this.canvas.on('object:modified', this.onChange); this.canvas.on('object:moving', this.mouseMoving); // 阻止对象移动到画布外面 } private mounted () {
this.init(); } - 获得画布上的所有对象：
let itemList = this.canvas.getObjects(); - 禁止元素移动但是响应单击事件
{lockMovementX: true, lockMovementY: true} - 禁止元素缩放,依然显示点
依然显示点：{lockScalingX: true,lockScalingY:true}
不显示点：{hasControls:false} - 常用的设置
selectable:false, //禁止选中当前元素
hasBorders: false, //不显示选中时的边
hasControls:false, //不显示控制的那9个按钮 - 层级
bringToFrontI() 移至顶层
sendToBack() 移至底层
bringForward(). 上移一层
sendBackwards下移一层
moveTo() 自定义层级
https://blog.csdn.net/weixin_/article/details/
对象常用属性
| 属性 | 作用 |
|---|---|
| left | 横坐标 |
| top | 纵坐标 |
| width | 宽度 |
| height | 高度 |
| originX | 对象转换的水平原点(‘left’，’right’，’center’) |
| originY | 对象转换的垂直原点(‘left’，’right’，’center’) |
| angle | 偏转角度 |
| snapAngle | 设置对象在旋转时锁定的角度。比如设置值为45则对象在旋转时只能以45度为一个单位 |
| fill | 对象的填充色 |
| backgroundColor | 对象的背景色 |
| hasControls | 值为false时无法对对象进行旋转和拉伸 |
| selectable | 对象是否可选中，false时无法选中 |
| lockRotation | true时无法旋转对象 |
| lockMovementX | true时对象无法水平移动 |
| lockScalingX | true时对象无法水平缩放 |
| lockMovementY | true时对象无法垂直移动 |
| lockScalingY | true时对象无法垂直缩放 |
| scaleX | 水平方向缩放倍数 |
| scaleY | 垂直方向缩放倍数 |
| stroke | 线颜色 |
| strokeWidth | 字体 |
| fontSize | 字号 |
| type | 标记对象类型 |
对象常用方法
| 方法 | 作用 |
|---|---|
| object.set() | 设置对象属性，如rect.set({top: 50,left:100}) |
| object.scale() | 缩放对象 |
| object.rotate() | 旋转对象 |
| object.getBoundingRect() | 返回对象的边界矩形（左，顶部，宽度，高度）的坐标 |
| object.setCoords() | 当对象修改了坐标、长宽、缩放、角度、倾斜程度等可能改变对象位置的属性时需要通过该方法重新计算位置 |
| object.intersectsWithObject(other) | 检查对象是否与另一个对象相交 |
画布方法
| 方法 | 作用 |
|---|---|
| canvas.setActiveObject(obj) | 将给定对象设置为画布上唯一的活动对象 |
| canvas.getObjects() | 获取画布上的所有实例对象 |
| canvas.add(obj) | 添加实例对象 |
| canvas.remove(obj) | 移除对象 |
| canvas.renderAll() | 重新渲染画布 |
| canvas.sendToBack(o) | 将对象或多个选择的对象移动到绘制对象堆栈的底部 |
| canvas.discardActiveObject() | 丢弃当前的活动对象 |
| canvas.clear() | 清除实例的所有上下文 |
| canvas.dispose() | 清除canvas元素并删除所有事件侦听器 |
| canvas.backgroundColor | 设置画布背景色 |
https://blog.csdn.net/daicooper/article/details/
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/210743.html原文链接：https://javaforall.net
