SkiaSharp中正确设置仿射矩阵，解决位图缩放斜切后裁剪问题

问题核心错误分析 #

当前代码存在两个致命问题：

• 斜切参数计算完全错误：SkiaSharp 中 SKMatrix 的 SkewX 和 SkewY 是斜切角度的正切值，而非斜切量的倒数，你直接用 1f / xyRotation.X 的计算逻辑完全不符合 API 定义。
• 未处理变换后的偏移裁剪：缩放+斜切后的图像会发生位置偏移，直接从(0,0)绘制会导致部分内容超出画布边界被裁剪，必须通过平移参数补偿偏移量。

关键参数定义与计算逻辑 #

已知条件：

• 原始位图尺寸：178×242（宽origW，高origH）
• 目标边界框尺寸：273×366
• X方向斜切量：-10px（顶部边缘相对底部边缘的X轴偏移）
• Y方向斜切量：7px（右侧边缘相对左侧边缘的Y轴偏移）

正确参数计算方式：

1. 斜切正切值：
   • SkewX = X斜切量 / 原始高度 = -10f / 242f（Y轴每移动1单位，X轴的偏移量）
   • SkewY = Y斜切量 / 原始宽度 = 7f / 178f（X轴每移动1单位，Y轴的偏移量）
2. 缩放比例：先计算斜切后原始图像的边界尺寸，再匹配目标框的缩放比例，保证图像填满目标框：
   • 斜切后宽度：skewedW = origW + Math.Abs(SkewX * origH)
   • 斜切后高度：skewedH = origH + Math.Abs(SkewY * origW)
   • 适配缩放比例：取目标框与斜切后尺寸的最大比值

修正后的完整代码 #

public SKBitmap ApplyAffine(SKBitmap origBitmap, SKSizeI newSize, SKPointI skewOffset)
{
    float origW = origBitmap.Width;
    float origH = origBitmap.Height;

    // 1. 计算正确的斜切正切值
    float skewX = skewOffset.X / origH;
    float skewY = skewOffset.Y / origW;

    // 2. 计算斜切后的原始图像边界尺寸
    float skewedW = origW + Math.Abs(skewX * origH);
    float skewedH = origH + Math.Abs(skewY * origW);

    // 3. 计算适配目标框的缩放比例（保证填满目标边界）
    float scale = Math.Max(newSize.Width / skewedW, newSize.Height / skewedH);

    // 4. 构建仿射矩阵：缩放 → 斜切 → 平移补偿（矩阵顺序从右往左应用）
    SKMatrix affine = SKMatrix.MakeScale(scale, scale);
    affine = SKMatrix.Concat(affine, SKMatrix.MakeSkew(skewX, skewY));

    // 计算变换后图像的实际边界，计算平移量让图像居中显示
    SKRect origRect = new SKRect(0, 0, origW, origH);
    SKRect transformedRect = affine.MapRect(origRect);
    float transX = (newSize.Width - transformedRect.Width) / 2 - transformedRect.Left;
    float transY = (newSize.Height - transformedRect.Height) / 2 - transformedRect.Top;
    affine = SKMatrix.Concat(affine, SKMatrix.MakeTranslation(transX, transY));

    // 5. 绘制变换后的图像
    var newBitmap = new SKBitmap(newSize.Width, newSize.Height);
    using (var canvas = new SKCanvas(newBitmap))
    {
        canvas.Clear(SKColors.Transparent);
        canvas.SetMatrix(affine);
        canvas.DrawBitmap(origBitmap, 0, 0);
    }

    return newBitmap;
}

代码关键说明 #

• 矩阵拼接顺序：SkiaSharp 的矩阵变换是从右往左执行，所以先做缩放、再斜切、最后平移，符合视觉上的变换逻辑。
• 偏移补偿：通过MapRect计算变换后图像的实际边界，再计算平移量让图像居中于目标画布，彻底解决裁剪问题。
• 缩放适配：基于斜切后的图像尺寸计算缩放比例，确保变换后的图像能完全填满目标边界框。

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