BonsaiJS 轻量级的 JavaScript 图形库

Question

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

主要特性

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

快速入门

Draw a 100x200 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)

相关链接

• 项目地址：http://bonsaijs.org/
• Github地址：https://github.com/uxebu/bonsai
• 在线示例：http://demos.bonsaijs.org/demos/
• 在线编辑器：http://orbit.bonsaijs.org