fabricjs做组态和流程图-认识fabricjs

Vktun      2022-02-17     696

关键词:

在工业4.0和IOT的驱动下,越来越多的设备开始接入互联网。对于web和移动端的流行 很多企业开始对设备的监控 从桌面端走到了移动端和web端。虽然目前还是有不少漂亮的UI 是实现组态设计,但是 还是如之前的老式思维一样,很少有开源的web 来满足各个需求。现在由于公司需要,开始研究组态设计并选定了这个FabricJS 作为 web 展示的组态设计!

Fabricjs是一个开源的基于canvas的web交互的js库,开源协议MIT,并有很多贡献者。英文无障碍者--->http://fabricjs.com

Fabric 提供了canvas 渲染的对象模型,也能对SVG进行了很好的解析和交互,并且可以当作对于其他类似需求的必不可少的工具。它基于原生方法提供了简单并且强大的对象模型.也考虑到了canvas的状态和渲染,直接让我们对对象进行操作即可。后面的文章大部分是摘抄自官网教程,博主是想一边学,一边记。所以只是稍微梳理下并做了下翻译。

比如我们想画一个红色矩形,来实现同样的效果,一下是用原生canvas和Fabric的对比:

将这个矩形旋转45度:

用原生的canvas就需要:

var canvasEl = document.getElementById(‘c‘);
var ctx = canvasEl.getContext(‘2d‘);
ctx.fillStyle = ‘red‘;

ctx.translate(100, 100);
ctx.rotate(Math.PI / 180 * 45);
ctx.fillRect(-10, -10, 20, 20);

 

用Fabric就只需要增加一个属性就可以了:

var canvas = new fabric.Canvas(‘c‘);

// create a rectangle with angle=45
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: ‘red‘,
  width: 20,
  height: 20,
  angle: 45  //旋转45堵
});

canvas.add(rect);

 

我们需要计算出在canvas位图中旋转的距离和画线的起始位置,然后再将这个举行画出来原生的是直接作用于整个canvas,而Fabric 是实例化一个对象,并对这个对象的属性和事件进行操作再加入到canvas 中。当我们想对这个举行进行移动的时候,我们用原生canvas API是需要重新清空canvas 再进行重绘,而Fabric直接改变该对象的属性位置而进行渲染!(emmm...)

看 canvas API

var canvasEl = document.getElementById(‘c‘);

...
ctx.strokRect(100, 100, 20, 20);
...

// erase entire canvas area
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
ctx.fillRect(20, 50, 20, 20);

 

而用Fabric

var canvas = new fabric.Canvas(‘c‘);
...
canvas.add(rect);
...

rect.set({ left: 20, top: 50 });
canvas.renderAll();

 

Fabric 的对象

Fabric提供了7中基本的对象类,如果只是单纯的画这些图形的话,会节省我们很多的时间:

  • fabric.Circle   //圆形
  • fabric.Ellipse   //椭圆
  • fabric.Line      //线
  • fabric.Polygon //多边形
  • fabric.Polyline //交叉线 折线
  • fabric.Rect //矩形
  • fabric.Triangle//三角形

这些实例都继承fabric.Object,如果你想画一些图形,并且需要一些公共方法。这时候你就可以在fabric.Object上定义一个方法,来让子类继续。

比如我们定一个方法getAngleInRadians 方法在fabric.Object对象上:

fabric.Object.prototype.getAngleInRadians = function() {
  return this.get(‘angle‘) / 180 * Math.PI;
};

var rect = new fabric.Rect({ angle: 45 });
rect.getAngleInRadians(); // 0.785...

var circle = new fabric.Circle({ angle: 30, radius: 10 });
circle.getAngleInRadians(); // 0.523...

circle instanceof fabric.Circle; // true
circle instanceof fabric.Object; // true

 

你就会发现这些对象都可以使用了。

Canvas 

如果我们想对canvas操作 ,则会使用以下方式:

var canvas = new fabric.Canvas(‘c‘);
var rect = new fabric.Rect();

canvas.add(rect); // add object

canvas.item(0); // reference fabric.Rect added earlier (first object)
canvas.getObjects(); // get all objects on canvas (rect will be first and only)

canvas.remove(rect); // remove previously-added fabric.Rect
var canvas = new fabric.Canvas(‘c‘, {
  backgroundColor: ‘rgb(100,100,200)‘,
  selectionColor: ‘blue‘,
  selectionLineWidth: 2
  // ...
});

// or

