如何在 Pixi.js 中制作手绘文本动画？答案

【问题标题】：How can I make a handdrawn text animation in Pixi.js?如何在 Pixi.js 中制作手绘文本动画？
【发布时间】：2020-10-01 18:26:29
【问题描述】：

对于创建模仿绘图或手写文本的动画，有一些问题和答案。虽然我找到了canvas api 示例和svg-based 解决方案，但我没有看到任何使用 Pixi.js 的 API 的东西。我是画布和 Pixi 的菜鸟。

这是 jsfiddle 代码：

var ctx = document.querySelector("canvas").getContext("2d"),
  dashLen = 220,
  dashOffset = dashLen,
  speed = 11,
  txt = "Wingardium Leviosa",
  x = 30,
  i = 0;

ctx.font = "50px cursive, TSCu_Comic, sans-serif";
ctx.lineWidth = 5;
ctx.lineJoin = "round";
ctx.globalAlpha = 2 / 3;
ctx.strokeStyle = ctx.fillStyle = "black";

(function loop() {
  ctx.clearRect(x, 0, 60, 150);
  ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
  ctx.setLineDash([dashLen - dashOffset, dashOffset]); // create a long dash mask   
  dashOffset -= speed; // reduce dash length
  ctx.strokeText(txt[i], x, 90); // stroke letter

  if (dashOffset > 0) requestAnimationFrame(loop); // animate
  else {
    ctx.fillText(txt[i], x, 90); // fill final letter
    dashOffset = dashLen; // prep next char
    x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
    ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random()); // random y-delta
    ctx.rotate(Math.random() * 0.005); // random rotation
    if (i < txt.length) {
      setTimeout(() => {
        requestAnimationFrame(loop);
      }, 300 * Math.random())
    };
  }
})();

&lt;canvas width=600&gt;&lt;/canvas&gt;

据我了解，我喜欢上面的画布方法主要是从 setLineDash 创建绘制效果，这在 Pixi 中不存在。我喜欢这种方法，只是不知道如何在 Pixi 中实现它。

【问题讨论】：

你的 Pixi 代码在哪里？

标签： javascript html5-canvas pixi.js

【解决方案1】：

我不知道 Pixi，但一个可行的解决方案可能是在您的示例中对隐藏的画布使用例程，然后使用 ctx.getImageData 您可以抓取结果，最后将抓取的图像用作 Pixi 纹理。

另一种解决方案，可能更简单，但只能在不需要其他 Pixi 效果时使用（例如，在游戏中、游戏结束时或两个级别之间），您可以停止 Pixi 渲染器并使用您直接针对 Pixi 画布发布的代码。

希望这会有所帮助。

【讨论】：