README
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
component Word
Word
draws a JSON stroke data.
event onEnter
onEnter
is triggered when a word is starting to draw.
event onLeave
onLeave
is triggered when a word is finishing to draw.
event onEnterStroke
onEnterStroke
is triggered when a stroke in a word is starting to draw.
event onLeaveStroke
onLeaveStroke
is triggered when a stroke in a word is finishing to draw.
component Stroke
Stroke
draws a stroke in a JSON stroke data.
component Track
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
To the extent possible under law,
caasi Huang
has waived all copyright and related or neighboring rights to
react-zh-stroker.