fabric.js 在vue中的使用

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/ （官方文档的一个变相翻译，可以作为参考，里面还是有一些，看官方文档，容易忽略的内容，特别是英语不好的，而且里面有视频，也算是入门的一个方法）