swift - 每个 UIGraphicsGetCurrentContext 不同的 setStroke 颜色

Question

我想为每个 UIBezierPath 部分设置不同的描边颜色。但是顺序完全错误，我不知道如何解决。

这就是我想要的:

这就是我得到的:

好像顺序错了。有没有办法将颜色“绑定(bind)”到 bezierPath 并将其附加到上下文？我的代码如下。谢谢!

      let size = CGSize(width: 134, height:51)
    UIGraphicsBeginImageContext(size)
    let context = UIGraphicsGetCurrentContext()

    //// Rectangle Drawing
    let rectanglePath = UIBezierPath(roundedRect: CGRect(x: 0.5, y: 0.5, width: 126, height: 50), cornerRadius: 3)
    UIColor.lightGray.setStroke()
    rectanglePath.lineWidth = 1
    rectanglePath.stroke()
    let clipPath: CGPath = rectanglePath.cgPath
    context?.addPath(clipPath)

    //// Rectangle 2 Drawing
    let rectangle2Path = UIBezierPath(roundedRect: CGRect(x: 3, y: 3, width: 121, height: 45), cornerRadius: 3)
    UIColor.green.setFill()
    rectangle2Path.fill()
    let clipPathh: CGPath = rectangle2Path.cgPath
    context?.addPath(clipPathh)

    let rectangle3Path = UIBezierPath(roundedRect: CGRect(x: 128, y: 18, width: 6, height: 14), byRoundingCorners: [.topRight, .bottomRight], cornerRadii: CGSize(width: 3, height: 3))
    UIColor.gray.setFill()
    rectangle3Path.fill()
    let clipPathhh: CGPath = rectangle3Path.cgPath
    context?.addPath(clipPathhh)

    context?.closePath()

    // Convert to UIImage
    let cgimage = context!.makeImage();
    let uiimage = UIImage(cgImage: cgimage!)

    // End the graphics context
    UIGraphicsEndImageContext()

    image.image = uiimage;

Answer 1

明白了。自从我使用贝塞尔曲线路径以来已经有一段时间了，但经过一些尝试发现了问题 - 一切都按顺序进行。代码应该是:

let size = CGSize(width: 134, height:51)
UIGraphicsBeginImageContext(size)
let context = UIGraphicsGetCurrentContext()

//// Rectangle Drawing
let rectanglePath = UIBezierPath(roundedRect: CGRect(x: 0.5, y: 0.5, width: 126, height: 50), cornerRadius: 3)
UIColor.lightGray.setStroke()
rectanglePath.lineWidth = 1
let clipPath: CGPath = rectanglePath.cgPath
context?.addPath(clipPath)
rectanglePath.stroke()

//// Rectangle 2 Drawing
let rectangle2Path = UIBezierPath(roundedRect: CGRect(x: 3, y: 3, width: 121, height: 45), cornerRadius: 3)

UIColor.green.setFill()
let clipPathh: CGPath = rectangle2Path.cgPath
context?.addPath(clipPathh)
rectangle2Path.fill()

let rectangle3Path = UIBezierPath(roundedRect: CGRect(x: 128, y: 18, width: 6, height: 14), byRoundingCorners: [.topRight, .bottomRight], cornerRadii: CGSize(width: 3, height: 3))
UIColor.gray.setFill()
let clipPathhh: CGPath = rectangle3Path.cgPath
context?.addPath(clipPathhh)
rectangle3Path.fill()

// Convert to UIImage
let cgimage = context!.makeImage();
let uiimage = UIImage(cgImage: cgimage!)

// End the graphics context
UIGraphicsEndImageContext()


imageView.image = uiimage;

请注意，您在将路径添加到上下文后执行填充/描边。另外，请注意 closePath 调用没有影响，因为您已经通过定义 rect 提供了整个路径。