[easeljs] graphics class of vector drawing tool

Time:2021-9-19

Class introduction

Graphics classAn easy-to-use API for generating vector graphs and drawing them into specified content is disclosed. Note that you don’t need to relyEaseljs framework, by calling directlydrawTo useGraphics。 Or it can be withShape objectTogether, it is used to draw vector graphics in the easeljs display list.

There are two ways to use graphics objects: directly use the method of Graphics instance, or instantiate graphics and add it to a graphics queue through append. The former is refined from the latter, which simplifies the beginning and end of path, filling and stroke.

var g = new createjs.Graphics();
g.setStrokeStyle(1);
g.beginStroke("#000000");
g.beginFill("red");
g.drawCircle(0,0,30);

GraphicsAll drawing methods in the will finally return the result of this drawingGraphicsExamples, so they can be written together (chain writing). For example, the following line of code can draw a rectangle with red stroke and blue fill:

myGraphics.beginStroke("red").beginFill("blue").drawRect(20, 20, 100, 50);

Every callgraphics apiWill generate acommandCommand object. Last createdcommandCan passcommandvisit:

var fillCommand = myGraphics.beginFill("red").command;
//Update fill color after:
fillCommand.style = "blue";
//Or change its fill to a bitmap:
fillCommand.bitmap(myImage);