精灵 Sprite 设置边框和大小 填充背景色 加载图片 文字 Label 路径 Path 分组 Group 精灵 Sprite 在spritejs中，Sprite是最基础的一个类，一个Sprite对象相当于DOM中的一个元素Element。同Element在文档流中一样，Sprite在Canvas画布上占有一个特定的区域。一个Sprit...

Flex 布局 容器属性 flexDirection flexWrap justifyContent alignItems alignContent 元素属性 Flex 布局 感谢 @Winter 同学的支持，现在SpriteJS能够使用Flex布局了。 在Group上可以设置属性display: flex ，开启flex布局。 ...

OBB碰撞检测 OBB碰撞检测 spritejs提供了一个简单的碰撞检测机制，使用的是OBB碰撞检测 算法，可以方便地检测精灵元素之间是否碰撞。 ;( async function () { const birdsJsonUrl = 'https://s5.ssl.qhres.com/static/5f6911b7b...

通用 GPU 通用 GPU 在3D扩展中，除了后期处理通道外，我们还可以给layer加通用GPU通道，这样可以更灵活地利用GPU的高性能实现各种效果。 const vertex = /* glsl */ ` precision highp float ; attribute vec2 coords ; ...

创建Path findPath() getPathLength() getPointAtLength() lineWidth path pathSize SpriteJS使用Path对象绘制矢量图形。Path对象支持svg-path，因此能够很灵活地绘制各种图形。 创建Path Path的构造函数可以接受一个svgpath字符串作为参数...

渲染对象 渲染对象 有时候我们需要多次渲染，比如先将一些内容渲染到FrameBuffer中，然后再输出到屏幕。 在3D扩展中，我们可以使用RenderTarget对象来创建一块可绘制的FrameBuffer。 const vertex = /* glsl */ ` precision highp float ; ...

用D3绘制图表 用D3绘制图表 spritejs拥有与DOM一致性很高的api，可以很方便地与d3 协同工作。 要显示坐标轴，我们可以使用d3扩展库 const scene = new Scene ( '#d3-linear' , { viewport : [ 'auto' , 'auto' ], resoluti...

状态切换 给状态添加 Actions state-change 事件 action:reversable 状态序列 内置状态 enterMode 和 exitMode 状态切换 SpriteJS支持状态的管理。我们可以给元素设置一组states属性，然后再设置一组actions属性，这样就可以对它们进行状态切换。 states是一个对象...

Reflow 机制 Reflow 机制 在2.7之后，SpriteJS采用了新的reflow机制，当元素的attrSize 、contentSize 、clientSize 、originalRect 、originalRect 改变时，框架会对这些属性进行缓存，这样在精灵数量较多的layer中能一定程度上提升渲染性能。 但是，带来的变化是如果扩展...

创建Label text 文字排版 lineBreak wordBreak SpriteJS通过Label对象来显示单行或多行文本。 创建Label Label的构造函数可以接受text作为参数，等价于构造后再设置text属性。 const label = new Label ( 'Hello World' ) label...