Fabric.js 簡單介紹和使用（三）

xi4oh4o 發布于2019-08-19 18:04 / 2329人閱讀

摘要：之前我們學習了基礎和高級特性現在介紹更神奇的東西話說這個功能我最喜歡組成群組可以統一修改其中所有組件屬性如何定義現在我們就可以對其中的對象集修改中的元素相對于定位但是由于要確保之前得到卻切位置所以要異步可以動態添加添加并修改當然你可以使用

之前我們學習了基礎和高級特性現在介紹更神奇的東西

Groups

話說這個功能我最喜歡

組成群組可以統一修改其中所有組件屬性

如何定義

var circle = new fabric.Circle({
  radius: 100,
  fill: "#eef",
  scaleY: 0.5,
  originX: "center",
  originY: "center"
});

var text = new fabric.Text("hello world", {
  fontSize: 30,
  originX: "center",
  originY: "center"
});

var group = new fabric.Group([ circle, text ], {
  left: 150,
  top: 100,
  angle: -10
});

canvas.add(group);

現在我們就可以對其中的對象集修改

group.item(0).setFill("red");
group.item(1).set({
  text: "trololo",
  fill: "white"
});

group中的元素相對于group定位

但是由于要確保之前得到卻切位置所以要異步

fabric.Image.fromURL("/assets/pug.jpg", function(img) {
  var img1 = img.scale(0.1).set({ left: 100, top: 100 });

  fabric.Image.fromURL("/assets/pug.jpg", function(img) {
    var img2 = img.scale(0.1).set({ left: 175, top: 175 });

    fabric.Image.fromURL("/assets/pug.jpg", function(img) {
      var img3 = img.scale(0.1).set({ left: 250, top: 250 });

      canvas.add(new fabric.Group([ img1, img2, img3], { left: 200, top: 200 }))
    });
  });
});

group 可以動態添加

group.add(new fabric.Rect({
  ...
  originX: "center",
  originY: "center"
}));

添加并修改group

group.addWithUpdate(new fabric.Rect({
  ...
  left: group.getLeft(),
  top: group.getTop(),
  originX: "center",
  originY: "center"
}));

當然你可以使用canvas上已有的進行克隆組合

// create a group with copies of existing (2) objects
var group = new fabric.Group([
  canvas.item(0).clone(),
  canvas.item(1).clone()
]);

// remove all objects and re-render
canvas.clear().renderAll();

// add group onto canvas
canvas.add(group);

Serialization

序列化是為了相互傳輸

toObject, toJSON

canvas 實現了toJSON接口可以被序列化

var canvas = new fabric.Canvas("c");
JSON.stringify(canvas); // "{"objects":[],"background":"rgba(0, 0, 0, 0)"}"

canvas 可以隨時被修改 json數據會被修改

canvas.backgroundColor = "red";
JSON.stringify(canvas); // "{"objects":[],"background":"red"}"

添加新對象也會改變json數據

canvas.add(new fabric.Rect({
  left: 50,
  top: 50,
  height: 20,
  width: 20,
  fill: "green"
}));
console.log(JSON.stringify(canvas));

"{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}"

再添加一個

canvas.add(new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50,
  fill: "red"
}));
console.log(JSON.stringify(canvas));

"{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0},{"type":"circle","left":100,"top":100,"width":100,"height":100,"fill":"red","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"radius":50}],"background":"rgba(0, 0, 0, 0)"}"

toObject

可以轉化成js object對象

{ "background" : "rgba(0, 0, 0, 0)",
  "objects" : [
    {
      "angle" : 0,
      "fill" : "green",
      "flipX" : false,
      "flipY" : false,
      "hasBorders" : true,
      "hasControls" : true,
      "hasRotatingPoint" : false,
      "height" : 20,
      "left" : 50,
      "opacity" : 1,
      "overlayFill" : null,
      "perPixelTargetFind" : false,
      "scaleX" : 1,
      "scaleY" : 1,
      "selectable" : true,
      "stroke" : null,
      "strokeDashArray" : null,
      "strokeWidth" : 1,
      "top" : 50,
      "transparentCorners" : true,
      "type" : "rect",
      "width" : 20
    }
  ]
}

每個fabric對象有toObject方法這和toJSON 也有關可以自定義

var rect = new fabric.Rect();
rect.toObject = function() {
  return { name: "trololo" };
};
canvas.add(rect);
console.log(JSON.stringify(canvas));

"{"objects":[{"name":"trololo"}],"background":"rgba(0, 0, 0, 0)"}"

當然我們可以保留原有的數據新增數據

var rect = new fabric.Rect();

rect.toObject = (function(toObject) {
  return function() {
    return fabric.util.object.extend(toObject.call(this), {
      name: this.name
    });
  };
})(rect.toObject);

canvas.add(rect);

rect.name = "trololo";

console.log(JSON.stringify(canvas))

"{"objects":[{"type":"rect","left":0,"top":0,"width":0,"height":0,"fill":"rgb(0,0,0)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0,"name":"trololo"}],"background":"rgba(0, 0, 0, 0)"}"

toSvg

怎么能不支持轉成svg呢

