Question

假设我有一个通过使用Bezier路径绘制另一个图像而渲染的图像，该路径用于剪切绘图。我想要的是能够渲染得到的图像，使新图像的边缘看起来像是斜面。我正在考虑用Bezier路径绘制一些线条粗细的颜色随着路径的角度而变化的东西就是我想要的。是否有自动执行此过程的功能？我认为一定有，或者不会有这样的按钮排列等等。

例如，应用程序图标说明了我正在寻找的内容。它们在右下方有一种阴影，在左上角有一个突出显示。

Answer 1

我为相当简单的形状编写了一个斜角算法。算法将采用闭合路径，斜角（45°插入），然后在给定特定光源角度的情况下应用提供的高光/阴影颜色。它并不完美，在非常复杂的形状上你可能无法获得你想要的效果，但我发现它适用于大多数“普通”形状（正方形，圆形，三角形，圆形，甚至是星形，齿轮和一些稍微更多）复杂的形状）。该算法将尝试通过计算路径的另一侧与光源的光线相交的位置来应用高光/阴影。我在这里写了一篇关于它的博客文章：http://aaronhayman.com/2012/beveling-shapes-in-core-graphics/，但博客帖子与实际代码有点过时，自从我第一次写这篇文章以来，我已经改进了。您可以在此处找到代码：https://gist.github.com/ahayman/2830483。代码以直接“c”编写，设计尽可能快速和紧凑。

有几点需要注意：

如果您正在为图像倾斜CGPath（如上所述），请考虑使用半透明alpha传递高光/阴影颜色。例如，以下颜色会产生微妙的斜角效果：

UIColor *highlight = [UIColor colorWithWhite:1 alpha:.25f];

UIColor *shadow = [UIColor colorWithWhite:0 alpha:.25f];

请注意，此算法不会使图像本身倾斜（或将图像弯曲为倾斜）。它只是在形状上绘制一个斜角。实际上弯曲图像需要Core Image。但是，如果使用透明度，则看起来好像图像顶部有透明斜角。这可能就够了。

<强>替代

您还可以作弊并在描边路径中绘制渐变。我想很多人都没有注意到这个小核心图形功能，但CGPathCreateCopyByStrokingPath是一个很棒的小功能。实际上，它允许您通过抚摸另一个路径来创建新路径。然后，您可以获取返回的路径并对其应用渐变以创建“斜面外观”。举个例子，假设我有一个UIBezierPath *path变量代表你想要倒角的bezier路径。

        UIBezierPath *path = [self imageClippingPath];
        CGPathRef stroke = CGPathCreateCopyByStrokingPath(path.CGPath, NULL, 2.0f, path.lineCapStyle, path.lineJoinStyle, path.miterLimit);
        UIBezierPath *strokedPath = [UIBezierPath bezierPathWithCGPath:stroke];
        [self drawGradientInPath:strokedPath inContext:context];
        CGPathRelease(stroke);

请注意，如果你剪辑到路径，你会得到一个只有1.0f宽的笔划，因为笔划是围绕路径，剪辑会将笔划减半。 / p>

您可以通过创建两个不同宽度的单独描边路径来创建更好的“斜角”：例如，宽度为4.0f的“内部”斜面和宽度为2.0f的“外部”斜面。首先绘制“内部”斜角，然后将外斜面（内部宽度的一半）覆盖在其上。如果你还将你的上下文剪辑到你正在抚摸的路径上，你最终会得到两个不同的斜面，每个斜面的大小为1.0f。请记住，笔划是围绕路径。所以只有一半的行程将在裁剪区域内。如果用不同于渐变斜角的渐变填充内斜角，则可以创建一个模仿Apple自己的嵌入式按钮外观。在密切关注Apple的按钮之后，我非常确定这正是他们所做的（或类似的东西）以获得倾斜的外观。

Answer 2

这取决于你正在寻找什么。您可以使用2D卷积内核，类似于所描述的in this article。

我不确定它是否可在iOS上使用，但Core Image附带CIHeightFieldFromMask过滤器，可生成您想要的内容。

Bezier路径截去的图象边界

2 个答案: