使用 FabricJS 向 Polygon 对象添加收缩和展开动画

第使用FabricJS向Polygon对象添加收缩和展开动画scaleX：此属性接受Number值。分配的值决定水平对象比例因子。它的默认值为1。

scaleY：此属性接受Number值。分配的值决定垂直对象比例因子。它的默认值为1。

示例1：为多边形添加收缩动画

让我们看一个代码示例，看看如何使用animate方法添加收缩动画。我们向scaleX和scaleY属性传递一个值0.5，这使得多边形从水平和垂直方向都是原始大小的一半。

!DOCTYPEhtml

html

head

!--AddingtheFabricJSLibrary--

scriptsrc=/ajax/libs/fabric.js/510/fabric.min.js/script

/head

body

h2Addingshrinkanimationtothepolygon/h2

pYoucanseethatshrinkanimationhasbeenaddedtothepolygon/p

canvasid=canvas/canvas

script

//Initiateacanvasinstance

varcanvas=newfabric.Canvas(canvas

canvas.setWidth(document.body.scrollWidth);

canvas.setHeight(250);

//Initiateapolygonobject

varpolygon=newfabric.Polygon(

{x:60,y:0},

{x:60,y:60},

{x:0,y:60},

{x:0,y:0},

fill:#ffe4e1,

stroke:green,

strokeWidth:5,

top:90,

left:100,

//Addingittothecanvas

canvas.add(polygon);

//UsingtheanimatemethodandpassingscaleXproperty

polygon.animate(scaleX,0.5,{

onChange:canvas.renderAll.bind(canvas),

easing:fabric.util.ease.easeInCubic,

duration:1000,

//UsingtheanimatemethodandpassingscaleYproperty

polygon.animate(scaleY,0.5,{

onChange:canvas.renderAll.bind(canvas),

easing:fabric.util.ease.easeInCubic,

duration:1000,

/script

/body

/html

示例2：向多边形添加展开动画

在此示例中，我们将了解如何使用animate方法添加expand动画。由于我们向scaleX和scaleY属性传递的值为1.5，因此多边形对象将在水平和垂直方向上缩放1.5倍。

!DOCTYPEhtml

html

head

!--AddingtheFabricJSLibrary--

scriptsrc=/ajax/libs/fabric.js/510/fabric.min.js/script

/head

body

h2Addingexpandanimationtothepolygon/h2

pYoucanseethatexpandanimationhasbeenaddedtothepolygon/p

canvasid=canvas/canvas

script

//Initiateacanvasinstance

varcanvas=newfabric.Canvas(canvas

canvas.setWidth(document.body.scrollWidth);

canvas.setHeight(250);

//Initiateapolygonobject

varpolygon=newfabric.Polygon(

{x:60,y:0},

{x:60,y:60},

{x:0,y:60},

{x:0,y:0},

fill:#ffe4e1,

stroke:green,

strokeWidth:5,

top:90,

left:100,

//Addingittothecanvas

canvas.add(polygon);

//UsingtheanimatemethodandpassingscaleXproperty

polygon.animate(scaleX,1.5,{

onChange:canvas.renderAll.bind(canvas),

easing:fabric.util.ease.easeInCubic,

duration:1000,

//UsingtheanimatemethodandpassingscaleYproperty

polygon.animate(scaleY,1.5,{

onChange:canvas.renderAll.bind(canvas),

easing:fab