易于使用的跨平台canvas 绘图解决方案——SpriteJS

纯洁的微笑 2019-05-23 16:15:15 ⋅ 353 阅读

https://www.toutiao.com/a6693865670699909646

简介

sprite.js 是跨平台的2D绘图对象模型库,它能够支持web、node、桌面应用和微信小程序的图形绘制和实现各种动画效果,它是由360奇舞团开发的。

官网截图

官方地址和码云

官网:http://spritejs.org/#/

码云:https://gitee.com/qihoo360/spriteJS

Sprite.js的特点

  • 像操作DOM对象一样操作画布上的图形元素

  • 通过智能缓存大大提升渲染性能

  • 支持多图层处理图形、文本、图像渲染

  • 支持DOM事件代理、自定义事件派发

  • 使用ES6+语法和面向对象编程

  • 结构化对象树,对d3引擎友好,能够无缝使用

  • 支持布局和文字排版

  • 支持直接使用文档中的CSS

  • 支持服务端渲染

  • 支持微信小程序

  • 支持Vue

  • 支持React

安装

安装方式很常规,提供三种方式

  • 使用npm包管理

npm install spritejs

  • 在node环境下使用

注意:因为sprite.js是跨平台的,所以可以在node环境下跑,但是需要提前安装好node-canvas

npm install canvas@next

Linux服务器可能需要安装的(然后在安装node-canvas)

sudo apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++

  • 浏览器端直接引入(cdn或者下载到本地)

<script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>

  • 小程序使用

如果你在小程序中使用,你可以直接下载打包好的小程序版本,或者从项目源码编(到官网查看详情)

spritejs架构

spritejs提供四类基础精灵元素、图层管理和负责协调多个图层的场景(Scene),类此外提供一些简单的辅助工具。

架构

基本用法


以下是一个来自官网的最基础的例子,还有很多实例

const {Scene, Sprite} = spritejs

const scene = new Scene('#demo-quickStart', {viewport: ['auto', 'auto'], resolution: [3080, 800]})

const layer = scene.layer()

const robot = new Sprite('https://p5.ssl.qhimg.com/t01c33383c0e168c3c4.png')

robot.attr({
anchor: [0, 0.5],
pos: [0, 0],
})

robot.animate([
{pos: [0, 0]},
{pos: [0, 300]},
{pos: [2700, 300]},
{pos: [2700, 0]},
], {
duration: 5000,
iterations: Infinity,
direction: 'alternate',
})

layer.append(robot)

结果如下图是一个移动的机器人(官网实例可在线运行)

在线运行的实例

  • 提供的用法

基础用法

高级用法

具体内容参考官网文档,文档非常详细

总结

本文介绍的是sprite,类似的还有Annie2x和CreateJS,可以根据需要选择一个适合自身项目需求的,比自己单独从最底层开始写要快得多,希望对你有所帮助,感谢支持

---------------END----------------

后续的内容同样精彩

长按关注“IT实战联盟”哦




全部评论: 0

    我有话说:

    SpringBoot2.0填坑(一):使用CROS解决域并解决swagger 访问不了问题

    公司后是采用SpringBoot2.0 搭建微服务架构,前端框架用是vue 使用前后端分离开发方式,在开发联调时候需要进行域访问,那么使用CROS解决域问题,但是swagger 却用

    「精品推荐」优秀Redis可视化客户端工具—RedisViewer

    自荐RedisViewer一个有情怀Redis可视化客户端工具

    GeoGebra 6.0.606.0 发布,绘图神器

    Geogebra 是动态数学软件,它将几何、代数、电子表格、绘图、统计和微积分集成在一个易于使用软件包中。 GeoGebra 6.0.606.0 版本现已发布,具体更新内容如下: 符号输入框:为

    Spring Boot 解决域问题 3 种方案

    或百度一下,能搜出一大片解决方案,那么为啥又要写...

    DDDplus 1.0.2 发布,轻量级业务中开发框架

    DDDplus 简介 一套轻量级业务中开发框架,以DDD思想为本,致力于业务资产可沉淀可传承,全方位解决复杂业务场景扩展问题,实现中核心要素,赋能中建设。 融合了前中复杂生态协作方法论

    【重磅】微软正式宣布 .NET5支持、移动开发

    前言近期微软正式宣布 .NET Core 3.0 之后下一个版本将是 .NET 5 。

    Git托管拉取请求

    拉取请求是Bitbucket一个特性(经调查,Gitlab、Github都支持这个特性),可以让开发人员协作更加容易,他们提供了一个友好网页界面让开发者在集成代码到正式库之前对其进行讨论

    「轻阅读」移动端事件穿透原理与解决方案

    本文将带你了解事件穿透及如何在实际项目中选择合适方案解决事件穿透问题。

    JetLinks 物联网基础 1.6 RELEASE 发布

    JetLinks 开源物联网 JetLinks 基于Java8,Spring Boot 2.x,WebFlux,Netty,Vert.x,Reactor等开发, 是一个开箱即用,可二次开发企业

    「开源资讯」Atom 1.52.0 和1.53.0-beta0发布,平台文本编辑器

    Atom 同时发布了 1.52.0 和 1.53.0-beta0 版本。Atom 是 GitHub 专门为程序员推出一个平台文本编辑器。具有简洁和直观图形用户界面,并有很多有趣特点:支持

    移动Web实战篇-使用CSS Sprites减少你页面http请求

    用户新打开一个网页80%时间耗费在加载网页内容方面。很多炫酷网页往往通过图片来展现给用户,那么页面每加载一张图片就是一个http请求,如果图片过多会严重影响图片渲染速度。

    KubeVela 1.0:开启可编程式应用未来

    作者 | KubeVela 项目维护者来源 | 阿里巴巴云原生公众号 作为 OAM(Open Application Model)在 Kubernetes 上实现,KubeVela 项目

    能够替代 Jenkins 13个解决方案,了解下!

    Jenkins 是目前最常用持续集成工具,拥有近 50% 市场份额,它还是很多技术团队第一个使用自动化工具。但是随着自动化领域持续发展,Jenkins 逐渐暴露出了一些问题,例如缺乏功能

    Spring Cloud快速搭建开放平台解决方案

    基于Spring Cloud开放平台解决方案 SOP

    Fes.js v0.4.1 版本发布,一套优秀中后台系统前端解决方案

    Fes.js 是一套优秀中后台前端解决方案。提供初始项目、开发调试、Mock接口、编译打包命令行工具。内置布局、权限、数据字典、状态管理、存储、Api等多个模块。以约定、配置化、组件化设计思想

    Shotcut 21.01.29 发布,平台视频编辑器

    Shotcut  21.01.29 已经发布。 Shotcut 是一款免费、开源、视频编辑器,适用于 Windows、Mac 和 Linux。主要功能包括支持多种格式

    「轻阅读」亿级用户分布式数据存储解决方案

    分布式数据库和分布式存储是分布式系统中难度最大、挑战最大,也是最容易出问题地方。互联网公司只有解决分布式数据存储问题,才能支撑更多次亿级用户涌入。

    微信小程序页面通信解决思路

    为大家列举三种比较常用方案~

    SQLiteStudio 3.3.0 发布,时隔三年更新

    在经过近 3 年时间之后,SQLiteStudio 3.3.0 版本现已发布。SQLiteStudio 是一个 SQLite 数据库管理工具,采用 Tcl 语言开发