Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Draw a specific stroke and make previous strokes to be already drawn #279

Open
rodrigomorales1 opened this issue Oct 26, 2022 · 0 comments
Open

Draw a specific stroke and make previous strokes to be already drawn #279

rodrigomorales1 opened this issue Oct 26, 2022 · 0 comments

Comments

@rodrigomorales1
Copy link

What I want to do

I want to only show the animation of the 3rd stroke of the character 迄 (i.e. the stroke "乙" that is below "𠂉"), and I want the previous strokes to be already drawn.

What I tried (attempt 1)

I obtained the desired behavior by drawing the previous strokes at a very fast speed and when the desired stroke is about to be drawn, the speed is changed to a slower speed.

<head>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hanzi-writer.min.js"></script>
</head>
<body>
  <div id="character-target-div"></div>
  <script>
    var writer = HanziWriter.create('character-target-div', '迄', {
      width: 100,
      height: 100,
      padding: 5,
    });

    writer.hideCharacter()
    writer._options.strokeAnimationSpeed = 1000

    writer.animateStroke(0, {
      onComplete: function() {
        writer.animateStroke(1, {
          onComplete: function() {
            writer._options.strokeAnimationSpeed = 0.1
            writer.animateStroke(2)
          }})
      }})

  </script>
</body>

As you can see above, the value of strokeAnimationSpeed is changed by accessing its value through _options. However, this method is not recommended, as mentioned in this reply in which @Chaning mentioned that any instance var with a _ prefix is not considered part of the public API and could be removed in future versions.

What I tried (attempt 2)

I also tried specifying the option strokeAnimationSpeed to animateStroke, but there was no effect caused. Apparently the only option that animateStroke accepts is onComplete.

<head>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hanzi-writer.min.js"></script>
</head>
<body>
  <div id="character-target-div"></div>
  <script>
    var writer = HanziWriter.create('character-target-div', '迄', {
      width: 100,
      height: 100,
      padding: 5,
    });

    writer.hideCharacter()
    writer.animateStroke(0, {
      strokeAnimationSpeed: 1000,
      onComplete: function() {
        writer.animateStroke(1, {
          strokeAnimationSpeed: 1000,
          onComplete: function() {
            writer.animateStroke(2, {
              strokeAnimationSpeed: 0.1
            })
          }})
      }})

  </script>
</body>

Note

I'd appreciate if someone could suggest a better alternative. For the time being, I'll be using the method I described above in (attempt 1).
@rodrigomorales1 rodrigomorales1 changed the title Draw a specific stroke and make previous strokes to be already drawn. Draw a specific stroke and make previous strokes to be already drawn Oct 26, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@rodrigomorales1