by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12177
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、pretext项目简介

特意看了下，这篇文章标题写好的时候，是4月9日，正好过去了一个月，终于排到了。

现在pretext在社区的讨论没有前段时间那么火了。

做前端开发这么多年，有一个心心念念的布局效果一直想要实现，那就是完全文字环绕效果。

CSS shapes布局可以实现一侧环绕，但是想要完整环绕，一直没有什么好的解决方案。

pretext的出现让我意识到有了比较好的解决方法了。

Pretext 是一个纯 JavaScript/TypeScript 库，用于多行文本测量和布局。它快速、准确，支持各种语言。

Pretext 避免了 DOM 测量的需求，实现了自己的文本测量逻辑。

这个库由 Cheng Lou 创建，通过 Canvas 测量文本宽度，然后使用纯数学运算进行布局。这样可以避免触发浏览器的重排操作，从而获得极高的性能。

使用 Pretext，你可以实现许多有趣的效果，比如文字环绕浮动元素、动态布局调整、以及各种创意排版效果。文本可以流畅地环绕图片或其他形状，创造出精美的视觉效果。

项目地址：https://github.com/chenglou/pretext

目前Star数已经是惊人的46.4K！

二、百炼成钢，案例演示

以下演示都是使用AI生成的，尼玛AI真的是越来越强了。

1. 矩形环绕

您可以狠狠地点击这里：pretext实现文字居中环绕图片demo

拖动图片，可以看到文字实时环绕图片的效果。

由于截屏录制的GIF体积有些大，我直接截个静态图给大家看看吧。

2. 非透明像素环绕

下面，我们将上述效果升级下，文字不再是环绕图片区域，而是环绕图片中的非透明图像轮廓，也是可以实现的。

您可以狠狠地点击这里：pretext实现文字居中环绕图片非透明区域demo

效果示意参见下面的截图：

可以看到，文字不再是围绕图片所占据的矩形区域环绕排版，而是围绕PNG图片的非透明像素部分进行环绕。

完整的实现代码demo页面上可见。

三、心愿已了，五一总结

本文不谈语法，不谈具体细节，因为没必要。

要是几年前，我估计要花半天时间学习API，然后调试demo。

如今，AI，还不是最好的AI模型，已经可以巴拉巴拉把我的需求一口气实现，自己只需要再调整一些细节即可。

还学啥，有啥好学的，只需要知道有这么个东西就好了。

不管怎么说，心心念念的排版效果如今得见天颜，也算是了了一桩心愿。

最后，总结下我的五一节。

很简单，钓了5天的鱼，😄😄😄

给老板送了几年的温暖，现在钓鱼手艺越来越好了。

依次是：

218五小时，太仓晓渔园。128五小时，张家港林姐垂钓。常熟小飞鱼塘，99五小时。崇明三农，158三小时。上海东翔，138六小时。上海星河，180六小时。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12177

（本篇完）