【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);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术博文

mysql中int长度的意义

疑问: mysql的字段,unsigned int(4), 和unsinged int(5), 能存储的数值范围是否相同。如果不同,分别是多大? 答: 无论是i...

32740
来自专栏向治洪

OpenGL ES简介

概述 在聊Android的View渲染流程中,通常会有一个比较核心的步骤:通过OpeGL ES接口调用GPU接口通知GPU绘制图形。其完整的流程:UI对象—->...

30270
来自专栏Code_iOS

OpenGL ES 2.0 (iOS)[01]: 一步从一个小三角开始

1). 三个什么端点(屏幕坐标点)? 要回答这个问题要先了解 OpenGL ES 的坐标系在屏幕上是怎样分布的:

16340
来自专栏生信小驿站

Python数据处理从零开始----第四章(可视化)(4)(韦恩图)

matplotlib-venn 包提供了四个主要的函数:venn2、venn2-circles、venn3 和 venn3-circles。

14220
来自专栏三丰SanFeng

字节对齐

什么是对齐,以及为什么要对齐: 现代计算机中内存空间都是按照byte划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定变...

26950
来自专栏前端说吧

Sass控制命令及函数知识整理

43460
来自专栏calmound

D3DXCreateTexture

HRESULT D3DXCreateTexture( __in LPDIRECT3DDEVICE9 pDevice, __in UINT...

35880
来自专栏听雨堂

relative定位的理解

relative:对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置。       设置此属性值为 relative ...

19770
来自专栏大数据钻研

前端编码规范

基本原则 结构、样式、行为分离 统一缩进(建议 两个空格) 文件编码统一 不带BOM的UTF-8 一律使用小写字母 省略外链资源 URL 协议部分(FTP等其他...

37570
来自专栏向治洪

OpenGL ES简介

概述 在聊Android的View渲染流程中,通常会有一个比较核心的步骤:通过OpeGL ES接口调用GPU接口通知GPU绘制图形。其完整的流程:UI对象—->...

32850

扫码关注云+社区

领取腾讯云代金券