BonsaiJS 轻量级的 JavaScript 图形库

发布于 2019-08-05 11:56:14 字数 6040 浏览 2811 评论 0

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)

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

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

文章
评论
84965 人气
更多

推荐作者

听闻余生

文章 0 评论 0

昨迟人

文章 0 评论 0

荭秂

文章 0 评论 0

。◕‿◕。

文章 0 评论 0

染柒℉

文章 0 评论 0

囍孤女

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文