BonsaiJS 轻量级的 JavaScript 图形库 - 文章教程

BonsaiJS 轻量级的 JavaScript 图形库

发布于 2019-08-05 字数 6193 浏览 1924 评论 0

BonsaiJS 是一个轻量级的 JavaScript 图形库,提供直观的图形 API 和 SVG 渲染器,使用非常的方便,官方提供了大量的帮助文档和使用案例,动画执行运行流畅不卡顿。

BonsaiJS 轻量级的 JavaScript 图形库

主要特性

  • 架构分离的运行器和渲染器
  • iFrame, Worker and Node 运行上下文
  • Paths
  • Assets (Videos, Images, Fonts, SubMovies)
  • Keyframe and time based animations (easing functions too)
  • Path morphing

快速入门

Draw a 100×200 rectangle to the stage at {0,0}:

var r = new Rect(0, 0, 100, 200).addTo(stage);

Fill it:

r.fill('blue');

Change your mind… Make it darker:

r.fill(color('green').darker());

Animate it:

r.animate('400ms', {
  x: 50,
  y: 50,
  width: 200
});

使用 BonsaiJS 播放电影

使用构建版本BonsaiJS:

<div id="movie"></div>
<script src="bonsai.js"></script>
<script>
  bonsai.run(
    document.getElementById('movie'),
    'path/to/my_movie.js',
    {
      // Extra config
      width: 500,
      height: 400
    }
  );
</script>

高级可选参数

  • width:Number – Width of movie in pixels
  • height:Number – Height of movie in pixels
  • framerate:Number – Framerate of movie (FPS)
  • url:String – URL to be loaded [usually passed as second arg to bonsai.run()]
  • urls:String[] – URLs to be loaded (multiple)
  • plugins:String[] – Plugins to be loaded (multiple)
  • baseUrl:String – Base URL for loading movie URLs and plugins
  • assetBaseUrl:String – Base URL for assets loaded within movies/plugins (defaults to baseUrl)

结构和术语

在这里,我们勾勒BonsaiJS结构和术语。

术语

  • Bootstrapper: The general name given to the code that initiates the RendererController and the RunnerContext, enabling them to communicate.
    • Player: The exposed API on the parent page. It will initiate the RendererController, which will, in turn, initiate the relevant RunnerContext (iframe or worker).
    • RunnerContext: The context where the runner runs. The RunnerContext creates this context. This is either an iframe or a worker.
    • [part of RunnerContext] RunnerContext creator: Creates the context. E.g. creates an <iframe>.
    • [part of RunnerContext] RunnerContext bootstrap: Initiating logic within context. Provides way to load files/scripts/sub-movies within the context.
  • RendererController: Initiates and controls the RunnerContext and the Renderer.
  • Renderer: The actual renderer. E.g. the SVG renderer.
  • Runner: The actual runner, i.e. the bonsai stage and the bonsai API. The runner is what runs the actual movie file(s).

Responsibilities

_dev/build loaders

  • [Name needs to be decided — it’s currently confusing]
  • This file is loaded in the parent page and within the context (iframe/window)
  • It provides IF branches for dealing with each of those environments. In the parent env it sets up the player and requests RunnerContext-creation script (in dev mode). In the context env it requires the relevant RunnerContext bootstrap file and runs it.

RunnerContext creator

  • Must provide init and destroy methods
  • Must provide load method (accepting url parameter for loading movie/plugin scripts): This method should fire a loadScript message to the accompanying bootstrap.
  • Must provide run method (accepting code parameter for running inline movie/plugin code): This method should fire a runScript message to the accompanying bootstrap.

RendererController

  • Initiates [but does not instantiate] the RunnerContext
  • Responsible for passing messages between the renderer and the runner context. It acts as a proxy between:
    • AssetController <-> Renderer
    • RunnerContext <-> Renderer

RunnerContext bootstrap

  • Module must be a function: called by _dev/_build iframe/worker
  • Must instantiate a Stage
  • Must provide stageInstance.loadSubMovie
  • Must listen for and process runScript message
  • Must listen for and process loadScript message [synchronous — order is relevant]

项目结构

bonsai/
  src/
    asset/           (asset loaders/handlers used between Runner and Renderer)
    bootstrapper/    (files related to bootstrapping, i.e. context creators/bootstrap)
    renderer/        (files related to the renderers)
      svg/
    runner/          (the actual runner -- Bonsai API)
    *                (misc. files used in more than one place)

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0