使用 FabricJS 向 Polygon 對(duì)象添加收縮和展開(kāi)動(dòng)畫

第使用FabricJS向Polygon對(duì)象添加收縮和展開(kāi)動(dòng)畫scaleX：此屬性接受Number值。分配的值決定水平對(duì)象比例因子。它的默認(rèn)值為1。

scaleY：此屬性接受Number值。分配的值決定垂直對(duì)象比例因子。它的默認(rèn)值為1。

示例1：為多邊形添加收縮動(dòng)畫

讓我們看一個(gè)代碼示例，看看如何使用animate方法添加收縮動(dòng)畫。我們向scaleX和scaleY屬性傳遞一個(gè)值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：向多邊形添加展開(kāi)動(dòng)畫

在此示例中，我們將了解如何使用animate方法添加expand動(dòng)畫。由于我們向scaleX和scaleY屬性傳遞的值為1.5，因此多邊形對(duì)象將在水平和垂直方向上縮放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