BonsaiJS 轻量级的 JavaScript 图形库

Z时代
2024-01-10
分类：IT

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 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)