CanvasKit & opentype.js 实现文字阴影

这次的主角其实不是 CanvasKit, 而是 opentype.js, 本次目标主要想利用它获取文本的 Path.

当然获取 Path 不止这一种, 还有个 gero3/facetype.js. 不过官方介绍它生成的路径主要为了 Threejs, 我自己也看不明它生成的字体路径在 Threejs 之外应该怎么用.

opentype.js

opentype.js is an OpenType and TrueType font parser and writer. It allows you to access the letterforms of text from the browser or node.js.

我们可以利用它对文字字形 Glyph 做更细致的操作, 修改字符的形态等. 当然这一切都是建立在 opentype.js 能获取到一个字体字符的 Path 的基础上, 并且支持多语言.

opentype.js 的 Font 对象下有这样的方法 Font.getPath(text, x, y, fontSize, options)

得到 path 后就可以塞入到 canvaskit.js 中操作了.

opentype.js 的 Path 同样提供了 getBoundingBox() 方法

canvaskit.js

我们的目标是给文字加上阴影, 也就是要做一个探照灯的效果.

在配合 CanvasKit 的过程中, 唯一要注意的是处理原始 Path 的 transform.

通过 svg-path-visualizer.netlify.app 可以看到文字顶部 Y 值是负数

上一篇介绍了 CanvasKit 中 Paint 用法, 本篇就说明一下 CanvasKit 中滤镜 Mask 来实现模糊.

和标准 Canvas API 不同的是, CanvasKit 在模糊和非模糊效果之间切换不需要 save restore 来保存状态. 因为 Mask 是作用在 Paint 上, 当不用 Mask 时取消滤镜即可.

很容易在 Skia 仓库中找到相关例子

>>> Github

相关推荐
然我21 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子26 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹30 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器36 分钟前
指定阿里镜像原理
前端
枷锁—sha41 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha42 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss