matrix-screen v1.0.3

matrix-screen

install

npm i --save matrix-screen

Usage

import MatrixIndicator, { martixScreen, dataFactory } from 'matrix-screen';

const df = dataFactory(32, 16);
const matrix = new martixScreen(canvas, {
  x: 32,
  y: 16,
  // other options...
});
matrix.setData(df.getMatrix());
matrix.render();

use react

• MatrixIndicator

import  from 'matrix-screen';

<MatrixIndicator text="0123456789" />

• MatrixTime

import { MatrixTime } from 'matrix-screen';

<MatrixTime />

Options

{
  x: number;
  y: number;
  pixelWidth: number;
  pixelHeight: number;
  margin: number;
  shadow: boolean;
  animated: boolean;
}

dataFactory Methods

• dataFactory.write(text, font, color)
• dataFactory.fill(x, y, r, g, b, a)

props

MatrixIndicator Props

注意，当对包裹 MatrixIndicator 的容器进行设置 widht/height 时，则需要采用 calcScreenSize 进行计算 width 和 height，并设置为结果的一半(或将width和height转化为对应的x和y也可，采用 sizeToXy)。即:

import MatrixIndicator, { calcScreenSize } from 'matrix-screen';

// render
const { width, height } = calcScreenSize(this.props);
const style = {
  width,
  height
};

<div style={style}>
  <MatrixIndicator {...this.props} />
</div>

MatrixTime Props

Lecense

MIT