【easeljs】矢量绘图工具 Graphics类

类介绍

Graphics类公开了一个易于使用的,用于生成矢量图和把它们绘制到指定的内容里的API。注意,你可以不需要依赖EaselJS框架,通过直接调用draw来使用Graphics。或者它也可以和Shape 对象一起,用于在EaselJS显示列表中绘制矢量图形。

有两个使用Graphics对象的方法:直接使用Graphics实例的方法,或者实例化Graphics然后通过append把它加进一个graphics队列。前者提炼自后者,简化路径、填充、描边的开始和结束。

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

Graphics里所有绘制的方法最后都会返回此次绘制的Graphics实例,所以它们可以连起来写(链式写法)。例如,下面一行代码可以绘制一个红色描边和蓝色填充的矩形:

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

每一次调用graphics api都会生成一个 command 命令对象。最后创建的command可以通过command访问:

var fillCommand = myGraphics.beginFill("red").command;
// 之后更新填充颜色:
fillCommand.style = "blue";
//或者把它的填充改成一个位图:
fillCommand.bitmap(myImage);
    原文作者:黒之染
    原文地址: https://segmentfault.com/a/1190000004329081
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