react-zh-stroker

A stroke drawing React component for zh-stroke-data.

Quick Start

Install with following commands.

npm install react-zh-stroker
# or
yarn add react-zh-stroker

react-zh-stroker is designed to draw JSON stroke data from 常用國字標準字體筆順學習網, which are processed and stored in zh-stroke-data.

For example, if you want to draw 萌 (json/840c.json) in your app:

import { data, Word } from 'react-zh-stroker';
import word from './json/840c.json';

const moe = data.computeLength(word);

function App() {
  return (
    <Word data={moe} progress={1.0} />
  );
}

By changing the progress property dynamically, you can animate the word.

APIs

Word component

Word draws a JSON stroke data.

onEnter event

onEnter is triggered when a word is starting to draw.

onLeave event

onLeave is triggered when a word is finishing to draw.

onEnterStroke event

onEnterStroke is triggered when a stroke in a word is starting to draw.

onLeaveStroke event

onLeaveStroke is triggered when a stroke in a word is finishing to draw.

Stroke component

Stroke draws a stroke in a JSON stroke data.

Track component

Track draws a path.

data.fromXML

data.fromXML is a helper to read a stroke data in XML format.

data.packedFromPath

data.packedFromPath is a helper to compute the index of a word in a packed binary stroke data.

data.fromBinary

data.fromBinary is a helper to read a stroke data in binary format.

data.fromScanline

data.fromScanline is a helper to read a stroke data in scanline format.

data.computeLength

data.computeLength is a helper to compute the length of a word.

Development

yarn install
yarn start

License