Renderium

Superior renderer

Table of Contents

• Features
• Dependencies
• Install
• Usage
• Examples
• Development

Features

• Designed with performance in mind
• Rich API
• Components
• Redraw Policy
• Logs

Dependencies

• Vectory

Install

Download dev or prod version and put it in your html

<script src="vendor/vectory.min.js"></script>
<script src="vendor/renderium.min.js"></script>

Usage

import Renderium from 'renderium'
import Vector from 'vectory'

// implement a component
class MyComponent extends Renderium.Component {
  draw (layer) {
    layer.drawRect({
      position: new Vector(10, 10),
      width: 100,
      height: 100,
      color: '#03a9f4'
    })
  }
}

export default MyComponent

import Renderium from 'renderium'
import Vector from 'vectory'
import MyComponent from './my-component'

// start the digest loop
requestAnimationFrame(function loop (time) {
  Renderium.digest(time)
  requestAnimationFrame(loop)
})

// create the renderer
var renderer = new Renderium({
  el: document.getElementById('root')
})

// spawn it
Renderium.spawn(renderer)

// create a layer
var layer = new Renderium.CanvasLayer({
  Vector
})

// add layer to the renderer
renderer.addLayer(layer)

// create component instance
var component = new MyComponent()

// add component to the layer
layer.addComponent(component)

// enjoy!

Examples

Development

Command	Description
npm run check	Check standard code style by snazzy
npm run build	Wrap source code in UMD by rollup
npm run min	Minify code by UglifyJS