0

假设我有一个图像，该图像是通过使用用于剪切绘图的贝塞尔路径将另一个图像绘制到其中而呈现的。我想要的是能够以这样一种方式渲染生成的图像，使新图像的边缘看起来像是斜切的。我在想用一些线条粗细来绘制贝塞尔路径的东西，它会随着路径的角度而改变颜色，这就是我想要的。是否有自动执行此过程的功能？我想一定有，否则就不会有这样一排按钮等等以这种方式呈现。

例如，应用程序图标就是我要查找的内容的说明。它们在右下角有一种阴影，在左上角有一个高光。

4

2 回答 2

3

我已经为相当简单的形状编写了一个斜切算法。该算法将采用封闭路径，将其斜切（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变量，它代表您想要斜切的贝塞尔路径。

        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 宽的笔划，因为笔划是围绕路径进行的，剪辑会将笔划切成两半。

您可以通过创建两个不同宽度的单独描边路径来创建更好的“斜角”：例如宽度为 4.0f 的“内”斜角和宽度为 2.0f 的“外”斜角。您将首先绘制“内部”斜面，然后将外部斜面（内部宽度的一半）覆盖在上面。如果您还将上下文剪辑到您正在抚摸的路径，您最终会得到两个单独的斜角，每个斜角的大小为 1.0f。请记住，笔画是围绕路径进行的。所以只有一半的冲程会在剪裁区域内。如果您使用与外斜面不同的渐变填充内斜面，则可以创建模仿许多 Apple 自己的嵌入按钮外观。在仔细查看了 Apple 的按钮后，我

于 2013-04-29T13:04:43.580 回答
0

这完全取决于您要查找的内容。您可以使用 2D 卷积核，类似于本文中描述的内容。

我不确定它是否在 iOS 上可用，但 Core Image 带有CIHeightFieldFromMask过滤器，它会产生你想要的东西。

于 2013-04-28T23:43:01.127 回答