CreateJS-EaselJS文档翻译

EaselJSEaselJS javascript库，为canvas提供了一个保留的图形模式，包括：一个完整的分层显示列表，一个核心的交互模型，以及一些帮助类，使得 Canvas 中的2D图形更容易处理。Ea   stlJS 为使用HTML5 Canvas的丰富图形和交互性，提供了直接的解决方案。开始要开始使用 EaselJS，创建一个包装了 'Canvas元素' 的 'Stage'，并添加 'DisplayObject' 实例作为子元素。EaselJS支持：1.使用 'Bitmap' 的图像2.使用 'Shape' 和 'Graphics' 的矢量图形3.使用 'SpriteSheet' 和 'Sprite' 的动画位图4.使用 'Text' 的简单文本5.使用 'Container' 的容器，用于容纳其他 'DisplayObject' 6.使用 'DOMElement' 控制HTML DOM元素所有的显示对象都作为一个子，添加到 'stage'，或者直接绘制到 'canvas'用户交互'stage' 中的所有显示对象(除了 DOMElement)，在使用 '鼠标或触摸' 进行交互时，会触发事件。EaselJS 支持 hover, press, release事件，以及一个易于使用的 '拖放模型'。更多信息，查看 'MouseEvent'。简单示例该示例演示了如果使用 'EaselJS' 的绘图API，在 'stage' 上创建和定位一个 'Shape'// 传递canvas元素的引用，创建一个 stagestage = new createjs.Stage('canvas');// 创建一个 'Shape' 显示对象circle = new createjs.Shape();circle.graphics.beginFill('red').drawCircle(0, 0, 40);// 定义 'Shape' 实例的位置circle.x = circle.y = 50;// 添加 'Shape' 实例到 'stage' 显示列表stage.addChild(circle);// 更新 'stage' 来渲染下一帧stage.update();简单的交互示例displayObject.addEventListener("click", handleClick);function handleClick(event){// 鼠标 click 事件}displayObject.addEventListener("mousedown", handlePress);function handlePress(event) {// 鼠标 mousedown 事件// 当鼠标按下，监听鼠标 mousemove 事件event.addEventListener("mousemove", handleMove);}function handleMove(event) {}简单动画示例该示例在屏幕上，移动上面创建的 'Shape' 显示对象// 更新 'stage' 来渲染下一帧createjs.Ticker.addEventListener('tick', handleTick);function handleTick(){// 圆将向右移动10个单位circle.x += 10;// 一旦超出 canvas 范围，开始反方向运动if(circle.x > stage.canvas.width){circle.x = 0;}// 每个 'tick'，更新 'stage'，来渲染下一帧stage.update();}其他特点EaselJS也支持：1.Canvas功能，例如：'Shadow' 和 'CompositeOperation'(组合操作？)2.'Ticker'，对象可以订阅的 '全局心跳检测'(全局方位的定时器)3.滤镜，内置 'ColorFilter', 'ColorMatrixFilter', 'AlphaMapFilter', 'AlphaMaskFilter', 'BlurFilter'4.'ButtonHelper' 工具，可以轻松创建交互式按钮5.'SpriteSheetUtils' 和 'SpriteSheetBuilder' 在运行时，帮助构建和管理 'SpriteSheet' 功能浏览器支持所有支持Canvas的现代浏览器都将支持 EaselJS(查看：http://caniuse.com/canvas)。浏览器性能可能因平台而异，例如：Android Canvas的硬件支持较差，平均速度比其他大多数浏览器要慢。1.Stagestage是显示列表的根容器。每次调用它的 'tick' 方法，都会将显示列表渲染到canvas里。示例：创建一个state，添加一个子到新建的stage实例内，之后使用 'Ticker' 来更新子元素，并使用 'update' 方法来重绘stagevar stage = new createjs.Stage('canvas');var image = new createjs.Bitmap('imagePath.png');stage.addChild(image);createjs.Tiker.addEventListener('tick', handleTick);function handleTick(event){image.x += 10;stage.update();}2.Containercontainer是一个嵌套的显示列表，我们可以将多个显示列表组装在一个容器中。例如：我们可以创建一个 '人物' 的容器，包含胳膊、腿、身体以及头部的 'Bitmap' 各个实例。可以将它们作为一个整体来移动，而组内的各个元素又是相对独立，也可以相对移动。容器内的子元素的 'transform' 和 'alpha' 属性 会和容器自身的 'transform' 和 'alpha' 属性叠加。例如，一个 'x=100&alpha=0.5' 的 'Shape'，在一个 'x=50&alpha=0.7' 的容器内，最终渲染到画布上的真实属性为：'x=150&alpha=0.35'(注意：这里的x，并不是宽度，而代表x轴上的移动)。容器比较耗费性能，不要创建仅包含单个元素的容器示例：var container = new createjs.Container();container.addChild(bitmapInstance, shapeInstance);container.x = 100;3.Pointpoint表示二维空间的一个点，由(x, y)定义示例：var point = new createjs.Point(100, 100);4.Rectanglerectangle表示一个矩形，由(x, y)点 + (x+width, y+height)定义示例：var rect = new createjs.Rectangle(0, 0, 100, 100);5.Shapeshape允许我们创建一个矢量艺术(vector art)，添加到显示列表中。'Shape' 可以同 'Graphics' 实例结合，可以暴露出所有的矢量绘图方法。。 'Graphics' 实例可以在多个 'Shape' 实例之间共享，从而可以在不同的位置或变换时，显示相同的矢量图形。如果矢量艺术在绘制之间不会改变，我们可以使用 'cache' 方法来降低渲染成本。示例：var graphics = new createjs.Graphics().beginFill('#ff0000').drawRect(0, 0, 100, 100);var shape = new createjs.Shape(graphics);// Alternatively use can also use the graphics property of the Shape class to renderer the same as above(暂时不太理解)var shape = new createjs.Shape();shape.graphics.beginFill('#ff0000').drawRect(0, 0, 100, 100);6.Shadowshadow类封装了定义 '阴影' 所需要的属性，可通过 'DisplayObject' 的 'shadow' 属性，来应用阴影(意思：先创建一个阴影实例，然后每个显示元素，都可以使用它的shadow属性，来使用该阴影)示例：myImage.shadow = new createjs.Shadow('#000000', 5, 5, 10);7.SpriteSheetSpriteSheet类封装了 '精灵表单' 有关的属性和方法。精灵表单是将一系列图像(通常是动画帧)在一个规则的网格上合并为一张图片。例如：8张100x100的图像组成的公话，可以合并到一个 400x200 的精灵表单上(4帧2行)。我们可以显示单个帧，播放多个帧作为一个动画，甚至将多个动画组合在一起。SpriteSheet 构造方法的 'data' 参数定义如下：1.使用的图像源(单个图像或多个图像)2.单个图像帧的位置3.组成动画的帧序列(可选)4.目标的播放帧率(可选)SpriteSheet 格式SpriteSheet 是一个对象，由2个必须属性(images 和 frames)，以及2个可选属性(framerate 和 animations)。以javascript代码 或 json定义images源图像数组。图像可以是 'HTMLimage' 实例，或图像url链接。前者建议使用 '预加载'images: [image1, '/xxx/images/xx.png']frames定义各个帧。支持2种形式的帧数据。1.当所有帧大小一样(在一个网格内)，可以使用对象格式定义，witdth, height, regX, regY, count 属性。width&height - 必须，指定帧大小regX&regY - 表示帧的注册点或 '原点'spacing - 表示帧之间的间隙margin - 表示图像周围的边距count - 指定 '精灵表单' 的帧的总数。如果省略，将基于源图像和帧的尺寸来计算。帧将根据其在源图像的位置来分配索引。(从左到右，从上到下)frames: {width: 64, height: 64, count: 20, regX: 32, regY: 64, spacing: 0, margin: 0}2.当帧具有不同尺寸时，使用数组来定义帧。每个帧一个数组，4个必须和3个可选元素。按下面顺序：首先4个必须元素：x, y, width, height，定义帧的矩形形状第5个元素：imageIndex，指定源图像的索引(默认是0)最后2个元素：regX, regY，指定帧的注册点frames: [// x, y, width, height, imageIndex, regX, regY[64, 0, 96, 64],[0, 0, 64, 64, 1, 32, 32],]animations可选。对象格式，定义帧序列，播放指定的动画。每个属性对应同名的动画。每个动画必须指定要播放的帧，还可以包括相对播放速度(例如：2-以2倍速度播放，0.5-以0.5倍速度播放)，以及播放完成后，下一个要播放的动画名称(next元素表示)支持3个定义方法，可按需要混合使用：1.单个帧动画：animations: {sit: 7  }2.对于连续帧的动画，可以使用一个数组，包含两个必需元素和两个可选元素，依次为：start, end, next, speed。这将从开始到结束，播放帧。animations: {// start, end, next, speedrun: [0, 8],        // 跑的动画jump: [9, 12, 'run', 2],   // 跳，以2倍速度}3.对于不连续的帧，可以使用一个对象，包含 'frames', 'next', 'speed' 属性。frames 属性，是一个顺序播放的帧索引的数组。animations: {walk: {frames: [1, 2, 3, 3, 2, 1]},shoot: {frames: [1, 4, 5, 6],next: 'walk',speed: 0.5,}}framerate可选。表示每秒播放帧的个数。可查看 'framerate' 了解更多相关信息framerate: 20注意：framerate只有当 使用 'Ticker' 的 'tick' 事件，来触发 'stage' 更新后才生效。createjs.Tiker.addEventListener('tick', handleTick);function handleTick(event){stage.update(event);}示例：定义一个简单的 '精灵表单'，使用一个简单图像 'sprites.jpg' 在一个规则的50x50的网格内，包含3个动画：'stand' - 显示第一帧，'run' - 循环播放索引为 1-5 帧(其实就是第2帧-第6帧)，'jump' - 6-8帧，序列完毕后再执行 'run'var data = {images: ['sprites.jpg'],frames: {width: 50, height: 50},animations: {stand: 0,run: [1, 5],jump: [6, 8, 'run'],}};var spriteSheet = new createjs.SpriteSheet(data);var animation = new createjs.Sprite(spriteSheet, 'run');生成 '精灵表单' 图像可以手动在 'PhotoShop' 来合成，指定帧的大小和坐标。然而，有很多工具更好用：1.从 'Adobe Flash/Animation' 导出支持 'EaselJS SpriteSheet' 格式 的 '精灵表单' 或 HTML5内容。2.Texture Packer 支持 'EaselJS'(https://www.codeandweb.com/texturepacker/easeljs)3.使用 'Zoe' 可以导出 Adobe Flash/Animation 的 SWF动画(http://createjs.com/zoe)图像跨域问题(这是js自身问题，博客已经写过好多了，这里不介绍了)加载跨域图像时，会产生报错在传递图像给 EaselJS 之前，可设置图像的 'crossOrigin' 属性，或者在 'PreloadJS' 的加载队列和加载条目上，设置 'crossOrigin' 属性。var images = new Image();image.crossOrigin = 'Anonymous';image.src = 'http://xx/image/image.jpg';8.Sprite从 'SpriteSheet' 实例，显示一帧或帧序列(即动画)。精灵表单是将一系列图像(通常是动画帧)在一个规则的网格上合并为一张图片。例如：8张100x100的图像组成的公话，可以合并到一个 400x200 的精灵表单上(4帧2行)。我们可以显示单个帧，播放多个帧作为一个动画，甚至将多个动画组合在一起。查看 'SpriteSheet' 类来了解更多设置帧和动画的相关信息。示例：var instance = new createjs.Sprite(spriteSheet);instance.gotoAndStop('frameName');直到调用了 'gotoAndStop' 或 'gotoAndPlay' 方法，不然仅仅显示 '精灵表单' 的第一帧9.SpriteSheetBuilderSpriteSheetBuilder 允许我们在程序运行时，根据任何显示对象来生成 'SpriteSheet' 实例。这样就允许我们将我们的组件作为矢量图形(但更小尺寸)，并且运行时，将这些组件渲染为 '精灵表单'，更好的性能。可以同步或异步来构建 '精灵表单'，以异步方式构建，生成大的 '精灵表单' 时，不会阻塞UI的渲染。注意：用于生成 '精灵表单' 的图像，实际上是 canvas元素，并且会被调整到最大宽度或最大高度的最接近的2的幂次方。10.SpriteSheetUtilsSpriteSheetUtils类是一个静态方法的集合，同 'SpriteSheets' 一起工作。精灵表单是将一系列图像(通常是动画帧)在一个规则的网格上合并为一张图片。例如：8张100x100的图像组成的公话，可以合并到一个 400x200 的精灵表单上(4帧2行)。SpriteSheetUtils类使用一个静态接口，并且不应该被实例化。11.Bitmap位图代表显示列表的一个image、canvas或video。可以使用一个已存在的HTML元素或字符串来实例化一个位图。示例：var bitmap = new createjs.Bitmap('http://xxx/images/image.jpg');注意：1.当使用video源，可能循环或检索，使用 'VideoBuffer' 对象来阻止闪烁2.当使用字符串路径或图片标签时，资源还未加载，在资源显示前，可能需要重绘 'stage'3.使用SVG源的位图，目前不遵从 'alpha' 的值，只能是0或1。为了解决这个问题，可以缓存位图4.使用SVG源的位图，当加载跨域数据时，会污染canvas，将会中断交互。这个问题，目前会发生在除了火狐的其他浏览器上。5.图片跨域会发生报错12.BitmapText使用定义在 '精灵表单' 的位图符号来显示文本。可通过换行(\n\r)字符，来支持多行文本，但不支持自动换行。查看 'spriteSheet' 属性获取关于定义字形的更多信息13.BitmapCacheBitmapCache 是所有的缓存属性和需要的逻辑的一个内部表示，用于缓存一个对象。该信息和功能过去位于 'DisplayObject' 的 'cache' 方法，现在独立为一个类。有点不好翻译，暂停。。。14.Text在显示列表上显示一行或多行动态文本(用户不可编辑)。支持自动换行(通过行宽)，也可通过 '空格' 或 'tab' 来换行。注意，作为一种替代文本，我们可以定位HTML文本在画布上方或者下方，相对于显示列表的元素，通过使用 'DisplayObject' 的 'localToGlobal' 方法，或使用 'DOMElement'注意：Text类不支持HTML文本，并且一次只能显示一种字体。如果想使用多个字符，需要创建多个text实例，然后手动定位他们示例：var text = new createjs.Text('Hello World', '20px Arial', '#ff7700');text.x = 100;text.textBaseline = 'alphabetic';CreateJS Text类支持Web字体(同canvas规则一致)。在文本显示之前，浏览器必须支持该字体，并预先已加载注意：生成文本比较消耗性能，因此尽可能使用缓存。注意，并非所有的浏览器完全一致的渲染文本(渲染可能不太一致)。15.Graphics - 图形类'Graphics' 类公开了一个易于使用的API，用于生成矢量绘图指令，并将其绘制到指定的上下文中。注意，我们可以使用 'Graphics'，而不依赖EaselJS框架，通过直接调用 'draw'，也可以使用 'Shape' 对象绘制矢量图形，在EaselJS显示列表的上下文环境内。有2种方法来使用 'Graphics' 对象：1.调用 'Graphics' 实例上的方法(Graphics API)2.实例化 Graphics 命令对象，并通过 'append' 方法将实例化的命令对象，添加到 graphics 队列。方法1比方法2抽象，简化了开始和结束路径，填充以及描边。var g = new createjs.Graphics();g.setStrokeStyle(1);g.beginStroke('#000000');g.beginFill('red');g.drawCircle(0, 0, 30);Graphics 的所有绘画方法，返回 'Graphics' 实例，因此可以链式调用。例如：下面代码生成 '绘制一个红色边框，蓝色填充的矩形' 指令。var g = new createjs.Graphics();g.beginStroke("red").beginFill("blue").drawRect(20, 20, 100, 50);每个 Graphics API 调用，产生一个命令对象(看下面代码)。可以用过 'command' 属性来获取最后一个创建的命令。(类似数据库最后插入的id...)var g = new createjs.Graphics();var fillCommand = g.beginFill('red').command;// 之后，可更新填充颜色fillCommand.style = 'blue';// 或者，可更改为一个 bitmap 填充fillCommand.bitmap(myImage);为了更直接地控制渲染，我们可以直接将命令对象实例化并添加到 graphics 队列中。在这种情况下，需要我们手动管理创建的路径，以确保 填充/描边 应用到指定的路径上。var g = new createjs.Graphics();// 开启一个新路径。Graphics.beginCmd 是一个可重用的 'BeginPath' 实例g.append(createjs.Graphics.beginCmd);// 在应用填充前，需要定义路径(圆形)var circle = new createjs.Graphics.Circle(0, 0, 30);g.append(circle);// 填充我们刚才定义的路径var fill = new createjs.Graphics.Fill('red');g.append(fill);可以将这些方法一起使用，例如插入自定义命令：var g = new createjs.Graphics();g.beginFill('red');var customComand = new CustomSpiralCommand(etc);g.append(customComand);g.beginFill('blue');g.drawCircle(0, 0, 30);微型APIGraphics 类也包含一个 '微型API'，对于 Graphics 的所有方法，都有一个对应的 一个或2个字母 的简写方法。对于创建紧凑指令时，非常棒！并且可以通过 CreateJS工具包来生成更好可读性的代码(可能会将简写方法替换为原方法)。所有这些微型方法都被标记为 'protected'。缩写 - 原方法mt - moveToa/at - arc/arcTo...(看文档)简写方法示例：var g = new createjs.Graphics();g.s('red').f('blue').r(20, 20, 100, 50);16.Graphics.Arc绘制一段圆弧，根据：圆心、半径、开始角度、结束角度、逆时针方向17.Graphics.ArcTo绘制一段圆弧，根据：2个坐标点，以及半径18.Graphics.BeginPath开始一个新路径19.Graphics.BezierCurveTo绘制一条 Bezier 曲线(贝塞尔曲线)20.Graphics.Circle绘制一个圆21.Graphics.ClosePath关闭当前路径。在设置填充或描边前，从当前绘图点到第一个绘图点，有效地绘制一条线。22.Graphics.Ellipse根据指定宽、高绘制一个椭圆23.Graphics.Fill使用指定颜色，开始填充24.Graphics.LineTo从当前绘图点绘制一条线到指定位置，指定位置将成为新的当前绘图点。注意：必须在第一次调用 'lineTo' 前，调用 'moveTo'。25.Graphics.MoveTo移动绘图点到指定位置26.Graphics.PolyStar如果pointSize大于0，则绘制一个星形；如果pointSize为0，则绘制一个规则的多边形，并显示指定的点数。 例如，下面的代码将绘制一个以(100, 100)为中心，半径为50的熟悉的五角星var g = new createjs.Graphics();g.beginFill('#ff0').drawPolyStar(100, 100, 50, 5, 0.6, -90);27.Graphics.QuadraticCurveTo基于控制点(cpx, cpy)，绘制从当前绘图点到(x, y)的二次曲线28.Graphics.Rect在(x, y)点处，使用当前填充或描边，绘制一个指定宽、高的矩形29.Graphics.RoundRect绘制一个具有不同角半径的圆角矩形。支持正、负角半径。30.Graphics.Stroke使用指定颜色开始描边31.Graphics.StrokeDash设置或清除笔画(描边？？)虚线模式32.Graphics.StrokeStyle设置描边样式。同所有绘画方法一样，该方法也可以链式操作，因此可以在一行代码中定义描边的样式和样色，例如：var g = new createjs.Graphics();g.setStrokeStyle(8,"round").beginStroke("#F00");33.Filter所有滤镜应该继承的基类。滤镜应该用于已经使用缓存方法缓存过的对象上。如果对象改变，请再次缓存，或使用 'updateCache'。注意：滤镜必须在缓存前应用！示例：myInstance.filters = [new createjs.ColorFilter(0, 0, 0, 1, 255, 0, 0);new createjs.BlurFilter(5, 5, 10);];myInstance.cache(0, 0, 100, 100);注意：每个滤镜都可以实现 'getBounds' 方法，该方法返回滤镜作用的边界。例如：'BlurFilter' 会使对象向外羽化，从而在形状周围形成一个边界。EaselJS内置的滤镜有：AlphaMapFilterAlphaMaskFilterBlurFilterColorFilterColorMatrixFilter34.AlphaMapFilter35.AlphaMaskFilter36.BlurFilter37.ColorFilter38.ColorMatrixFilter39.ColorMatrix40.ButtonHelperButtonHelper 是一个帮助类，用于从 'MovieClip' 和 'Sprite' 实例创建交互式按钮。该类将拦截来组对象的鼠标事件，并自动调用 'gotoAndStop' 或 'gotoAndPlay' 方法到相应的动画标签，添加一个手型光标，并允许用户定义一个命中状态帧。ButtonHelper 实例不需要添加到 'stage'，但是应该保留一个引用，来防止被垃圾回收。注意：除非调用 'enableMouseOver'，否则 (over states)过度状态将不起作用示例：var helper = new createjs.ButtonHelper(myInstance, 'out', 'over', 'down', false, myInstance, 'hit');myInstance.addEventListener('click', handleClick);function handleClick(event){// 处理 click 事件}41.Matrix2DMatrix2D 表示仿射变换矩阵，并提供用于构造和连接矩阵的工具矩阵可以被形象化为：[a c txb d ty0 0 1 ]注意b 和 c的位置42.MovieClipMovieClip 类将TweenJS时间线与EaselJS容器关联。允许我们创建封装时间轴动画，状态更改和同步操作的对象。从0.7.0版本后，MovieClip类已包含在EaselJS的压缩文件中。目前 MovieClip 仅基于tick可以正常工作(不能基于时间正常工作)，未来可以基于时间工作。示例：这个例子呈现两个形状往返运动。灰色形状从左侧开始，但我们使用 'gotoAndPlay' 跳转到动画的中点var stage = new createjs.Stage('demo');createjs.Ticker.addEventListener('tick', state);var mc = new createjs.MovieClip({loop: -1, labels: {myLabel: 20}});stage.addChild(mc);var child1 = new createjs.Shape(new createjs.Graphics().beginFill('#999999').drawCircle(30, 30, 30););var child2 = new createjs.Shape(new createjs.Graphics().beginFill('#5a9cfb').drawCircle(30, 30, 30););mc.timeline.addTween(createjs.Tween.get(child1).to({x: 0}).to({x: 60}, 50).to({x: 0}, 50););mc.timeline.addTween(createjs.Tween.get(child2).to({x: 60}).to({x: 0}, 50).to({x: 60}, 50););mc.gotoAndPlay('start');建议使用 tween.to() 来动画和设置属性()，tween.wait() 方法在动画之间创建延迟。注意：使用 tween.set() 方法来设置属性，可能不会达到我们预想的结果。43.MovieClipPluginMovieClipPlugin 插件同 TweenJS 一起工作，以防止 tweening 的 'startPosition' 属性。44.TikerTiker在特定的时间间隔内，提供集中的tick或心跳广播。监听者可以注册tick事件，当到达指定的时间间隔，会被通知。注意：tick事件的时间间隔是一个目标时间间隔，当在高CPU负载下，可能会广播延迟。Tiker 类使用一个静态接口(例如：Ticker.framerate = 30)，并且不能被实例化。示例：createjs.Ticker.addEventListener('tick', handleTick);function handleTick(event){// 每个tick执行的行为if(!event.paused){// 当tick未暂停时，执行的行为}}(应该就是js计时器，对其做了更多控制，而且集中式管理？？)45.UID用于生成顺序唯一ID号的全局用程序。UID类使用一个静态接口(例如UID.get())，且不应该被实例化示例：UID.get();46.VideoBuffer当搜索HTML video时，包括video循环时，在一个新帧可用前，有一个不确定的时期。这被渲染到canvas时，会导致video闪烁。VideoBuffer 类通过绘制每个帧到屏幕外的一个canvas上，同时在搜寻video期间保留上一帧，来解决闪烁问题。var myBuffer = new createjs.VideoBuffer(myVideo);var myBitmap = new Bitmap(myBuffer);47.Event事件对象，包含由 'EventDispatcher' 使用的在所有事件中共享的属性和方法。注意：事件对象通常会被重用，所以不应该在事件调用外部，依赖事件对象的状态。48.EventDispatcherEventDispatcher 提供了管理事件监听器队列和分发事件的方法。，我们可以来扩展 'EventDispatcher'，也可以使用 'EventDispatcher' 的 'initialize' 方法，将 'EventDispatcher' 的方法混合到现有的原型或实例中。与CreateJS Event类一起，EventDispatcher提供了一个基于DOM Level 2事件模型的扩展事件模型，其中包括 addEventListener,removeEventListener,dispatchEvent。支持 bubbling/capture,preventDefault,stopPropagation,stopImmediatePropagation,handleEvent。EventDispatcher 也暴露了一个 'on' 方法，使得创建有作用域的监听器、只运行一次的监听器、关联任意数据的监听器更加容易。'off' 方法仅仅是 removeEventListener' 的别名。针对 DOM Level 2事件模型的另一个补充是 'removeAllEventListeners' 方法，该方法可用于所有事件的侦听器，或特定事件的侦听器。'Event' 对象也包含一个删除方法，可删除所有激活状态的监听器。示例：1.将 'EventDispatcher' 功能添加到 'MyClass' 类EventDispatcher.initialize(MyClass.prototype);2.添加一个事件(查看 'addEventListener')instance.addEventListener('eventName', handlerMethod);function handlerMethod(event){// 事件处理}3.保持合适的作用域作用域(即：this)对于事件是个挑战。使用 'on' 方法来订阅事件，简化了这点。instance.addEventListener('click', function(event){console.log(instance == this);        // false，作用域不明确});instance.on('click', function(event){console.log(instance == this);        // true，'on' 方法默认使用 'dispatcher' 的作用域});如果想使用 'addEventListener' 方法来替代，可能需要使用 function.bind() 或 相似的代理来管理作用域浏览器支持：CreateJS中的事件模型可以在任何项目中，与CreateJS套件分开使用，但继承模型需要现代浏览器(IE9+)(意思就是：觉得CreateJS的事件模型好，我们也可以只使用CreateJS的事件模型到其他项目中)49.MouseEvent作为参数传递给所有 mouse(鼠标)/pointer(指针)/touch(触摸) 相关的事件。有关 mouse 事件及其属性的列表，查看 'DisplayObject' 和 'Stage' 事件列表50.Touch在 EaselJS 中，支持多点触控设备的全局应用程序。目前支持 W3C Touch API(IOS和现代安卓浏览器)和指针API(IE)，包括IE10中的MS前缀事件，以及IE11的无前缀事件。确保当清除应用程序时，禁用touch。不需要检查touch是否被支持来启用touch，如果不支持，则以优雅的方式启动失败示例：var stage = new createjs.Stage('canvas');createjs.Touch.enable(stage);注意：当不再使用 'stage'，则禁用touch，这很重要！createjs.Touch.disable(stage);51.DOMElement该类仍在实验阶段，更多高级用法可能会导致bug。发现bug请报告。52.DisplayObjectDisplayObject 是一个抽象类，不应该直接通过构造函数实例化。而应该通过它的子类构建，例如：Container,Bitmap,Shape。DisplayObject 是 EaselJS 库中所有显示类的基类。它定义了所有显示对象之间共享的核心属性和方法，例如：转换属性(x,y,scaleX,scaleY等)、缓存、mouse handlers(鼠标处理程序)。53.DispalyProps用于计算和封装，与显示相关的属性54.EaselJSEaselJS 是一个静态类，可获取类库的具体信息，例如：库的版本、构建日期等。55.Utility Methods工具方法deprecate()extend()indexOf()promote()56.StageGLStageGL实例是WebGL优化的显示列表的根级容器，用于替代通常的Stage。 除了特定于WebGL的功能之外，这个类应该和Stage相同。57.WebGLInspectorWebGLInspector 是设计用于同 StageGL 一起使用的工具和帮助类，来帮助调查、测试性能或显示问题。它包含行为分析的日志功能和性能测试工具。
CreateJS-EaselJS文档翻译相关推荐

