开源 | Warpvas 实现扭曲的画布

介绍

名字灵感源于 warped + canvas，扭曲的画布。

画布可以被扭曲吗？

如果你使用过canvas，可能你对setTransform API也有所了解，那你可能会给出一个偏消极的答案：只能整体倾斜变形，但做不到扭曲变形。

但这真的做不到吗？

我们可以先来想一个问题：如果对于一个方方正正的图像来说，setTransform API施加的变形效果只能作用于整体，那如果把它从斜对角切成两份三角形，再分别应用setTransform API施加变形呢？

不知道你是否能惊喜地发现，“只能整体变形”的魔咒就这样被轻易破除了

这是非常容易理解的，但是你可能会疑惑那又如何，"扭曲"一样无法实现。

但我们要意识到图像是可以无限分割的，我们可以将其分割成网格状（如10行10列），然后每个网格中的部分图像再根据它自己斜对角分割成两个三角形进行独立变形，而当这些独立变形的三角图元重新整合在一起成为一张大图的时候，“扭曲的画布”不就诞生了吗？

所以，扭曲画布是能够实现的。但我知道，你此刻内心在打鼓，因为这原理好理解，但实现起来的话，估计得吃上不少苦头吧...

---

如果你今日还在等待好消息出现的话，那我想这可能就是你今天听到的第一个好消息。

Warpvas是一个可以快速实现画布扭曲效果的工具库，它小而美，它灵活且高效，而且它是开源的。

官网地址：Warpvas

在Warpvas库的代码设计中，虽然它内部实际上更倾向应用性能更好的WebGL实现，而不是应用2D中setTransform API实现，但也不妨碍它展示上面化零为整的艺术（图像分割变形）。

特性

• 网格分割策略：支持自定义网格分割算法，通过不同策略实现透视/波浪/曲面等变形效果。
• 边界曲线控制：通过贝塞尔曲线控制点调整，实现精细的边界变形效果控制。
• 辅助显示效果：提供选项以在变形图像上添加分隔线和分割点等辅助显示效果，以协助观察图像变形效果。
• 输入输出限制：提供选项以控制变形图像的输入和输出尺寸，更好把控变形图像的生成质量和效率，也可防止超大图像导致性能问题。
• 多渲染引擎支持：可在 WebGL (高性能) 和 Canvas2D (高兼容) 渲染模式间自由切换。
• 安全渲染模式：WebGL 渲染失败时自动降级至 Canvas2D 渲染，保障基础功能可用性。
• 状态序列化：支持将变形状态序列化为 base64 字符串，便于保存/恢复复杂变形状态。

安装方法

npm install warpvas
# or
pnpm add warpvas

使用教程

1. 创建新的变形画布实例

// 使用图片创建
const img = new Image();
img.src = 'example.jpg';
img.onload = () => new Warpvas(img);

// 使用画布创建并设置2x2网格
const canvas = document.createElement('canvas');
const warpvas = new Warpvas(canvas, 2, 2);

2. 更新变形区域顶点坐标

// 将变形区域(0,0)的左上角顶点移动到(100,100)
const warpvas = new Warpvas(canvas);
warpvas.updateVertexCoord(
    0,                  // 区域行索引
    0,                  // 区域列索引
    'tl',               // 顶点位置(左上角)
    { x: 100, y: 100 }, // 新位置
    true                // 重新计算曲线
);

第五个参数当设置为true时，临近曲线的控制点会重新计算，换句话说就是保持直线状态。

3. 更新变形区域指定方向的边界曲线

// 将变形区域(0,0)的底部边界变为曲线
const warpvas = new Warpvas(canvas);
warpvas.updateRegionBoundCoords(
    0,                  // 区域行索引
    0,                  // 区域列索引
    'bottom',           // 指定边界的方向
    [
        { x: 0, y: canvas.height },                           // 曲线起始点
        { x: canvas.width / 3, y: canvas.height / 2 },        // 曲线控制点1
        { x: (canvas.width / 3) * 2, y: canvas.height / 2 },  // 曲线控制点2
        { x: canvas.width, y: canvas.height },                // 曲线终点
    ]
);

4. 添加分割点以进一步分割变形区域

// 在第一个变形区域(0,0)的中心添加分割点，会分割成2×2的区域
const warpvas = new Warpvas(canvas);
const region = warpvas.originalRegions[0][0];

