Cairo中如何实现位图绘制的边缘钳位效果？

你观察到的拉伸时边缘出现目标表面颜色边框，本质是双线性/三线性插值过程中，采样点落在源纹理边界外时默认读取了alpha=0的透明值参与混合导致，不同渲染环境下的配置方法如下： #

Direct2D 环境（Source Surface 常用场景） #

直接通过修改位图画刷的延伸模式实现钳位效果：

• 构造ID2D1BitmapBrush时，在画刷属性中显式指定X、Y轴的延伸模式为D2D1_EXTEND_MODE_CLAMP

D2D1_BITMAP_BRUSH_PROPERTIES brushProps = D2D1::BitmapBrushProperties(
    D2D1_EXTEND_MODE_CLAMP,
    D2D1_EXTEND_MODE_CLAMP,
    D2D1_BITMAP_INTERPOLATION_MODE_LINEAR // 可保留原有插值配置无需修改
);
ID2D1BitmapBrush* pBrush = nullptr;
pRenderTarget->CreateBitmapBrush(pSourceBitmap, brushProps, &pBrush);
// 后续直接用该画刷填充目标拉伸矩形即可
pRenderTarget->FillRect(targetRect, pBrush);

• 如果你使用原生DrawBitmap接口拉伸，可以手动将源矩形向外扩展0.5像素偏移，避免采样点落在源边界外。

Skia 环境 #

设置画笔的平铺模式为钳位即可：

SkPaint drawPaint;
drawPaint.setTileMode(SkTileMode::kClamp, SkTileMode::kClamp);
canvas->drawImageRect(sourceImage, targetRect, SkSamplingOptions(SkFilterMode::kLinear), &drawPaint);

HTML Canvas 2D 环境 #

Canvas 2D上下文无原生钳位参数，可通过两种方案实现：

• 预处理源位图：将源位图边缘1像素内容向外复制扩展1像素，绘制时裁剪掉扩展区域，避免插值读取到透明值
• 切换到WebGL上下文绘制，显式配置纹理包裹参数：

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

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