入门createjs———EaselJS模块基本介绍
EaselJS模块 EaselJS的官方地址 http://www.createjs.com/#!/EaselJS(国内打开比较慢,所以可以....) 下面也为了方便大家提供了个人的地址: Easel ...
把Illustrator矢量图转化为代码:Drawscript
2019独角兽企业重金招聘Python工程师标准>>> DrawScript是一款Illustrator插件,可以将Illustrator的矢量图片转换成代码,目前免费,支持转换的语 ...
2018个人年终总结
=====我的2018===== 2018-12-30 又到年末了,说到年末,一般会有两种理解,新历的和旧历的. 我们的上一辈中,还会将旧历作为日常使用,我们这一辈估计已经大多生活在新历中了. 我自己 ...
Html5游戏框架createJS组件--EaselJS
CreateJS库是一款HTML5游戏开发的引擎,是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低HTML5项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验. 掌 ...
canvas 动画库 CreateJs 之 EaselJS（上篇）
本文来自网易云社区作者:田亚楠须知本文主要是根据 createjs 中的 EaselJS 在 github 上的 tutorials 目录下的文章整理而来 (原文链接),同时也包含了很多本人的理 ...
如何使用Createjs来编写HTML5游戏（三）使用EaselJS中的制作Sprite类制作
一,使用Sprite制作动画动画的制作原理据说是由于人的视觉残留效应,连续播放一系列的静止图片,即可获得一段动画,每张图片可以称作动画的一帧,可以参考Gif动画的原理.在EaselJS中,提供了一 ...
如何使用Createjs来编写HTML5游戏（八）通过继承扩展EaselJS中的基础元素
从我第一天了解到javascript开始,就听说在这里是没有类的.其实一开始我是沮丧的,尽管我并不知道有没有"类"对编程究竟有多大影响,不过有缺憾总是让人感觉遗憾,哪怕这是一个你可 ...
如何使用Createjs来编写HTML5游戏（二）使用EaselJS处理图片
如何使用EaselJS载入图片并进行简单的处理除了使用EaselJS中的Shape()来创建图形,EaselJS中还提供Bitmap可以很方便的载入图片,同Shape一样只需要创建一个Bitmap实 ...
canvas 动画库 CreateJs 之 EaselJS（下篇）
本文来自网易云社区作者:田亚楠继承对应原文:Inheritance 我们可以继承已有的「显示对象」,创建新的自定义类.实现方法有很多种,下面介绍其中之一. 举例:实现一个继承于 Containe ...
createjs之Easeljs
Easeljs是什么 easeljs是在HTML5构建高性能2D交互的库,它提供了功能丰富的显示列表去允许你操作以及设置动画于图形.同时它对于鼠标以及移动端触摸交互提供了强劲的交互模型. 它在构建游戏 ...
CreateJS-EaselJS文档翻译

CreateJS-EaselJS文档翻译相关推荐

最新文章

热门文章
