Core Graphics 中的内阴影

发布于 2024-08-19 08:53:28 字数 210 浏览 7 评论 0 原文

我想做一些类似于Core Graphics中Photoshop的内阴影效果的东西。如果我用这种效果绘制/填充路径,我想要得到类似于以下内容的内容: 替代文本

I want to do something similar to Photoshops inner shadow effect in Core Graphics. If I draw/fill a path with this effect, I want get something similar to the following: alt text

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

浅听莫相离 2024-08-26 08:53:28

以下是您需要创建的用于制作此图像的图层(从后到前):

基色,在本例中为白色背景。

影子。

投射阴影的形状。这是通过找到内部形状的边界框,将该框扩展超过阴影的宽度,然后在具有内部形状的框上切一个孔来实现的。

用内部形状剪掉它们。

然后最后绘制周围的彩色形状,在本例中是一个内部形状被剪掉的矩形。

注意:根据预期的外观,投射阴影的形状可能与填充前景色的形状相同,也可能不同。内部形状和外部形状之间的薄部分会减少阴影。如果不需要这种效果,则需要更大的外部形状才能获得一致的内部阴影。此外,如果阴影超出外部形状,则需要对阴影进行显式剪切。

要绘制中间有孔的形状(如本示例形状),您需要绘制带有两个子路径的路径。一个子路径是外部盒子,另一个子路径是内部不规则形状。如果您使用默认的非零缠绕数规则,则需要在与内部不规则形状相反的方向上指定外部框的点。例如,按顺时针顺序指定外部框的点需要按逆时针顺序指定内部形状的点。请参阅Quartz 2D 程序员指南中有关路径的部分 了解更多详细信息。

Here are the layers you need to create to make this image, from back to front:

The base color, in this case a white background.

The shadow.

The shape casting the shadow. This is made by finding the bounding box of the inner shape, expanding that box by more than the width of the shadow, then cutting a hole in the box with the inner shape.

Clipping these with the inner shape.

Then finally drawing the surrounding colored shape, in this case a rectangle with the inner shape cut out.

Note: Depending upon the expected look, the shape casting the shadow may or may not be the same shape filling the foreground color. A thin section between the inner shape and the outer shape would cast a reduced shadow. If that effect is not desired, a larger outer shape would be required to get the consistent inner shadow. Also, the explicit clipping of the shadow is required in case the shadow extends beyond the outer shape.

To draw a shape with a hole in the middle, like this example shape, you'll want to draw a path with two subpaths. One subpath would be the outer box, and the other would be the inner irregular shape. If you're using the default nonzero winding number rule, you'll want to specify the points for the outer box in the opposite direction than the inner irregular shape. For example, specifying the outer box's points in clockwise order would require specifying the inner shape's points in counter-clockwise order. Refer to the Quartz 2D Programmer's Guide's section on Paths for more details.

°如果伤别离去 2024-08-26 08:53:28

石英中的插入/内部投影

将此代码放入 xcode Playground 中,您就可以开始了:

https:/ /gist.github.com/eonist/520fa35958c123ad6840

Inset/Inner Drop-shadow in quartz

Drop this code in xcode playground and you are on your way:

https://gist.github.com/eonist/520fa35958c123ad6840

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文