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'