Graphics

Graphics

Graphics类公开了一个易于使用的API，用于生成矢量绘图指令并将它们绘制到指定的上下文。请注意，您可以通过调用graphics/draw来使用图形，而不依赖于easeljs框架。或者直接与Shape对象一起使用，在EaselJS显示列表的上下文上绘制矢量图形。

使用Graphics类有两种方法

1. 先实例化Graphics类，再调用实例中的方法
2. new Graphics().command，用Graphics/append将其添加到graphics队列中。

前者抽象后者，简化开始和结束路径、填充和笔画。

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

所有的绘图方法，都返回Graphics实例，因此方向可以用链式写法。例如，

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

每个graphics API方法都会生成一个command object

var fillCommand = myGraphics.beginFill("red").command;
// ... later, update the fill style/color:
fillCommand.style = "blue";
// or change it to a bitmap fill:
fillCommand.bitmap(myImage);

为了更直接地控制渲染，可以直接实例化command objects并将其附加到图形队列中。在这种情况下，你需要手动管理路径创建，并确保将fill/stroke应用于定义的路径：

// start a new path. Graphics.beginCmd is a reusable BeginPath instance:
myGraphics.append(createjs.Graphics.beginCmd);
// we need to define the path before applying the fill:
var circle = new createjs.Graphics.Circle(0,0,30);
myGraphics.append(circle);
// fill the path we just defined:
var fill = new createjs.Graphics.Fill("red");
myGraphics.append(fill);

这些方法可以一起使用，例如插入自定义命令：

myGraphics.beginFill("red");
var customCommand = new CustomSpiralCommand(etc);
myGraphics.append(customCommand);
myGraphics.beginFill("blue");
myGraphics.drawCircle(0, 0, 30);