Swift-蒙版图像内的边框 [英] Swift - Border Inside Masked Image

问题描述

我有一个UIBezierPath()使用的蒙版图像，我想在蒙版部分周围有边框，而不是原始图像.通过无数次尝试和错误，我不知疲倦地放弃了这一努力(无数次).还有更简单的方法吗?

I have a masked image that's utilized by a UIBezierPath() and I'd like to have a border around the masked portion rather than the original image. I've come this close in my (countless number) attempt through trial and error and, tirelessly, given up. Any easier way to do this?

这是我达到目标的程度:

This is how far I've come to my goal:

我想让边界向内！ :-(

I'd love to have the border go inward! :-(

Swift 2代码:

let picture = UIImageView(image: UIImage(named: "myPicture.png"))
picture.layer.contentMode = .ScaleAspectFit
picture.layer.clipsToBounds = true

let maskLayer = CAShapeLayer()
picture.layer.mask = maskLayer

maskLayer.frame = CGRect(origin: CGPointZero, size: picture.image.size)
let radius = picture.size.width/2
let center = CGPoint(x: picture.size.width/2, y: picture.size.height/2)

let path = UIBezierPath()
            path.moveToPoint(center)
            path.addArcWithCenter(center, radius: radius, startAngle: 0, endAngle: CGFloat(M_PI*2.0*0.2), clockwise: true)

maskLayer.path = path.CGPath

picture.layer.mask = maskLayer

picture.layer.borderWidth = 3
picture.layer.borderColor = UIColor.purpleColor().CGColor
picture.layer.cornerRadius = picture.layer.bounds.width/2

推荐答案

假设我理解我希望边界向内"的意思-我建议使用另一个CAShapeLayer将边界显示为描边的路径，并将其作为子层添加到图像视图的层中.

Assuming I understand what you mean by "I'd love to have the border go inward" - I would recommend using another CAShapeLayer to display your border as a stroked path, and adding it as a sublayer to your image view's layer.

您只需要在为遮罩定义的路径中设置通行证，设置strokeColor和lineWidth，然后将fillColor设置为clearColor.

You just have to set your pass in the path you defined for your mask, set your strokeColor and lineWidth, and set fillColor to clearColor.

类似的事情应该可以解决问题:

// insert your image here
guard let img = UIImage(named: "4.png") else {
    return
}

// frame of your image view
let frame = CGRectInset(view.bounds, 10, 10)

// your picture view
let pictureView = UIImageView(image: img)
pictureView.frame = frame
pictureView.contentMode = .ScaleAspectFit
pictureView.clipsToBounds = true

// the radius and center of your path
let radius = pictureView.frame.size.width*0.5
let center = CGPoint(x: pictureView.frame.size.width*0.5, y: pictureView.frame.size.height*0.5)

// your masking & stroking path
let path = UIBezierPath()
path.moveToPoint(center)
path.addArcWithCenter(center, radius: radius, startAngle: 0, endAngle: CGFloat(M_PI*2.0*0.8), clockwise: true)
path.closePath()

// the layer used to mask the image view
let maskLayer = CAShapeLayer()
maskLayer.frame = pictureView.bounds
maskLayer.path = path.CGPath
pictureView.layer.mask = maskLayer

// the layer used to draw the border
let strokeLayer = CAShapeLayer()
strokeLayer.frame = pictureView.bounds
strokeLayer.fillColor = UIColor.clearColor().CGColor
strokeLayer.path = path.CGPath
strokeLayer.strokeColor = UIColor.purpleColor().CGColor
strokeLayer.lineWidth = 10
pictureView.layer.addSublayer(strokeLayer)

view.addSubview(pictureView)

给出以下输出:

此外，我要注意的是，您在OP中提供的代码甚至都没有编译-请始终从IDE复制并粘贴您的代码，而不是尝试自己输入！

Also, I would note that the code you provided in the OP didn't even compile - please always copy and paste in your code from the IDE instead of trying to type it out yourself!

这篇关于Swift-蒙版图像内的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！