var canvas = new fabric.Canvas(‘c‘);
canvas.setBackgroundImage(‘http://...‘);
canvas.onFpsUpdate = function(){ /* ... */ };
// ...
 

 

Interactivity(互动)

重点来了,交互-对象模型存在允许编程访问和操纵画布上的对象。但是在用户层面是通过鼠标来操作这个对象的,只要你是通过fabric.Canvas(‘...‘)初始化对象的,它是可以被选择拖拽放大缩小旋转,甚至可以分组。如果你想禁用某个交互功能,你只需要配置成boolen传递即可:

var canvas = new fabric.Canvas(‘c‘);
...
canvas.selection = false; // disable group selection
rect.set(‘selectable‘, false); // make object unselectable

 

如果你不想让这个对象有任何的操作,你可以使用fabric.StaticCanvas对象

var staticCanvas = new fabric.StaticCanvas(‘c‘);

staticCanvas.add(
  new fabric.Rect({
    width: 10, height: 20,
    left: 100, top: 100,
    fill: ‘yellow‘,
    angle: 30
  }));

 

Images(图片)

对图片的操作也是同样的

//(html)

<canvas id="c"></canvas>
<img src="my_image.png" id="my-image">


//(js)

var canvas = new fabric.Canvas(‘c‘);
var imgElement = document.getElementById(‘my-image‘);
var imgInstance = new fabric.Image(imgElement, {
  left: 100,
  top: 100,
  angle: 30,
  opacity: 0.85
});
canvas.add(imgInstance);

 

也可以直接使用图片路径使用fabric.Image.fromURL来渲染:

fabric.Image.fromURL(‘my_image.png‘, function(oImg) {
  // scale image down, and flip it, before adding it onto canvas
  oImg.scale(0.5).set(‘flipX, true);
  canvas.add(oImg);
});

Paths(路经)

如果我们要画更复杂的图形,则需要使用路经来画

 

...
var path = new fabric.Path(‘M 0 0 L 300 100 L 200 300 z‘);
...
path.set({ fill: ‘red‘, stroke: ‘green‘, opacity: 0.5 });
canvas.add(path);

 

...
var path = new fabric.Path(‘M121.32,0L44.58,0C36.67,0,29.5,3.22,24.31,8.41c-5.19,5.19-8.41,12.37-8.41,20.28c0,15.82,12.87,28.69,28.69,28.69c0,0,4.4,0,7.48,0C36.66,72.78,8.4,101.04,8.4,101.04C2.98,106.45,0,113.66,0,121.32c0,7.66,2.98,14.87,8.4,20.29l0,0c5.42,5.42,12.62,8.4,20.28,8.4c7.66,0,14.87-2.98,20.29-8.4c0,0,28.26-28.25,43.66-43.66c0,3.08,0,7.48,0,7.48c0,15.82,12.87,28.69,28.69,28.69c7.66,0,14.87-2.99,20.29-8.4c5.42-5.42,8.4-12.62,8.4-20.28l0-76.74c0-7.66-2.98-14.87-8.4-20.29C136.19,2.98,128.98,0,121.32,0z);

canvas.add(path.set({ left: 100, top: 200 }));

 

 

结语

这是介绍的对fabric一些基本的实例对象, 还有一些更复杂的 动画,文本,SVG的解析,渲染,序列化,事件,图片过滤等等。。。

 


Fabricjs 平移和缩放

】Fabricjs平移和缩放【英文标题】:Fabricjspanandzoom【发布时间】:2015-08-0814:04:10【问题描述】:如何使用fabricjs进行平移和缩放?我试过使用zoomToPoint和setZoom方法,但它们不适用于平移。一旦我开始使用不同的缩放点,我就会遇... 查看详情

缩放和平移后fabricJS中的对象对齐

】缩放和平移后fabricJS中的对象对齐【英文标题】:ObjectalignmentinfabricJSafterzoomandpan【发布时间】:2021-06-1807:58:41【问题描述】:当我想将元素左对齐时,我使用fabricJS和Angular,例如我使用以下方法alignLeft()//GetSelectedElementsvarobj=thi... 查看详情

集成 Fabricjs 和 Angularjs

】集成Fabricjs和Angularjs【英文标题】:IntegratingFabricjsandAngularjs【发布时间】:2013-08-1922:53:02【问题描述】:我正在尝试构建一个在屏幕上编辑简单图形的应用程序,fabricjs是我使用的画布库,angularjs是我使用的MVW框架。现在,从D... 查看详情

Fabricjs:在拖动时显示水平和垂直位置线

】Fabricjs:在拖动时显示水平和垂直位置线【英文标题】:Fabricjs:Showhorizontalandverticalpositionlineondrag【发布时间】:2018-12-1312:37:24【问题描述】:我正在使用fabricjs1.5,但我一直坚持下去。每当我开始拖动对象时,我想水平和垂直... 查看详情

在 FabricJS 画布上拖放和删除对象

】在FabricJS画布上拖放和删除对象【英文标题】:Drag,dropanddeleteobjectsonFabricJScanvas【发布时间】:2017-08-0814:53:13【问题描述】:我在使用JQuery处理FabricJS时遇到问题。选择一个对象并单击删除没有问题。这是我的代码演示Fiddle我可... 查看详情

AngularJS:使用 FabricJS/Canvas 进行测试

】AngularJS:使用FabricJS/Canvas进行测试【英文标题】:AngularJS:TestingwithFabricJS/Canvas【发布时间】:2014-02-0723:39:55【问题描述】:你如何在指令和服务中为FabricJS之类的东西编写测试?示例应用:http://fabricjs.com/kitchensink/我一直在尝... 查看详情

FabricJS:始终在画布上居中对象

】FabricJS:始终在画布上居中对象【英文标题】:FabricJS:AlwaysCenterObjectonCanvas【发布时间】:2013-06-2015:31:05【问题描述】:是否可以在fabricjs画布上始终将对象居中?背景:我正在构建一个web工具,可以很容易地使用fabricjs创建复... 查看详情

canvas - 使用fabricjs和angularjs进行捏缩放

】canvas-使用fabricjs和angularjs进行捏缩放【英文标题】:canvas-pinchzoomingusingbyfabricjsandangularjs【发布时间】:2014-11-0215:05:13【问题描述】:我正在尝试使用FabricJs在画布上进行捏合缩放。但我对此一无所知。我还从谷歌搜索了一些代... 查看详情

FabricJS动画:鼠标:向上和:向下期间画布上的选定对象

】FabricJS动画:鼠标:向上和:向下期间画布上的选定对象【英文标题】:FabricJSanimating:selectedobjectoncanvasduringmouse:upand:down【发布时间】:2017-09-1405:39:34【问题描述】:我正在尝试使用FabricJS在任何对象被选中时为其设置动画。Sow... 查看详情

如何修复 FabricJS 中 Inkscape SVG 的缩放和旋转?

】如何修复FabricJS中InkscapeSVG的缩放和旋转?【英文标题】:HowcanIfixtheScalingandRotatingofanInkscapeSVGinFabricJS?【发布时间】:2014-03-2307:58:03【问题描述】:我在使用FabricJS缩放和旋转SVG图像时遇到了一些问题。我一直在为我的网站开发... 查看详情

将图像拖放到画布(FabricJS)

】将图像拖放到画布(FabricJS)【英文标题】:DragAndDropImagetoCanvas(FabricJS)【发布时间】:2015-11-0702:32:31【问题描述】:问题我想用图像而不是canvas对象来做到这一点。这意味着您必须先添加要添加到画布的内容并作为画布的一部... 查看详情

Fabricjs:如何只显示图像的一部分?

】Fabricjs:如何只显示图像的一部分?【英文标题】:Fabricjs:howtodisplayonlyapartofimage?【发布时间】:2020-05-2413:20:29【问题描述】:我想使用fabricjs在画布上显示一部分图像(如html、css中的精灵和背景位置)。默认情况下,fabricjs会... 查看详情

fabricjs:缩放后如何显示对象大小

】fabricjs:缩放后如何显示对象大小【英文标题】:fabricjs:howtoshowobjectsizeafterscaling【发布时间】:2015-08-2312:28:55【问题描述】:我正在使用名为“WoocommerceProductDesigner”的wordpress插件,其中包含一个1.4.9版中名为fabicjs的JavaScript库... 查看详情

FabricJs:将对象大小固定在组调整大小上

】FabricJs:将对象大小固定在组调整大小上【英文标题】:FabricJs:KeepObjectSizefixedonGroupReszing【发布时间】:2021-11-1901:37:37【问题描述】:我正在使用FabricJS创建一个包含两个对象的组-光图标(svg)和阴影(三角形)。我将LightIconSVG作为... 查看详情

FabricJS:对象控件在共同选择之前不起作用

】FabricJS:对象控件在共同选择之前不起作用【英文标题】:FabricJS:Objectcontrolsnotworkinguntilcommonselection【发布时间】:2021-02-1803:50:04【问题描述】:我正在使用Vue和FabricJS创建产品配置器。我已经使用创建了一个画布this.canvas=newfab... 查看详情

如何清除画布属性和事件并将其添加回fabricjs?

】如何清除画布属性和事件并将其添加回fabricjs?【英文标题】:Howtoclearcanvaspropertiesandeventsandadditbackinfabricjs?【发布时间】:2021-03-2623:19:08【问题描述】:上下文:我有一个用例,我需要从堆栈中获取旧画布并将其分配给dom中当... 查看详情

使用 FabricJS 裁剪图像

】使用FabricJS裁剪图像【英文标题】:CropanimageusingFabricJS【发布时间】:2016-05-2513:13:39【问题描述】:我想使用(javascript)FabricJS+HTML5画布裁剪图像。画布的背景图像是一个织物图像对象。作物面积是一个FabricJS矩形。我也附上了一... 查看详情

FabricJS:延迟重复动画

】FabricJS:延迟重复动画【英文标题】:FabricJS:Repeatingananimationwithadelay【发布时间】:2017-12-0408:38:28【问题描述】:所以我正在使用FabricJS为圆圈设置动画,如下所示:varclickedPulse=newfabric.Circle(radius:5,fill:\'rgba(0,0,0,0)\',stroke:\'rgba(0... 查看详情