fabricjs相关方法知识点

fabricjs相关方法知识点

1: 获得画布上的所有对象：

var items = canvas.getObjects();

2: 设置画布上的某个对象为活动对象。

canvas.setActiveObject(items[i]);

3：获得画布上的活动对象

canvas.getActiveObject()；

4：取消画布中的所有对象的选中状态。

canvas.discardActiveObject(); // 如果这样不生效，可以使用 canvas.discardActiveObject().renderAll();

5: 设置画布中的对象的某个属性值，比如第 0 个对象的 id

var items = canvas.getObjects();
tems[0].id ="items_id0" 或 items[0].set("id","items_id0")

6：获得画布中对象的某个属性，比如 第0 个对象的 id

var items = canvas.getObjects();
items[0].id;
或
items[0].get("id");

7: 重新渲染一遍画布，当画布中的对象有变更，在最后显示的时候，需要执行一次该操作

canvas.renderAll()；

8: 清除画布中所有对象：

canvas.clear();

9:清除画布中的活动对象：

var t = canvas.getActiveObject();
t && canvas.remove(t);

10: 设置活动对象在画布中的层级

var t = canvas.getActiveObject();
canvas.sendBackwards(t) //向下跳一层
canvas.sendToBack(t) //向下跳底层：
canvas.bringForward(t) //向上跳一层：
canvas.bringToFront(t) //向上跳顶层：
或者：
t.sendBackwards();
t.sendToBack();
t.bringForward();
t.bringToFront();

11：加载图片时图片缩放到指定的大小。

fabric.Image.fromURL(image_src, function(oImg) {
    oImg.set({
        left:tmp_left,
        top:tmp_top,
        centeredScaling:true,
        cornerSize: 7,
        cornerColor: "#9cb8ee",
        transparentCorners: false,
    });
    oImg.scaleToWidth(image_width);
    oImg.scaleToHeight(image_height);
    canvas.add(oImg).setActiveObject(oImg);
});

12：当选择画布中的对象时，该对象不出现在顶层。

canvas.preserveObjectStacking = true; // 选中对象不会到最高层，按原层次摆放

13：为画布通过URL方式添加背景图片

var bg_url = "http://www.xxxx.com/...../bg.png" 
fabric.Image.fromURL( bg_url , function(oImg) {
    oImg.set({
        width: canvas_obj.width, 
        height: canvas_obj.height,
        originX: 'left', 
        originY: 'top'