pretext

产品配图

+1

关于

Charming Pretext 是一个基于 Pretext 的 JavaScript 扩展，提供一个简洁的 API 使得文本可以在任何图形里面排版。可以很方便的实现文字驱动的数据可视化和创意编程。这里是一个简单的 demo，展示如何把文字排版到一个圆形里面。 js const layout = cm.layoutTextInPath({ text: "Hello, Charming Pretext! I love generative art!", path: cm.pathCircle(160, 160, 150), // Builds a circle path string. fontSize: 12, fontFamily: "Inter", }); const context = cm.context2d({width: 400, height: 300}); context.fillStyle = "#222"; context.font = ${layout.fontSize}px ${layout.fontFamily}; context.textAlign = "center"; context.textBaseline = "middle"; for (const t of layout.texts) { context.save(); context.translate(t.x, t.y); context.rotate((t.angle Math.PI) / 180); context.fillText(t.text, 0, 0); context.restore(); } 案例 代码

收录记录

1. 阮一峰周刊·用户投稿

   2026年4月1日 – 2026年4月5日 · 2 次收录

2. 阮一峰周刊·正刊推荐

   2026年4月3日 · 1 次收录

3. HelloGitHub·月刊推荐

   2026年4月28日 · 1 次收录