Skip to content

Simple view to show a kanji from it's SVG representation and animate the strokes

License

Notifications You must be signed in to change notification settings

badoualy/kanji-strokeview

Repository files navigation

Release

Kanji StrokeView

Warning: This library was developed to use with KanjiVG files, if you want to use it with another source, you'll need to update the code and change the input rect size to match the size of your input files (or the view will not be able to scale properly).

Setup

First, add jitpack in your build.gradle at the end of repositories:

repositories {
   // ...
   maven { url "https://jitpack.io" }
}

Then, add the library dependency:

compile 'com.github.badoualy:kanji-strokeview:1.0.0'

This library is also available as a Composable: https://github.com/badoualy/animatedsvg-composable

Now go do some awesome stuff!

Usage

Just add the following code to your layout:

<com.github.badoualy.kanjistroke.KanjiStrokeView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"/>

You can change the size to whatever you want, it should scale smoothly.

Then in your code, you can use the following methods:

  • setPathData to set the view from another KanjiStrokeView
  • loadPathData to load a list of path data strings like:
listOf("M34.25,16.25c1,1,1.48,2.38,1.5,4c0.38,33.62,2.38,59.38-11,73.25",
       "M36.25,19c4.12-0.62,31.49-4.78,33.25-5c4-0.5,5.5,1.12,5.5,4.75c0,2.76-0.5,49.25-0.5,69.5c0,13-6.25,4-8.75,1.75",
       "M37.25,38c10.25-1.5,27.25-3.75,36.25-4.5",
       "M37,58.25c8.75-1.12,27-3.5,36.25-4")
  • loadSvg to load an SVG input (string/inputstream/file) (it'll be slower than the above method since it need to parse the entire svg file)

You can customize the view with the following attributes:

name default description
svAutoRun false if true, the animation will start automatically when the view is first drawn. You can also set a delay via the autoRunDelay field. (No attribute yet)
svAnimate true if false, the kanji will not animate and always be drawn fully
svStrokeColor black stroke color of the kanji (still and animated)
svFingerColor primary color color of the circle to display at current finger position when animating stroke
svStrokeLightColor black at 50 opacity color of the background complete shape ("preview")
svStrokeHighlightColor accent color color of an highlighted stroke. You can highlight a stroke via the code by its index
svStrokeWidth 4dp stroke of the paint used to draw the strokes
svFingerRadius 8dp radius of the circle at current finger position when animating

About

Simple view to show a kanji from it's SVG representation and animate the strokes

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages