当前位置: 首页 > 工具软件 > Fabric.js > 使用案例 >

fabric.js 在vue中的使用

庄星汉
2023-12-01

Fabric.js 用法总结

(在vue中使用时,因为this的指向不同,所以在Fabric.js方法内部,this是无法使用指向外部的值的)

 

这只是我在使用fabric.js的过程中的一些总结,文章底部有一个fabric入门的链接,新手入门可以先看一下,适合新手


1.

canvas.setBackgroundImage(require('../assets/logo.png'), canvas.renderAll.bind(canvas), {

    scaleY: 3,

    scaleX: 3

})

setBackgroundImage设置背景图片

scaleY,scaleX 设置图片的缩放比例

renderAll() 重新绘制,一般搭配clear()

 

2. var staticCanvas = new fabric.StaticCanvas('c');

创建无交互效果的canvas(和canvas效果一样)

 

3. var canvas = new fabric.Canvas('c');

创建有交互效果的canvascanvas.selection = false; // disable group selection

canvas无法被选中,也就是没有交互效果rect.set('selectable', false); // make object unselectable

设置其中的一个模块没有交互效果

设置多个对象无法选中(不可直接设置canvas.selection = false,是无效的,需要循环设置每个对象的selectable)

for (var i = 0; i < this.camerasIndex; i++) {

         this.fabricCanvas.item(i).selectable = false

}

4.移除event事件(off()方法),添加event事件(on()方法)

canvas.off('mouse:down')

canvas.on('mouse:down')

 

5. 对canvas添加了事件之后,也就是on方法之后,判定是否点中 object方法是

options.target

canvas.on('mouse:down', function (options) {

// 如果未选中对象,则继续创建,否则不再创建对象

    if (options.target === null) {

        var rect2 = new Fabric.fabric.Rect({

            width: 100,

            height: 100,

            left: 350,

            top: 250,

           fill: 'rgba(0,200,0,0.5)'

        })
    
        canvas.add(rect2)
    }

})

 

6.‘‘lockMovementX”,“lockMovementY”,“lockRotation”,“lockScalingX”,“lockScalingY”是锁定相应对象操作的属性。object.lockMovementX=true 防止对象被水平移动,但仍然可以垂直移动。

lockRotation 设置旋转

lockScalingX/ lockScalingY- 设置缩放

 

7.“hasControls”和“hasBorders”属性来控制对象的边框和顶点的可见性。只需设置它们为false并立即渲染“裸体”对象。

object.hasBorders = false; // 边框消失

object.hasControls = false; //顶点消失

 

8. 还可以通过调整“borderColor”,“cornerColor”和“cornerSize”属性来更改其外观。

object.set({ borderColor:'red', cornerColor:'green', cornerSize:6});

 

9. fabric.js和js一样是可以继承父类的

 

10.在fabric事件中无法获取外部变量时,转换变量即可

例:在Vue中,因为作用域的不同,this的指向也是不同的,所以无法获取this.value,只需要在事件外,把this转换掉即可

var gpoint = this