canvas.add(new fabric.Rect({
  left: 50,
  top: 50,
  height: 20,
  width: 20,
  fill: "green"
}));
console.log(canvas.toSVG());

""

Deserialization, SVG parser

fabric.Canvas#loadFromJSON
fabric.Canvas#loadFromDatalessJSON
fabric.loadSVGFromURL
fabric.loadSVGFromString

var canvas = new fabric.Canvas();

canvas.loadFromJSON("{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0},{"type":"circle","left":100,"top":100,"width":100,"height":100,"fill":"red","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"radius":50}],"background":"rgba(0, 0, 0, 0)"}");

通常情況下 svg 會被序列化但是可以使用 fabric.Canvas#toDatalessJSON

canvas.item(0).sourcePath = "/assets/dragon.svg";
console.log(JSON.stringify(canvas.toDatalessJSON()));

{"objects":[{"type":"path","left":143,"top":143,"width":175,"height":151,"fill":"#231F20","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":-19,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"path":"/assets/dragon.svg"}],"background":"rgba(0, 0, 0, 0)"}

Subclassing

構造類

var Point = fabric.util.createClass({
  initialize: function(x, y) {
    this.x = x || 0;
    this.y = y || 0;
  },
  toString: function() {
    return this.x + "/" + this.y;
  }
});

繼承類

var ColoredPoint = fabric.util.createClass(Point, {
  initialize: function(x, y, color) {
    this.callSuper("initialize", x, y);
    this.color = color || "#000";
  },
  toString: function() {
    return this.callSuper("toString") + " (color: " + this.color + ")";
  }
});

繼承默認類

var LabeledRect = fabric.util.createClass(fabric.Rect, {

  type: "labeledRect",

  initialize: function(options) {
    options || (options = { });

    this.callSuper("initialize", options);
    this.set("label", options.label || "");
  },

  toObject: function() {
    return fabric.util.object.extend(this.callSuper("toObject"), {
      label: this.get("label")
    });
  },

  _render: function(ctx) {
    this.callSuper("_render", ctx);

    ctx.font = "20px Helvetica";
    ctx.fillStyle = "#333";
    ctx.fillText(this.label, -this.width/2, -this.height/2 + 20);
  }
});

不過其實沒必要的

云服務器 GPU云服務器 WebRtc的簡單介紹 webrtc介紹及簡單應用 html5的簡單介紹 webrtc使用介紹

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79148.html

Fabric.js 簡單介紹和使用

摘要：簡介是一個可以簡化程序編寫的庫。為提供所缺少的對象模型交互和一整套其他不可或缺的工具。基于協議開源，在上有許多人貢獻代碼。在移動，線，曲線，或弧等命令的幫助下，路徑可以形成令人難以置信的復雜形狀。同組的路徑路徑組的幫助，開放更多的可能性。簡介 Fabric.js是一個可以簡化canvas程序編寫的庫。 Fabric.js為canvas提供所缺少的對象模型, svg parser, 交...

piapia 2019-08-19 18:01 評論0 收藏0
Fabric.js 的簡單介紹和使用 (二）

摘要：之前我們學習了基礎用法現在我們開始一些好玩的我們先回顧設置一下正方形角度方法這是沒有動畫的都有方法那么正方形會從到有一個動畫過度從左到右進行變動逆時針轉度當然還支持這些方法圖片可以使用效果一次可以使用多個效果當然你也可以自己定義支持顏色之前我們學習了基礎用法現在我們開始一些好玩的 Animation 我們先回顧設置一下正方形角度方法 rect.set(angle, 45); 這是沒...

wangdai 2019-08-19 18:04 評論0 收藏0
我從 fabric.js 中學到了什么

摘要：前言熟悉的朋友想必都使用或者聽說過，算是一個元老級的庫了，從第一個版本發布到現在，已經有年時間了。中緩存是默認開啟的，同時也可以設置為禁用。處理屏屏幕模糊的問題，直接給出處理方法，就不展開說了。前言熟悉 canvas 的朋友想必都使用或者聽說過 Fabric.js，Fabric 算是一個元老級的 canvas 庫了，從第一個版本發布到現在，已經有 8 年時間了。我近一年時間也在項目...

oogh 2019-08-23 17:15 評論0 收藏0

發表評論

登陸后可評論

0條評論

xi4oh4o

男|高級講師

我要關注我要私信

TA的文章

tensorflow學習

閱讀 564·2023-04-25 16:00
判斷鼠標點擊的位置是否在某個div區域內

閱讀 1598·2019-08-26 13:54
前端培訓-初級階段-場景實戰（2019-05-23）-移動端適配bug

閱讀 2496·2019-08-26 13:47
nodejs request模塊用法

閱讀 3402·2019-08-26 13:39
小程序movable-area拖拽fixed點擊失效

閱讀 1037·2019-08-26 13:37
前端的一些坑，一些記錄，一些冷知識 2

閱讀 2734·2019-08-26 10:21
一個故事講懂vue父子組件傳值

閱讀 3534·2019-08-23 18:19
初步接觸echarts

閱讀 1601·2019-08-23 18:02

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

Fabric.js 簡單介紹和使用（三）

toObject, toJSON

toObject

toSvg

相關文章