资讯专栏INFORMATION COLUMN

【easeljs】矢量绘图工具 Graphics类

刘玉平 / 2100人阅读

摘要:类介绍类公开了一个易于使用的,用于生成矢量图和把它们绘制到指定的内容里的。注意,你可以不需要依赖框架,通过直接调用来使用。或者它也可以和对象一起,用于在显示列表中绘制矢量图形。最后创建的可以通过访问之后更新填充颜色或者把它的填充改成一个位图

类介绍

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://www.ucloud.cn/yun/91611.html

相关文章

  • easeljs矢量形状 Shape

    摘要:类介绍继承自一个形状允许你在显示列表中显示矢量图。它包含一个带有所有绘制矢量图形的方法的图形实例。实例可以在多个实例之间共享,以做到一样的矢量图形在画布上有多个不同位置和不同变形的复制。 类介绍 继承自 DisplayObject 一个Shape(形状)允许你在显示列表中显示矢量图。它包含一个带有所有绘制矢量图形的方法的Graphics(图形)实例。Graphics实例可以在多个Sha...

    mengbo 评论0 收藏0
  • easeljs】显示对象基础 DisplayObject

    摘要:类介绍继承自方法把此显示对象写进一个新的隐藏的,然后用于接下来的绘制。缓存好的这个显示对象,可以自由地移动旋转渐消。 类介绍 继承自 EventDispatcher DisplayObject is an abstract class that should not be constructed directly. Instead construct subclasses such a...

    amc 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<