fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

sprite.js
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:http://spritejs.org
GitHub:https://github.com/spritejs/spritejs
网站描述:由360奇舞团开源的跨终端 canvas 绘图框架

sprite.js 是跨平台的2D绘图对象模型库,它能够支持web、node、桌面应用和微信小程序的图形绘制和实现各种动画效果。sprite.js基于 canvas 快速绘制结构化 UI、动画和交互效果,并发布到任何拥有canvas环境的平台上(比如浏览器、小程序和node)。  


快速开始

一个应用可以有多个场景,每个场景可以有多个图层,每个图层上可以有多个元素  
// 导出你要用到的对象
const { Scene, Sprite, Label } = window.spritejs;
// 初始化场景scene,它不是canvas,只是一个用来包裹canvas的div元素
this.scene = new Scene('#myCanvas', {
  viewport: ['auto', 'auto'],
  resolution: [750, 1008],
  stickMode: 'top'
});
// 创建背景图层layer,这个就是真正意义上的canvas了
this.bglayer = this.scene.layer('bg'); // bg 只是图层的别名,可以理解为canvas的id


下面以精灵Sprite为例

// 1.创建Sprite
const s = new Sprite('http://xxx.com/a.png');
// 2.设置属性,精灵的属性等同于css3的样式,很好理解
s.attr({
  anchor: [0.5, 0.5], // 锚点,你可以理解为css3中的transform-origin
  pos: [0, 0], // 位置,最大为 750 * 1008 也就是场景的大小
  size: [100, 100], // 大小,默认为图片的宽高
  scale: [0.9, 0.9] // 缩放,默认 1 1
});
// 3.添加到图层
this.bglayer.append(s);
// 4.创建动画
s.animate([
  { x: 100, y: 100 }, // 先运动到 100,100 位置
  { scale: [0.2, 0.2] } // 再缩小到 0.2 0.2
], {
  duration: 2000, // 时间2s
  delay: 1000, // 延时1s后执行
  fill: 'both' // 保留在最后状态
})

如何创建连续的过程动画?

// 先移动到 100,100
await s.animate([
  { x: 100, y: 100 }
], {
  duration: 1000,
  fill: 'both'
}).finished;
// 停顿2s后,缩小到 0.2 0.2
await s.animate([
  { scale: [0.2, 0.2] }
], {
  duration: 1000,
  delay: 2000,
  fill: 'both'
}).finished;

预加载

大家都知道,如果在canvas中直接使用网络图片,会因无法读取到图片大小而绘制失败。一般会先进行预加载,spritejs帮我们封装了预加载方法。  
// 预加载
await this.scenne.preload(
  { id: 'bg', src: 'http://xxx.com/bg.png' },
  { id: 's', src: 'http://xxx.com/s.jpeg' },
)
// 使用
const s = new Sprite('s'); // 这个时候可以使用id来取到图片

总结

  • 像操作dom对象一样操作画布上的图形元素
  • 通过智能缓存大大提升渲染性能
  • 支持多图层处理图形、文本、图像渲染
  • 支持DOM事件代理、自定义事件派发
  • 使用ES6+语法和面向对象编程
  • 结构化对象树,对d3引擎友好,能够无缝使用
  • 支持服务器端渲染和小程序

链接: https://fly63.com/nav/2246

more>>
相关栏目
SVG.js
包括各种形状、线条、文本、路径等元素
官网GitHub
d3.js
基于HTML 和 SVG 的 JavaScript 可视化库
官网GitHub
incubator-echarts
百度团队开发的一款商业级数据图表
官网GitHub
g2
一套基于可视化编码的图形语法
官网GitHub
Chartist.js
JavaScript响应式图表库
官网GitHub
MetricsGraphics.js
一个基于 D3 的简洁的数据图表优化
官网GitHub
plotly.js
基于d3.js 和stack.gl开源的 JavaScript 图表库
官网GitHub
js-sequence-diagrams
一款基于 Javascript 的Web绘制时序图的工具
官网GitHub
C3.js
基于D3.js开发的JavaScript库
官网GitHub
crossfilter
一个数据计算模型,能够很好地结合DC.JS进行数据解析绘图
官网GitHub
Processing.js
擅长创建2D和3D图象,可视化数据套件,音频,视频等
官网GitHub
flowchart.js
基于SVG的流程图插件
官网GitHub
Velocity.js
一个简单易用、高性能、功能丰富的轻量级JS动画库
官网GitHub
popmotion.js
一款小巧,灵活的 JavaScript 运动引擎
官网GitHub
js2flowchart.js
将任何 JavaScript 转换成漂亮的 SVG 流程图的可视化的图表库
点击进入GitHub
jsplumb
一个开源的流程图或拓扑图绘制工具库(绘制页面链接线)
官网GitHub

手机预览