javascript - 如何在 Pixi.js 中制作手绘文本动画?
问题描述
有一些关于创建模仿绘图或手写文本的动画的问题和答案。虽然我找到了一个canvas api示例和一个基于 svg 的解决方案,但我没有看到任何使用 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())
};
}
})();
<canvas width=600></canvas>
据我了解,我喜欢上面的画布方法主要是从setLineDash
Pixi 中创建绘图效果。我喜欢这种方法,我只是不确定如何在 Pixi 中实现它。
解决方案
我不知道 Pixi,但一个可行的解决方案可能是在您的示例中对隐藏的画布使用例程,然后使用ctx.getImageData
您可以抓取结果,最后将抓取的图像用作 Pixi 纹理。
另一种解决方案,可能更简单,但只能在不需要其他 Pixi 效果时使用(例如,在游戏中、游戏结束时或两个级别之间),您可以停止 Pixi 渲染器并使用您发布的代码直接对着 Pixi 画布。
希望这可以帮助。
推荐阅读
- reactjs - 文件不会发布到数据库 - React
- r - 从 R 中的单个 Excel 工作表创建多个工作簿
- algorithm - 在 O(n) 的复杂度内反转 SHA-256 sigma0 函数?
- json - 如何异步读取和处理多个 JSON API 响应?
- javascript - React 如何只更新真实 DOM 树的单个部分?
- python - 机器人框架 Selenium2Library 获取 WebDriver 实例
- linux - 减少 Chrome (Chromium) 内存使用
- sql - 无法使用替换功能删除 SQL 表上的空白空间
- amazon-web-services - 在没有 SES 的情况下在 AWS 中负载平衡 Postfix?
- java - 当应用程序发送到后台时如何设置空白屏幕