warpvas.splitRegionByPoint(
    0,      // 区域行索引
    0,      // 区域列索引
    {
        x: (region.tl.x + region.br.x) / 2,  // 区域中心X坐标
        y: (region.tl.y + region.br.y) / 2,   // 区域中心Y坐标
    },
    0.1     // 10%容差，容差越大，分割点越容易直接作用于边界上
);

如果对不同区域分别施加变形操作，可实现以下效果（分隔线仅供参考）：

5. 移除指定的变形区域

// 移除位于第1行第1列的变形区域
const warpvas = new Warpvas(canvas);
warpvas.removeRegion({
    row: 1,
    column: 1
});

6. 设置渲染配置选项

// 控制渲染效果和调试视图显示
const warpvas = new Warpvas(canvas);
warpvas.setRenderingConfig({
    // padding: 10,                 // 设置10px内边距
    // enableAntialias: true,       // 启用抗锯齿
    // enableSafeRendering: true,   // 启用安全渲染模式
    // enableContentDisplay: true,  // 显示变形内容
    enableGridDisplay: true,        // 显示变形网格
    enableGridVertexDisplay: true,  // 显示网格顶点
    gridColor: { r: 255, g: 99, b: 71, a: 1 } // 使用珊瑚红色网格
});

7. 设置变形网格细分的最大比例

控制分割网格的密度，值范围 0-1。这个值越小，网格越密，变形效果越精细，但同时也会增加计算量。例如，值为 0.1 时，每个网格的最大尺寸为图像宽度的 10%。

// 设置紧密网格以提高变形质量
const warpvas = new Warpvas(canvas);
warpvas
    .setSplitUnit(0.01)
    .setRenderingConfig({
        enableGridDisplay: true,
        gridColor: { r: 206, g: 102, b: 91, a: 1 }
    });

8. 设置网格细分点的计算策略

const warpvas = new Warpvas(canvas);

// 使用自定义策略
warpvas.setSplitStrategy({
    name: 'custom',
    execute: (warpvas) => {
        // 返回自定义网格点计算结果
        // return [[[{ x: 0, y: 0 }]]];

        // 使用默认策略计算的结果
        return Warpvas.strategy(warpvas);
    }
});

应用不同的策略，将会得到不同的变形效果，为了让大家更好地感受到“策略”的强大效果，这里“附送”透视效果的实现，这里需要引入另一个库：warpvas-perspective：

9. 设置输入画布的尺寸限制

当处理大尺寸图像时，可以通过此方法限制输入画布的最大尺寸，系统会自动将图像等比缩放到限制范围内进行处理，以提高性能和减少内存占用。

const warpvas = new Warpvas(canvas);

// 限制输入高度为100px，宽度按比例缩放
warpvas.setInputLimitSize({
    height: 100
});

10. 设置输出画布的尺寸限制

限制变形后输出画布的最大尺寸。当变形导致画布尺寸过大时，系统会自动将结果等比缩放到限制范围内，避免因内存限制导致渲染失败。

const warpvas = new Warpvas(canvas);

// 限制输出高度为100px，宽度按比例缩放
warpvas.setOutputLimitSize({
    height: 100
});

11. 设置渲染引擎类型

配置渲染引擎使用 Canvas2D 或 WebGL 模式。模式比较：

• Canvas2D：兼容性更好（支持大多数浏览器），但性能较慢
• WebGL：大图像性能更好（GPU 加速），但兼容性有限

const warpvas = new Warpvas(canvas);

// 启用Canvas2D渲染
warpvas.setRenderingContext('2d');

// 启用WebGL渲染
warpvas.setRenderingContext('webgl');

12. 通过Web Worker异步生成变形画布

const canvas = document.createElement('canvas');
const warpvas = new Warpvas(canvas);
await warpvas.renderWithWorker();

最后

这个库源于我的工作经验和总结，这个库我会持续维护，如果这个库能帮助到你，欢迎到 GitHub 留下宝贵的⭐️。

如果你有极具创新的独特变形策略，欢迎在 Issues 区留言，我也会将它们补充到 README.md 中。

这里还有一个好消息，结合fabricjs快速搭建图像扭曲编辑工具的开源库也在筹备中了，如果你感兴趣，可持续关注～

来自掘金文章：开源 | Warpvas 实现扭曲的画布