使用UIBezierPath屏蔽背景图像

时间:2017-09-27 14:19:31

标签: ios swift uibezierpath uigraphicscontext

我想绘制一条半圆线作为背景图像的遮罩。

我有这个图片: Backgound image
我想得到这个: Mask

我在自定义UIView的draw方法中尝试了以下代码,但我不知道如何仅屏蔽描边路径,而不是整个弧。我错过了什么?

using System;
using DotNetCross.Memory;

interface IStuff
{
    void DoStuff();
}

interface IPlsStop : IStuff
{
    void Whatevah();
}

struct Stuff : IPlsStop
{
    public void DoStuff()
    {

    }

    public void Whatevah()
    {

    }
}

class Program
{
    static void Main(string[] args)
    {
        Console.WriteLine(Unsafe.SizeOf<Stuff>());    // 1
        Console.WriteLine(Unsafe.SizeOf<IStuff>());   // 8
        Console.WriteLine(Unsafe.SizeOf<IPlsStop>()); // 8

        Console.ReadKey();
    }
}

1 个答案:

答案 0 :(得分:2)

该方法有很多内容,其中很多内容不应该在drawRect中 - 如果可以的话,最好避免使用drawRect,因为它会将图形工作转移到CPU上。

为简单起见,我已经展示了如何使用上下文和路径来屏蔽图像 - 上面代码中的问题是路径非常窄并且可能在彩虹图像的可见部分之外,所以我想你什么都看不到?

在编写这样的代码时,在操场上进行操作会很有帮助,因此您可以很容易地看到即时结果并调整您正在做的事情。抚摸路径也很方便,看看它是否在你没想到的地方。将原来的彩虹添加到游乐场,我这样做了:

import UIKit

let image = UIImage(named: "I6BbE.jpg")!

let renderer = UIGraphicsImageRenderer(size: image.size)
let maskedImage = renderer.image {
    context in
    let cgContext = context.cgContext
    let bounds = context.format.bounds
    cgContext.setLineWidth(50)

    let path = UIBezierPath()
    path.addArc(
        withCenter: CGPoint(x: bounds.midX, y: bounds.height), 
        radius: bounds.height-100, 
        startAngle: .pi, 
        endAngle: 0, 
        clockwise: true)

    cgContext.addPath(path.cgPath)
    cgContext.replacePathWithStrokedPath()
    cgContext.clip()
    image.draw(in: bounds)
}

maskedImage

这给了我:

enter image description here