形状抠图完全指南

形状抠图概述

形状抠图工具是抠白底图工具中一种快速、直观的选区创建方式。与基于颜色或边缘的自动选择方法不同，形状抠图允许用户通过绘制标准几何形状来定义选区。这种方法特别适合需要规则形状裁剪的场景，如头像裁剪（圆形）、产品展示（矩形）、封面设计（特定比例）等。

形状抠图工具内置了六种常用几何形状：矩形、圆形、椭圆、花瓣、星形和心形。用户可以选择任意形状，在画布上拖动绘制，工具会自动将形状区域转换为选区。此外，形状抠图还支持选区的后续变换操作，包括移动、缩放、旋转等。

形状类型详解

矩形（Rectangle）

矩形是最基础也是最常用的形状类型。在拖动过程中，按住 Shift 键可以约束为正方形。在许多设计场景中，矩形选区用于创建标准的白底产品展示图、证件照背景裁剪等。

圆形（Circle）

圆形形状常用于创建圆形头像或徽章设计。拖动时按住 Shift 键可确保绘制出完美的圆形。圆形选区的中心点是您按下鼠标的位置。

椭圆（Ellipse）

椭圆形状提供了比圆形更大的灵活性，适合创建宽屏比例的裁剪区域。在设计视频封面或社交媒体头像时，椭圆形状非常有用。

花瓣形状（Petal）

花瓣形状是一个五瓣对称曲线图形，适合创建花朵形状的选区。在设计花卉相关素材或需要装饰性边缘时可以使用。

星形（Star）

星形是一个标准的五角星形状，适合创建徽章、标签或需要星形元素的创意设计。

心形（Heart）

心形是社交媒体和浪漫主题设计中最受欢迎的形状之一。可用于创建爱心图标、卡片设计或特殊活动的视觉素材。

形状绘制算法

形状抠图工具的核心是将数学定义的几何形状转换为像素级的选区蒙版。每种形状都有其独特的数学定义：

矩形生成

// 矩形选区蒙版生成
function createRectangleMask(x1, y1, x2, y2, width, height) {
    const mask = new Uint8ClampedArray(width * height);
    const minX = Math.max(0, Math.floor(Math.min(x1, x2)));
    const maxX = Math.min(width, Math.ceil(Math.max(x1, x2)));
    const minY = Math.max(0, Math.floor(Math.min(y1, y2)));
    const maxY = Math.min(height, Math.ceil(Math.max(y1, y2)));
    
    for (let y = minY; y < maxY; y++) {
        for (let x = minX; x < maxX; x++) {
            mask[y * width + x] = 255; // 选中
        }
    }
    
    return mask;
}

圆形和椭圆生成

// 椭圆选区蒙版生成
function createEllipseMask(cx, cy, rx, ry, width, height) {
    const mask = new Uint8ClampedArray(width * height);
    const minX = Math.max(0, Math.floor(cx - rx));
    const maxX = Math.min(width, Math.ceil(cx + rx));
    const minY = Math.max(0, Math.floor(cy - ry));
    const maxY = Math.min(height, Math.ceil(cy + ry));
    
    for (let y = minY; y < maxY; y++) {
        for (let x = minX; x < maxX; x++) {
            const dx = (x - cx) / rx;
            const dy = (y - cy) / ry;
            if (dx * dx + dy * dy <= 1) {
                mask[y * width + x] = 255;
            }
        }
    }
    
    return mask;
}

星形生成

// 星形选区生成算法
function createStarMask(cx, cy, outerRadius, innerRadius, numPoints, width, height) {
    const mask = new Uint8ClampedArray(width * height);
    
    // 生成星形顶点
    const points = [];
    for (let i = 0; i < numPoints * 2; i++) {
        const angle = (i * Math.PI) / numPoints - Math.PI / 2;
        const radius = i % 2 === 0 ? outerRadius : innerRadius;
        points.push({
            x: cx + radius * Math.cos(angle),
            y: cy + radius * Math.sin(angle)
        });
    }
    
    // 使用射线法判断点是否在多边形内
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            if (isPointInPolygon(x, y, points)) {
                mask[y * width + x] = 255;
            }
        }
    }
    
    return mask;
}

实战案例：创建标准证件照

证件照通常需要特定的尺寸和比例。使用形状抠图工具可以轻松创建符合标准的一寸或二寸证件照。

1. 1

   上传原始照片

   上传包含人物上半身的照片，确保照片清晰、面部特征完整。

2. 2

   选择矩形工具

   在工具栏选择"形状抠图"，然后在形状选择区选择矩形图标。

3. 3

   绘制选区

   在画布上拖动，创建包含面部和肩部的矩形选区。一寸照片的推荐比例约为 3:4。

4. 4

   结合其他工具

   使用画笔工具精修边缘，确保选区精确包围人物轮廓。然后使用"删除选区"功能去除背景。

实战案例：社交媒体头像

社交媒体平台的头像通常是圆形展示。使用圆形形状可以快速创建适合的头像选区。

1. 1

   选择圆形工具

   在形状抠图工具中选择圆形形状图标。

2. 2

   定位中心点

   将鼠标移动到面部中心位置（通常为两眼连线中点），按下鼠标开始绘制。

3. 3

   调整半径

   向外拖动鼠标，直到圆形选区包含面部和适当的头部空间。建议让面部占选区的 60-70%。

4. 4

   完成抠图

   松开鼠标后，选区会自动生成。点击"删除选区"去除外部背景。

实用技巧

技巧一：约束形状比例

在绘制矩形时，按住 Shift 键可以将自由矩形约束为正方形。这在需要创建 1:1 比例的选区时非常有用。

技巧二：临时切换工具

绘制形状后，可以立即切换到画笔工具进行边缘修正，无需退出形状抠图模式。形状选区和画笔选区会合并累积。

技巧三：撤销和重做

如果绘制的形状位置不理想，可以使用 Ctrl+Z 撤销，然后重新绘制。形状抠图工具支持完整的撤销/重做功能。

总结

形状抠图工具是快速创建规则选区的利器。掌握这一工具的关键要点包括：

• 熟悉六种内置形状的适用场景
• 使用 Shift 键约束形状比例
• 结合画笔工具处理复杂边缘
• 利用撤销/重做功能优化选区
• 适合头像、证件照、产品图等规则形状需求

在下一篇教程图像去噪与边缘处理中，我们将介绍如何使用后处理工具优化选区质量，包括降噪和边缘光滑功能。