在 CGContext 上绘制的部分透明图像周围放置边框答案

【问题标题】：Put border around partially transparent Image being drawn on CGContext在 CGContext 上绘制的部分透明图像周围放置边框
【发布时间】：2013-01-31 21:14:32
【问题描述】：

我有一张前景是黄色花瓶，背景是透明的图像：

我在 CGContext 上绘制它：

CGContextDrawImage(context, CGRectMake(0, 0, 100, 100), myImage.CGImage);

我可以在CGContextDrawImage之前使用以下语句在它周围画一个阴影：

CGContextSetShadowWithColor(context, CGSizeMake(0,0), 5, [UIColor blueColor].CGColor);

但我想在图像周围画一个笔触，使它看起来像下面这样：

如果我这样做：

CGContextSetRGBStrokeColor(shadowContext, 0.0f, 0.0f, 1.0f, 1.0f);
CGContextSetLineWidth(shadowContext, 5);
CGContextStrokeRect(shadowContext, CGRectMake(0, 0, 100, 100));

它（显然）在整个图像周围绘制一个矩形边框，如下所示：

这不是我需要的。

但是像第三张图片那样绘制边框的最佳方法是什么？

请注意，在这种情况下无法使用 UIImageView，因此使用 UIImageView 的 CALayer 的属性是不适用的。

【问题讨论】：

在拨打CGContextDrawImage之前，您是否在拨打CGContextSetShadowWithColor？
@elcanibal：是的。否则，就没有影子了。我正在编辑原始问题以反映这一点。
请张贴一张透明背景的黄色花瓶的PNG。您的第一张（未经修饰的）图像具有灰色背景。
我已经替换了第一张图片。它现在具有透明背景。请注意，您可以尝试任何具有透明背景的图像。我不会在应用程序中使用这个花瓶图像。它是从网上随机提取的。

标签： ios core-graphics cgcontext cgcontextdrawimage

【解决方案1】：

一种方法是使用mathematical morphology operator of dilation 向外“增长”图像的 Alpha 通道，然后使用生成的灰度图像作为蒙版来模拟笔触。通过填充扩张的蒙版，然后在顶部绘制主图像，您可以获得中风的效果。我创建了一个演示这个效果的演示，可以在 Github 上找到：https://github.com/warrenm/Morphology（所有源代码都是 MIT 许可的，如果对你有用的话）。

下面是它的截图：

请注意，这非常慢（膨胀需要在每个像素上迭代内核），因此您应该选择笔触宽度并提前为每个源图像预先计算遮罩图像。

【讨论】：

我想知道将它移植到 Core Image Kernel Language 有多可行。这样的实现可能比使用 C 标量操作的直接循环快得多。
对于有一些 CI 甚至 GLSL 经验的人来说，这将是微不足道的。它只是一个邻域的最小化算子。不过，据我了解，Core Image 在 iOS 上是不可插入的。此外，如果一个人很聪明，可能会利用内核的可分离性或可分解性来减少工作量。
当，你是对的。我之前没有注意到：iOS 中不存在 CIKernel（因为它在 iOS 文档中没有出现）。
好消息，不过：@BradLarson 已经完成了编写基本形态学运算的艰苦工作，作为他的GPUImage 框架 (github.com/BradLarson/GPUImage) 的一部分。以 GLSL 的所有速度，这些肯定可以适应以获得所需的效果。

【解决方案2】：

我会尝试在调用 CGContextDrawImage 之前设置笔触颜色和线宽，或者调整阴影（不透明度、模糊等），使其看起来像图像周围的笔触。让我知道这是否有效！

【讨论】：

那行不通。两个原因： 1. 阴影不能准确地模拟笔画。 2. 我需要同时添加描边和阴影。所以我需要能够真正抚摸图像。
你可以在调用CGContextDrawImage之前设置这两个东西，即事先调用CGContextSetShadowWithColor、CGContextSetRGBStrokeColor和CGContextSetLineWidth。
@elcanibal：但是你中风的是什么？你需要一条路径。
图片不提供路径吗？我的意思是如果核心图形可以找到分配阴影的路径，我假设它也可以找到描边的路径（它是一样的......）
@elcanibal：图像只是像素光栅。路径由moveto、lineto、curveto 等元素构成。 Core Graphics 不提供用于跟踪栅格以生成路径的公共 API。