cocoa - Quartz 2D 实现 html5 canvas globalCompositeOperation

Question

我正在尝试使用 CGContextSetBlendMode 实现 html5 canvas globalCompositeOperation 并将 html5 canvas 运算符(source-in、source-atop 等)转换为其 CGBlendMode 对应项(kCGBlendModeSourceIn、kCGBlendModeSourceAtop 等)。

以下是根据规范的预期结果:

使用 CGContextSetBlendMode，我得到了这个:

有些结果是错误的。例如，源输出(Quartz 2D 中的 kCGBlendModeSourceOut)不会裁剪蓝色矩形。

哪个实现是正确的，我不确定。但我的问题是，有解决方法吗？经过一番修改，我想出了这个解决方案，在应用操作之前对目标进行预处理:

1. 剪辑除源(即红色圆圈)之外的所有内容
2. 删除目的地(只留下圆圈中的图像)

这是执行此操作的预处理步骤(假设源路径已设置):

auto save = CGContextCopyPath(ctx);
CGContextSaveGState(ctx);
CGContextAddRect(ctx, CGRectInfinite);
CGContextEOClip(ctx);
CGContextSetBlendMode(ctx, kCGBlendModeClear);
CGContextAddRect(ctx, CGRectInfinite);
CGContextFillPath(ctx);
CGContextRestoreGState(ctx);
CGContextAddPath(ctx, save);
CGPathRelease(save);

通过解决方法，我几乎得到了我想要的:

除了源输出中的伪像以及圆圈轮廓中的一些(抗锯齿？)边缘。

还有更好的办法吗？我做错了吗？我错过了什么吗？

提前非常感谢您，请原谅这个冗长的问题。

Answer 1

混合模式是由一个函数实现的，该函数基本上接受两种颜色(每种颜色都来自一个源)作为输入，并为您提供结果颜色作为输出。

f(a,b) = c

在您的示例中，我们可以假设蓝色矩形来自一个源a，红色圆圈来自另一个源b。我不熟悉 Quartz 2D，但如果它有一个 API 可以直接访问每个像素的颜色，那么您可以遍历两个源的像素，调用每个像素的混合函数并获得结果图像。

c[1][1] = f(a[1][1], b[1][1])
c[1][2] = f(a[1][2], b[1][2])
...
c[n][m] = f(a[n][m], b[n][m])

其中 n 和 m - 分别以像素为单位的图像宽度和高度。

请注意，遍历像素可能是一项昂贵的操作，尤其是在处理高分辨率图像时。

关于source-out - 它是Porter/Duff合成运算符之一，有点类似于混合模式。除了两种颜色之外，它还需要这些颜色的 Alpha channel 值。 Alpha 值表示每个源应在最终结果中表示多少，并且根据您要使用的运算符，使用或丢弃此“参与”值。

function sourceOut(aColor, bColor, aAlpha, bAlpha) {
  return bAlpha * (1 - aAlpha) * bColor;
}

See JSBin with full example

引用:

• Alpha compositing
• W3C Compositing and Blending Level 1 - 9. Advanced compositingfeatures
• Søren Sandmann Pedersen - Porter/Duff Compositing and BlendModes