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

資訊專欄INFORMATION COLUMN

Fabric.js 簡(jiǎn)單介紹和使用 （三）

xi4oh4o / 2347人閱讀

摘要：之前我們學(xué)習(xí)了基礎(chǔ)和高級(jí)特性現(xiàn)在介紹更神奇的東西話說(shuō)這個(gè)功能我最喜歡組成群組可以統(tǒng)一修改其中所有組件屬性如何定義現(xiàn)在我們就可以對(duì)其中的對(duì)象集修改中的元素相對(duì)于定位但是由于要確保之前得到卻切位置所以要異步可以動(dòng)態(tài)添加添加并修改當(dāng)然你可以使用

之前我們學(xué)習(xí)了基礎(chǔ)和高級(jí)特性 現(xiàn)在介紹更神奇的東西

Groups

話說(shuō)這個(gè)功能我最喜歡

組成群組可以統(tǒng)一修改其中所有組件屬性

如何定義

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);

現(xiàn)在我們就可以對(duì)其中的對(duì)象集修改

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

group中的元素相對(duì)于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 可以動(dòng)態(tài)添加

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"
}));

當(dāng)然 你可以使用canvas上已有的進(jìn)行克隆 組合

// 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 實(shí)現(xiàn)了toJSON接口 可以被序列化

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

canvas 可以隨時(shí)被修改 json數(shù)據(jù)會(huì)被修改

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

添加新對(duì)象 也會(huì)改變json數(shù)據(jù)

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)"}"

再添加一個(gè)

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

可以轉(zhuǎn)化成js object對(duì)象

{ "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
    }
  ]
}

每個(gè)fabric對(duì)象有toObject方法 這和toJSON 也有關(guān) 可以自定義

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)"}"

當(dāng)然我們可以保留原有的數(shù)據(jù) 新增數(shù)據(jù)

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

怎么能不支持轉(zhuǎn)成svg呢

canvas.add(new fabric.Rect({
  left: 50,
  top: 50,
  height: 20,
  width: 20,
  fill: "green"
}));
console.log(canvas.toSVG());
"Created with Fabric.js 0.9.21"
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 會(huì)被序列化 但是可以使用 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

構(gòu)造類

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 + ")";
  }
});

繼承默認(rèn)類

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);
  }
});

不過(guò)其實(shí)沒(méi)必要的

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/79148.html

相關(guān)文章

  • Fabric.js 簡(jiǎn)單介紹和使用

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

    piapia 評(píng)論0 收藏0

  • Fabric.js 的簡(jiǎn)單介紹和使用 (二）

    摘要：之前我們學(xué)習(xí)了基礎(chǔ)用法現(xiàn)在我們開(kāi)始一些好玩的我們先回顧設(shè)置一下正方形角度方法這是沒(méi)有動(dòng)畫(huà)的都有方法那么正方形會(huì)從到有一個(gè)動(dòng)畫(huà)過(guò)度從左到右進(jìn)行變動(dòng)逆時(shí)針轉(zhuǎn)度當(dāng)然還支持這些方法圖片可以使用效果一次可以使用多個(gè)效果當(dāng)然你也可以自己定義支持顏色 之前我們學(xué)習(xí)了基礎(chǔ)用法 現(xiàn)在我們開(kāi)始一些好玩的 Animation 我們先回顧設(shè)置一下正方形角度方法 rect.set(angle, 45); 這是沒(méi)...

    wangdai 評(píng)論0 收藏0

  • 我從 fabric.js 中學(xué)到了什么

    摘要：前言熟悉的朋友想必都使用或者聽(tīng)說(shuō)過(guò)，算是一個(gè)元老級(jí)的庫(kù)了，從第一個(gè)版本發(fā)布到現(xiàn)在，已經(jīng)有年時(shí)間了。中緩存是默認(rèn)開(kāi)啟的，同時(shí)也可以設(shè)置為禁用。處理屏屏幕模糊的問(wèn)題，直接給出處理方法，就不展開(kāi)說(shuō)了。 前言 熟悉 canvas 的朋友想必都使用或者聽(tīng)說(shuō)過(guò) Fabric.js，F(xiàn)abric 算是一個(gè)元老級(jí)的 canvas 庫(kù)了，從第一個(gè)版本發(fā)布到現(xiàn)在，已經(jīng)有 8 年時(shí)間了。我近一年時(shí)間也在項(xiàng)目...

    oogh 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<