DOCSEARCHbyAlgolia
Submit Docs

Hanzi Writer

repository·master·Indexed 26 days ago

https://github.com/chanind/hanzi-writer

A free and open-source JavaScript library for animating simplified and traditional Chinese character stroke orders and implementing stroke order practice quizzes. Version 3.0.0 provides tools for animating specific strokes, managing user input during quizzes, and customizing rendering via HanziWriterOptions.

Tokens
1.4K
Snippets
0
Records
18
Agent score
89%

What's inside hanzi-writer

  5. Animate a single specific stroke

    master

    Use animateSingleStroke to animate the drawing of one specific stroke within a character. This function handles the necessary state transitions to ensure the stroke appears correctly relative to the character's current opacity.

    Parameters:

    • charName: The name of the character.
    • character: The character model instance.
    • strokeNum: The index of the stroke to animate.
    • speed: Controls the speed of the stroke animation.

  6. Animate character writing in a loop

    master

    Use animateCharacterLoop to create a repeating animation sequence. It performs the standard animateCharacter sequence and then adds a delay before the next loop begins.

    Parameters:

    • charName: The name of the character.
    • character: The character model instance.
    • fadeDuration: Duration to fade out the character.
    • speed: Controls the speed of the stroke animation.
    • delayBetweenStrokes: Delay in milliseconds between starting each stroke.
    • delayBetweenLoops: Delay in milliseconds before the entire animation sequence repeats.

  7. Manage user stroke input during a quiz

    master

    These functions generate mutations to track and update the strokes a user is currently drawing during a quiz session.

    • startUserStroke(id, point): Initializes a new user stroke with a specific ID and the first point.
    • updateUserStroke(userStrokeId, points): Updates the list of points for an existing user stroke.
    • hideUserStroke(userStrokeId, duration): Fades out a user stroke by setting its opacity to 0 over a specified duration. Note that the stroke is not removed from the DOM to prevent touch event issues.
    • removeAllUserStrokes(userStrokeIds): Removes all specified user strokes by setting them to null.

  8. Show or hide character strokes and visibility

    master

    These functions return arrays of GenericMutation objects to manipulate the visual state of a character:

    • showStrokes(charName, character, duration): Makes all strokes of a character visible with the specified duration.
    • showCharacter(charName, character, duration): Makes the entire character (including all strokes) visible.
    • hideCharacter(charName, character, duration?): Fades out the character's opacity and hides its strokes.
    • showStroke(charName, strokeNum, duration): Makes a specific stroke index visible.

  9. Start a stroke order practice quiz

    master
    Use startQuiz to prepare a character for a quiz session. It returns an array of GenericMutation objects that should be applied to the Hanzi Writer instance to hide the main character and set up the initial stroke visibility based on the provided startStrokeNum.

  10. Animate character stroke writing sequences

    master

    Use animateCharacter to create a sequence of mutations that hides the character and then animates each stroke one by one. This is useful for teaching the correct stroke order and speed.

    Parameters:

    • charName: The name of the character.
    • character: The character model instance.
    • fadeDuration: Duration to fade out the character.
    • speed: Controls the speed of the stroke animation.
    • delayBetweenStrokes: Delay in milliseconds between starting each stroke.