圆形 UIView 中的边框使用 Swift
Border in circle UIView using Swift
我正在尝试制作一个带边框的 UIView,但我只让它出现在 UIView 中,而不仅仅是在圆圈上。
在棕色圆圈中我想要一个黑色边框,但它必须在圆圈中而不是在 UIView 中。
我有一个名为 Ball 的 class,我在其中画圆。
class Ball: UIView {
var desiredColour = UIColor.blueColor()
struct mine {
static var p = UIBezierPath(ovalInRect: CGRectMake(0,0,118,117))
}
override func drawRect(rect: CGRect) {
// Drawing code
desiredColour.setFill()
mine.p.fill()
}
func colour() {
var randColor: UIColor = Colors.randomColor()
Colors.ballColor = randColor
Colors.colorPosition = find(Colors.arrayColors, randColor)!
desiredColour = randColor
self.setNeedsDisplay()
}
}
我使用了代码:
override func drawRect(rect: CGRect) {
// Drawing code
desiredColour.setFill()
let desiredBorderColor = UIColor.blackColor()
desiredBorderColor.setStroke()
self.layer.borderWidth = 3.0
self.layer.cornerRadius = self.frame.size.width/2.0
mine.p.fill()
mine.p.stroke()
}
但我的边框有一点切口:
override func drawRect(rect: CGRect) {
// Drawing code
desiredColour.setFill()
let desiredBorderColor = UIColor.blackColor()
desiredBorderColor.setStroke()
mine.p.lineWidth = 2.0 //set to whatever you want
mine.p.fill()
mine.p.stroke()
}
但请注意,要使边框正常工作,您需要在周围环绕一些 space。
执行以下操作。声明 myBorderWidth
(类型 CGFloat
)属性 然后更改
static var p = UIBezierPath(ovalInRect: CGRectMake(0,0,118,117))
到
static var p = UIBezierPath(ovalInRect: CGRectMake(myBorderWidth/2,myBorderWidth/2,118-myBorderWidth/2,117-myBorderWidth/2))
您还可以通过将 myBorderWidth/2
声明为 属性 来删除重复项。
尝试通过将视图作为参数传递来调用此函数
func drawBlackBorder(view: UIView) {
view.layer.borderColor = UIColor.blackColor
view.layer.borderWidth = 1.0
view.layer.cornerRadius = view.frame.size.width/2.0
view.backgroundColor = UIColor.brownColor
}
无需修改图层,只需设置 UIBezierPath 并根据边框厚度设置适当的插图并设置其宽度(在 Swift 4.2 上测试):
var fillColor: UIColor //circle color
var strokeColor: UIColor //border color
var borderWidth: CGFloat //border width
override func draw(_ rect: CGRect) {
fillColor.setFill()
strokeColor.setStroke()
let circlePath = UIBezierPath(ovalIn: CGRect(x: borderWidth, y: borderWidth, width: rect.width - borderWidth*2, height: rect.height - borderWidth*2))
circlePath.lineWidth = borderWidth
circlePath.stroke()
circlePath.fill()
}
我正在尝试制作一个带边框的 UIView,但我只让它出现在 UIView 中,而不仅仅是在圆圈上。
在棕色圆圈中我想要一个黑色边框,但它必须在圆圈中而不是在 UIView 中。
我有一个名为 Ball 的 class,我在其中画圆。
class Ball: UIView {
var desiredColour = UIColor.blueColor()
struct mine {
static var p = UIBezierPath(ovalInRect: CGRectMake(0,0,118,117))
}
override func drawRect(rect: CGRect) {
// Drawing code
desiredColour.setFill()
mine.p.fill()
}
func colour() {
var randColor: UIColor = Colors.randomColor()
Colors.ballColor = randColor
Colors.colorPosition = find(Colors.arrayColors, randColor)!
desiredColour = randColor
self.setNeedsDisplay()
}
}
我使用了代码:
override func drawRect(rect: CGRect) {
// Drawing code
desiredColour.setFill()
let desiredBorderColor = UIColor.blackColor()
desiredBorderColor.setStroke()
self.layer.borderWidth = 3.0
self.layer.cornerRadius = self.frame.size.width/2.0
mine.p.fill()
mine.p.stroke()
}
但我的边框有一点切口:
override func drawRect(rect: CGRect) {
// Drawing code
desiredColour.setFill()
let desiredBorderColor = UIColor.blackColor()
desiredBorderColor.setStroke()
mine.p.lineWidth = 2.0 //set to whatever you want
mine.p.fill()
mine.p.stroke()
}
但请注意,要使边框正常工作,您需要在周围环绕一些 space。
执行以下操作。声明 myBorderWidth
(类型 CGFloat
)属性 然后更改
static var p = UIBezierPath(ovalInRect: CGRectMake(0,0,118,117))
到
static var p = UIBezierPath(ovalInRect: CGRectMake(myBorderWidth/2,myBorderWidth/2,118-myBorderWidth/2,117-myBorderWidth/2))
您还可以通过将 myBorderWidth/2
声明为 属性 来删除重复项。
尝试通过将视图作为参数传递来调用此函数
func drawBlackBorder(view: UIView) {
view.layer.borderColor = UIColor.blackColor
view.layer.borderWidth = 1.0
view.layer.cornerRadius = view.frame.size.width/2.0
view.backgroundColor = UIColor.brownColor
}
无需修改图层,只需设置 UIBezierPath 并根据边框厚度设置适当的插图并设置其宽度(在 Swift 4.2 上测试):
var fillColor: UIColor //circle color
var strokeColor: UIColor //border color
var borderWidth: CGFloat //border width
override func draw(_ rect: CGRect) {
fillColor.setFill()
strokeColor.setStroke()
let circlePath = UIBezierPath(ovalIn: CGRect(x: borderWidth, y: borderWidth, width: rect.width - borderWidth*2, height: rect.height - borderWidth*2))
circlePath.lineWidth = borderWidth
circlePath.stroke()
circlePath.fill()
}