Fabric.js 简单介绍和使用（三）

xi4oh4o 发布于2019-08-19 18:04 / 2286人阅读

摘要：之前我们学习了基础和高级特性现在介绍更神奇的东西话说这个功能我最喜欢组成群组可以统一修改其中所有组件属性如何定义现在我们就可以对其中的对象集修改中的元素相对于定位但是由于要确保之前得到却切位置所以要异步可以动态添加添加并修改当然你可以使用

之前我们学习了基础和高级特性现在介绍更神奇的东西

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使用介绍

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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学习

阅读 549·2023-04-25 16:00
判断鼠标点击的位置是否在某个div区域内

阅读 1567·2019-08-26 13:54
前端培训-初级阶段-场景实战（2019-05-23）-移动端适配bug

阅读 2454·2019-08-26 13:47
nodejs request模块用法

阅读 3306·2019-08-26 13:39
小程序movable-area拖拽fixed点击失效

阅读 1017·2019-08-26 13:37
前端的一些坑，一些记录，一些冷知识 2

阅读 2717·2019-08-26 10:21
一个故事讲懂vue父子组件传值

阅读 3511·2019-08-23 18:19
初步接触echarts

阅读 1577·2019-08-23 18:02

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

Fabric.js 简单介绍和使用（三）

toObject, toJSON

toObject

toSvg

相关文章