react-zh-stroker
v0.2.0react-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
To the extent possible under law,
caasi Huang
has waived all copyright and related or neighboring rights to
react-zh-stroker.