开发WordPress插件：Canvas上SVG图案无缝排列算法求助

核心思路：基于SVG的实际像素占用计算偏移量 #

普通bounding box只计算外围矩形，完全忽略凹凸区域的像素分布，要解决间隙问题，必须精准获取SVG在每个方向上的实际有效像素边界。

步骤1：提取SVG的Alpha通道像素数据 #

将SVG绘制到临时Canvas后，通过getImageData()遍历像素数组，筛选出有Alpha值（非透明）的像素边界：

function getSVGActualBounds(canvas) {
    const ctx = canvas.getContext('2d');
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    let minX = canvas.width, maxX = 0;
    let minY = canvas.height, maxY = 0;

    // 遍历所有像素，记录非透明像素的极值边界
    for (let y = 0; y < canvas.height; y++) {
        for (let x = 0; x < canvas.width; x++) {
            const alpha = data[(y * canvas.width + x) * 4 + 3];
            if (alpha > 0) {
                minX = Math.min(minX, x);
                maxX = Math.max(maxX, x);
                minY = Math.min(minY, y);
                maxY = Math.max(maxY, y);
            }
        }
    }

    return {
        left: minX,
        right: maxX,
        top: minY,
        bottom: maxY,
        width: maxX - minX + 1,
        height: maxY - minY + 1
    };
}

步骤2：基于实际边界计算无缝排列偏移量 #

横向排列时，下一个SVG的绘制起始X坐标，需对齐前一个SVG的实际右边界；纵向同理，用实际底部边界对齐下一行的实际顶部边界：

function arrangeSVGsSeamlessly(canvas, svgList) {
    const ctx = canvas.getContext('2d');
    let currentX = 0, currentY = 0;
    let rowMaxBottom = 0;

    svgList.forEach((svgObj, index) => {
        // 临时Canvas绘制SVG，获取实际边界
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = svgObj.width;
        tempCanvas.height = svgObj.height;
        tempCanvas.getContext('2d').drawImage(svgObj.image, 0, 0);
        
        const bounds = getSVGActualBounds(tempCanvas);
        
        // 计算当前SVG的绘制位置：抵消自身左侧透明区域
        const drawX = currentX - bounds.left;
        const drawY = currentY - bounds.top;
        
        ctx.drawImage(svgObj.image, drawX, drawY);
        
        // 更新下一个SVG的X起始点：基于当前SVG的实际右边界
        currentX = drawX + bounds.right + 1; // +1避免像素重叠
        
        // 记录当前行的最大底部边界
        rowMaxBottom = Math.max(rowMaxBottom, drawY + bounds.bottom + 1);
        
        // 自定义换行逻辑（可根据需求调整每行数量）
        if ((index + 1) % 4 === 0) {
            currentX = 0;
            currentY = rowMaxBottom;
            rowMaxBottom = 0;
        }
    });
}

步骤3：极端凹凸场景的优化方案 #

如果图案凹凸差异极大，可额外统计每个SVG的侧方透明宽度：

• 左侧透明宽度：从Canvas左边缘到第一个非透明像素的距离
• 右侧透明宽度：从最后一个非透明像素到Canvas右边缘的距离
  排列时，用下一个SVG的左侧透明宽度抵消前一个SVG的右侧透明宽度，实现像素级贴合。

关键注意事项 #

• 确保SVG绘制到Canvas时无额外内边距，避免干扰像素检测
• 复杂SVG可降低检测精度（比如每2-3个像素检测一次），平衡性能与准确性
• 半透明像素可调整Alpha阈值（如alpha > 127），避免误判透明区域

内容的提问来源于stack exchange，提问作者Tayfun