貝塞爾曲線路徑剪切的圖像邊框

Question

假設我有一個圖像，該圖像是通過使用用於剪切圖形的貝塞爾曲線路徑將另一個圖像繪制到其中來渲染的。 我想要的是能夠以新圖像的邊緣看起來像是倒角的方式渲染結果圖像。 我在想的是我想要的東西，它以一定的線寬繪制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變量，它表示要斜切的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的按鈕之后，我很確定這正是它們所做的（或非常相似的操作）以使外觀看起來呈斜角。

Answer 2

這完全取決於您要查找的內容。 您可以使用2D卷積內核，類似於本文所述 。

我不確定它是否可以在iOS上使用，但是Core Image帶有CIHeightFieldFromMask過濾器，該過濾器會生成類似您想要的內容。