canvas.on('mouse:down', function (options) {

    console.log(gpoint.addModel)

}

 

11 . 设置canvas 的宽高

setHeight() 和 setWidth()

 

12. 对同一个canvas ID 进行多次获取,虽然获取的是同一个ID,但是会被判定重新实现,

所以必须获取一次,然后设置成全局变量,在其他地方,直接调用,不要重新获取

 

13. Fabric.js 的事件总结

1. mouse:down", "mouse:move", "mouse:up" 鼠标事件,分别是鼠标点击,鼠标移动,鼠标抬起

使用方法:canvas.on('mouse:down', function () {}) 后面的function是触发方法执行的内容

2. "object:modified", "object:selected", "object:moving", "object:scaling", "object:rotating", "object:added", and "object:removed"

对象事件,分别是对象的修改,选中,移动,伸缩,旋转,添加,删除

使用方法:canvas.on('object:selected', function () {}) 或者直接使用对象 object.on('selected', function () {}) object是添加的对象

例如:

fabricCanvas = this.__canvas = new Fabric.fabric.Canvas('myCanvas')

var rect = new Fabric.fabric.Rect({

    width: cameraAreaWidth,

    height: cameraAreaHeight,

    left: fabricThis.canvasX,

    top: fabricThis.canvasY,

    fill: 'rgba(102, 179, 255, 0.5)'
    
})

rect.on('selected', function () {})

14. 注意fabric.js的闭包问题,可以把for循环移至事件内部

15. 在vue 中,Image.fromURL() 方法绘制图片时,设置宽高,发布之后,图片宽高并未被等比缩放

fabric.Image.fromURL('my_image.png', function(oImg) { canvas.add(oImg);});

可以尝试fabric.Image() 的方法(并未确定是否可行,只是提供一个思路)

先在外部创建一个img,并设置好宽高,然后绘制,(注意,对于先创建img的问题,创建img 后的所有操作,都应在img加载完成后执行,否则无法获取到img)

var img = new Image()

// 初始化摄像头图标宽高

var cameraWidth = 25

// 摄像头图标初始化

var imgSrc = require('../../../../assets/images/camera.png')

img.src = imgSrc

img.style.width = cameraWidth + 'px'

img.style.height = cameraWidth + 'px'

// 监听img是否加载完毕,加载完毕后执行

img.addEventListener('load', function () {

    var img1 = new Fabric.fabric.Image(img, {

        left: fabricThis.canvasX - cameraWidth / 2,

        top: fabricThis.canvasY - cameraWidth / 2,

        width: cameraWidth,

        height: cameraWidth

    })
})

16.绘制完毕,需要绘制JSON.stringify(canvas)保存的信息,

调用canvas.loadFromJSON()方法即可,但是绘制出来的图像,仅是根据坐标大小绘制出的,并不是对象,

所以不存在添加事件。

如果想添加事件,需要根据JSON.stringify(canvas)里的数据重新组装成对象,然后重新绘制,

如果你向数据里添加了自己定义的字段,每次clear() 之后都需要重新添加一次,

也就是每次保存时,都需要把你需要的字段保存

17.扩展自己需要的信息

fabricGroup.toObject = (function (toObject) {

    return function () {

        return Fabric.fabric.util.object.extend(toObject.call(this), {

            id: this.id,

            cameraName: this.cameraName,

            cameraAddress:this.cameraAddress,

            switchStatus: this.switchStatus,

            inOutFlg: this.inOutFlg

        })

    }

})(fabricGroup.toObject)



gPoint.fabricCanvas.add(fabricGroup)

// 修改对象的 ID

fabricGroup.id = gPoint.formattedJson.objects[i].id

// 初始化上次保存的camera 的 name, address,switchStatus,inOutFlg

fabricGroup.cameraName = gPoint.formattedJson.objects[i].cameraName

fabricGroup.cameraAddress = gPoint.formattedJson.objects[i].cameraAddress

fabricGroup.switchStatus = gPoint.formattedJson.objects[i].switchStatus

fabricGroup.inOutFlg = gPoint.formattedJson.objects[i].inOutFlg

 

18. 对象选中时的样式设置为空

canvas.item(0).hasControls = canvas.item(0).hasBorders = false

 

19. 设置对象横纵方向不可移动

canvas.item(0).lockMovementX = true // 横向不可移动

canvas.item(0).lockMovementY = true // 纵向不可移动

 

19.把对象集合成一个组,对象的坐标是相对于组的中心点来计算的

例如:group 的 宽高为100px

那左上角的坐标为(-50,-50),右上角(50,-50)

左下角(-50,50),右下角(50,50)

其他坐标都可根据宽度计算出来

 

参考:http://jspang.com/2017/01/11/fabricjsbasic/ (官方文档的一个变相翻译,可以作为参考,里面还是有一些,看官方文档,容易忽略的内容,特别是英语不好的,而且里面有视频,也算是入门的一个方法)

 

 

 类似资料: