阴影 阴影 3D扩展提供了绘制阴影的方法： const { Scene } = spritejs ; const { Camera , Mesh3d , Plane , shaders } = spritejs . ext3d ; const container = document . getEleme...

sprite的缓存机制 自定义缓存策略 Batch Nodes sprite的缓存机制 spritejs在性能方便通过缓存机制来减少绘制工作。 如果我们绘制一个精灵元素，正常需要先渲染它的border、然后是bgcolor，接下来渲染texture、text或者path。如果我们每一次更新显示内容，都需要这么绘制，性能就会比较差，尤其是给较大的...

快照 离屏快照 快照 每个layer有自己的context，如果我们的scene有多个layer，而且我们需要将scene当前绘制结果保存下来时，我们并不需要自己处理每个layer（尽管自己处理也是可以的，通过layer.canvas可以拿到layer的canvas对象）。 SpriteJS Next 提供了一个同步的接口snapshot()，我...

渲染引擎 内存 渲染引擎 SpriteJS Next 支持多引擎，在较新的浏览器中，默认优先采用 webgl2 引擎渲染，如果不支持 webgl2 会降级为 webgl，如果不支持 webgl，会再降级为 canvas2d。 我们也可以通过Scene或者Layer的参数指定渲染引擎。 在与某些第三方库联合使用的时候，我们可能需要根据第三方库的支...

使用BMFont BMFont属性 fontFace text lineHeight letterSpacing textAlign SpriteJS的扩展支持位图字体（Bitmap Font） 使用BMFont 我们可以使用bmGlyph 工具来创建位图字体 将创建的字体导出（导出时选择cocos2d/BMFont格式） 然...

屏幕适配 粘连模式 屏幕适配 与旧版相比，SpriteJS Next 简化了屏幕适配参数。 旧版在构造Scene的时候可以提供viewport和resolution两个参数，而新版不再需要手工指定viewport，而是让viewport跟随着container自适应。 新版只需要指定width/height属性，这两个属性相当于旧版里设置res...

渲染模式 渲染模式 SpriteJSNext支持所有的WebGL渲染模式，我们可以通过设置元素的mode属性来改变它的渲染模式。 mode属性的类型是字符串，可选的值如下： POINTS 以gl.POINTS 模式渲染 LINES 以gl.LINES 模式渲染 LINE_LOOP 以gl.LINE_LOOP 模式渲染 LINE_STRIP 以g...

用D3绘制图表 用D3绘制图表 SpriteJS Next 拥有与DOM一致性很高的api，可以很方便地与d3 协同工作。 下面是几个使用 d3 的例子： 柱状图： 层次图： 力导向图： 地图：

dataset data() 除了给sprite元素设置属性外，SpriteJS提供了设置数据到sprite元素上的方法。 dataset 我们可以直接通过元素的dataset属性设置数据。 data() 如果要批量设置数据，我们也可以通过.data() 方法。

创建Sprite textures cache SpriteJS里，精灵Sprite是一个拥有盒模型的可渲染对象。SpriteJS默认支持的精灵类型有四种，分别是Sprite、Label、Path和Group。Sprite是最基础的精灵。 创建Sprite Sprite的构造函数可以传一个图片URL，这样将使用该图片创建Sprite。 如...