分组 分组 与2D一样，3D扩展支持分组，我们可以创建Group3d元素。 const { Scene } = spritejs ; const { Cube , Sphere , Group3d , shaders } = spritejs . ext3d ; const container = doc...

图片的异步加载 雪碧图 批量资源预加载进度 图片的异步加载 spritejs支持图片URL作为资源，我们前面已经看过，我们可以把URL作为texture直接传给Sprite的texture 属性。但是，因为网络图片资源是异步加载的，这会可能导致sprite的异步显示以及我们拿到的sprite的contentSize为0。 const { S...

使用jsx语法 配置babel 更多参考 使用jsx语法 通过配置babel，spritejs可以使用jsx语法 JSBin const { Group , Path , Scene , Sprite } = spritejs const scene = new Scene ( '#demo-qui...

Shader 和 Pass 后期处理通道 Shader 和 Pass SpriteJSNext在WebGL/WebGL2模式下，可以支持自定义Shader，这样我们就可以创建自定义的渲染模式。 比如我们要想把Path元素的背景填充修改为虚线填充，我们可以自定义Shader实现： const vertex = ` attribut...

路径元素 路径 path 矩形 三角形和平行四边形 折线和多边形 正多边形和星形 圆弧和椭圆弧 圆环 路径元素 SpriteJS Next 的路径元素不同于块元素，块元素更类似于HTML的inline-block元素，而路径元素则更类似于SVG。 路径元素包括以下元素： Arc 圆弧与扇形 Ellipse 椭圆弧与椭圆扇形 Par...

3D 渲染 渲染3D模型 使用几何图形类 3D 渲染 SpriteJSNext提供了3D扩展 ，借助它可以加载并渲染3D模型，这样SpriteJS就可以不借助其他框架和库，独立完成3D渲染。 渲染3D模型 SpriteJSNext的3D扩展基于OGL 。 通过OGL底层，我们可以很方便地渲染出3D模型并与之交互。 const { ...

过渡 Transition 动画 Animate 滤镜 Filter 渐变 Gradient 过渡 Transition 如果我们要给元素增加一些简单的效果，可以通过transition来完成，只要在设置和改变元素的属性前调用transition方法，传入时间和可选的easing参数即可。transition的easing支持css3的easi...

文字 文字 在3D扩展中显示文字也很简单，通过layer的createText方法创建一个文字纹理，然后将它应用到对应的元素上。不过注意的是，显示的宽高比要和文字纹理的宽高比保持一致，以免文字变形。 const { Scene } = spritejs ; const { Plane , shaders } = sprit...

简介 特性 安装和使用 架构 基本用法 简介 sprite.js 是跨平台的2D绘图对象模型库，它能够支持web、node、桌面应用和微信小程序的图形绘制和实现各种动画效果。 特性 像操作DOM对象一样操作画布上的图形元素 通过智能缓存大大提升渲染性能 支持多图层处理图形、文本、图像渲染 支持DOM事件代理、自定义事件派发 使用ES6...

Chrome Devtools扩展 Chrome Devtools扩展 spritejs v2.0提供chrome开发者工具扩展，让使用者能够比较方便地在chrome浏览器调试sprite元素。 该扩展工具的正式版还未发布，可以在此处 获取开发版。 安装了开发者工具后，打开devtools，在Elements面板的Sidebar列表里会多出一...