问题描述
使用UIKit绘制虚线行很容易。所以:
CGFloat破折号[] = {4,2};
[path setLineDash:破折号:2阶段:0];
[路径中风];
有没有办法画一条真正的虚线?
任何想法?
由于这个问题真的很老,没有人填写完整的 @IBDesignable
解决方案,这里是...
希望它可以节省一些人打字。
@IBDesignable class DottedVertical:UIView {
@IBInspectable var dotColor:UIColor = UIColor.etc
@IBInspectable var lowerHalfOnly:Bool = false
覆盖func draw(_ rect:CGRect){
//说你想要8个点,有完美的fenceposting:
let totalCount = 8 + 8 - 1
let fullHeight = bounds.size.height
let width = bounds.size.width
let itemLength = fullHeig ht / CGFloat(totalCount)
let path = UIBezierPath()
let beginFromTop = CGFloat(0.0)
let top = CGPoint(x:width / 2, y:beginFromTop)
let bottom = CGPoint(x:width / 2,y:fullHeight)
path.move(to:top)
path.addLine(to:bottom) )
path.lineWidth = width
let dashes:[CGFloat] = [itemLength,itemLength]
path.setLineDash(破折号,计数:破折号,阶段:0)
//对于ROUNDED点,只需更改为....
//让破折号:[CGFloat] = [0.0,itemLength * 2.0]
/ /path.lineCapStyle = CGLineCap.round
dotColor.setStroke()
path.stroke()
}
}
我将其设为垂直,您可以轻松更改。
请注意,为块的高度(totalCount等等)给出的示例代码会使块与像素完美匹配,与创建线的UIView的末端匹配。
请务必勾选下面的RobMayoff的答案,该答案给出了点 - 不是块的两行代码。
将线帽样式设置为圆形,并将on长度设置为一个很小的数字。
Swift playground示例:
import UIKit
import PlaygroundSupport
let path = UIBezierPath()
path.move( to:CGPoint(x:10,y:10))
path.addLine(to:CGPoint(x:290,y:10))
path.lineWidth = 8
让破折号:[CGFloat] = [0.001,path.lineWi dth * 2]
path.setLineDash(破折号,计数:破折号,阶段:0)
path.lineCapStyle = CGLineCap.round
UIGraphicsBeginImageContextWithOptions(CGSize(width:300) ,身高:20),假,2)
UIColor.white.setFill()
UIGraphicsGetCurrentContext()!。fill(.infinite)
UIColor.black .setStroke()
path.stroke()
let image = UIGraphicsGetImageFromCurrentImageContext()
let view = UIImageView(image:image)
PlaygroundPage.current.liveView =查看
UIGraphicsEndImageContext()
结果:
对于objective-C,使用与问题相同的示例类,只需添加
CGContextSetLineCap(cx,kCGLineCapRound);
在调用 CGContextStrokePath
之前,并更改 ra
数组值以匹配我的Swift代码。
It's easy to draw a dashed line with UIKit. So:
CGFloat dashes[] = {4, 2};
[path setLineDash:dashes count:2 phase:0];
[path stroke];
Is there any way way to draw a genuine dotted line?
Any ideas?
Since this question is really old and nobody put in a full @IBDesignable
solution, here it is...
Hope it saves someone some typing.
@IBDesignable class DottedVertical: UIView {
@IBInspectable var dotColor: UIColor = UIColor.etc
@IBInspectable var lowerHalfOnly: Bool = false
override func draw(_ rect: CGRect) {
// say you want 8 dots, with perfect fenceposting:
let totalCount = 8 + 8 - 1
let fullHeight = bounds.size.height
let width = bounds.size.width
let itemLength = fullHeight / CGFloat(totalCount)
let path = UIBezierPath()
let beginFromTop = CGFloat(0.0)
let top = CGPoint(x: width/2, y: beginFromTop)
let bottom = CGPoint(x: width/2, y: fullHeight)
path.move(to: top)
path.addLine(to: bottom)
path.lineWidth = width
let dashes: [CGFloat] = [itemLength, itemLength]
path.setLineDash(dashes, count: dashes.count, phase: 0)
// for ROUNDED dots, simply change to....
//let dashes: [CGFloat] = [0.0, itemLength * 2.0]
//path.lineCapStyle = CGLineCap.round
dotColor.setStroke()
path.stroke()
}
}
I made it vertical, you can easily change.
Just put a UIView in the scene; make it whatever width you wish and that will be the width of the dotted line.
Simply change the class to DottedVertical
and you're done. It will render like that properly in storyboard.
Note that the example code given for the height of the blocks ("totalCount" and so on...) results in the blocks perfectly, to the pixel, matching with the ends of the UIView that is creating the line.
Be sure to tick RobMayoff's answer below which gives the two needed lines of code for dots-not-blocks.
Set the line cap style to round and set the "on" length to a tiny number.
Swift playground example:
import UIKit
import PlaygroundSupport
let path = UIBezierPath()
path.move(to: CGPoint(x:10,y:10))
path.addLine(to: CGPoint(x:290,y:10))
path.lineWidth = 8
let dashes: [CGFloat] = [0.001, path.lineWidth * 2]
path.setLineDash(dashes, count: dashes.count, phase: 0)
path.lineCapStyle = CGLineCap.round
UIGraphicsBeginImageContextWithOptions(CGSize(width:300, height:20), false, 2)
UIColor.white.setFill()
UIGraphicsGetCurrentContext()!.fill(.infinite)
UIColor.black.setStroke()
path.stroke()
let image = UIGraphicsGetImageFromCurrentImageContext()
let view = UIImageView(image: image)
PlaygroundPage.current.liveView = view
UIGraphicsEndImageContext()
Result:
For objective-C, using the same example class as in the question, simply add
CGContextSetLineCap(cx, kCGLineCapRound);
before the call to CGContextStrokePath
, and change the ra
array values to match my Swift code.
这篇关于在2017年使用IBDesignable绘制虚线(不是虚线!)线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!