在 UIView 上绘制点和线
Drawing dots and lines on to a UIView
根据我在 Apple Swift 上找到的示例,我给自己做了一个学习练习 Swift website:
如你所见,中间有一条河和几个点,形成了一条小路。所以我开始在互联网上寻找类似的河流图像,并创建了一个 Xcode 游乐场。这就是我现在拥有的:
所以基本上我有一个 UIView
,其子视图由我发现的河流图像和一个由 UIBezierPath
组成的点组成。
我的第一个问题是:这是在 UIView 上绘制的正确方法吗?我的意思是使用 UIBezierPath
。我的 第二个 问题是:如何在 UIView
内的精确坐标处绘制点? (UIBezierPath
还是其他?)
更准确地说,我的目的是做一个算法让程序识别图像并根据像素颜色从河流的起点到终点画一条带点的线,通过在中间。
要在 UIView
上绘制 UIBezierPath
,请执行以下操作:
let xCoord = 10
let yCoord = 20
let radius = 8
let dotPath = UIBezierPath(ovalInRect: CGRectMake(xCoord, yCoord, radius, radius))
let layer = CAShapeLayer()
layer.path = dotPath.CGPath
layer.strokeColor = UIColor.blueColor().CGColor
drawingView.layer.addSublayer(layer)
此代码将在您的视图中绘制一个半径为 8、坐标为 10,20 的点。
更新:Swift 4+
let xCoord = 10
let yCoord = 20
let radius = 8
let dotPath = UIBezierPath(ovalIn: CGRect(x: xCoord, y: yCoord, width: radius, height: radius))
let layer = CAShapeLayer()
layer.path = dotPath.cgPath
layer.strokeColor = UIColor.blue.cgColor
drawingView.layer.addSublayer(layer)
下面是等式的直线部分的尝试:
var offset:CGFloat = 0; var squareWidth:Int = 20
var squareRows:Int = Int(view.frame.size.width/CGFloat(squareWidth))
var squareColumns:Int = Int(view.frame.size.height/CGFloat(squareWidth))
for (index,element) in (0...squareRows).enumerate(){
for (column,element) in (0...squareColumns).enumerate(){
// Build The Square
let rectanglePath = UIBezierPath(roundedRect: CGRectMake(
view.frame.minX + CGFloat(squareWidth * index) - offset,
view.frame.minY + CGFloat(column * squareWidth), 20, 20
),
cornerRadius: 0.00)
// Style Square
let a = CAShapeLayer()
a.path = rectanglePath.CGPath
a.strokeColor = UIColor.whiteColor().CGColor
a.fillColor = nil
a.opacity = 0.3
a.lineWidth = 1.5
view.layer.insertSublayer(a, atIndex: 1)
}
}
根据我在 Apple Swift 上找到的示例,我给自己做了一个学习练习 Swift website:
如你所见,中间有一条河和几个点,形成了一条小路。所以我开始在互联网上寻找类似的河流图像,并创建了一个 Xcode 游乐场。这就是我现在拥有的:
所以基本上我有一个 UIView
,其子视图由我发现的河流图像和一个由 UIBezierPath
组成的点组成。
我的第一个问题是:这是在 UIView 上绘制的正确方法吗?我的意思是使用 UIBezierPath
。我的 第二个 问题是:如何在 UIView
内的精确坐标处绘制点? (UIBezierPath
还是其他?)
更准确地说,我的目的是做一个算法让程序识别图像并根据像素颜色从河流的起点到终点画一条带点的线,通过在中间。
要在 UIView
上绘制 UIBezierPath
,请执行以下操作:
let xCoord = 10
let yCoord = 20
let radius = 8
let dotPath = UIBezierPath(ovalInRect: CGRectMake(xCoord, yCoord, radius, radius))
let layer = CAShapeLayer()
layer.path = dotPath.CGPath
layer.strokeColor = UIColor.blueColor().CGColor
drawingView.layer.addSublayer(layer)
此代码将在您的视图中绘制一个半径为 8、坐标为 10,20 的点。
更新:Swift 4+
let xCoord = 10
let yCoord = 20
let radius = 8
let dotPath = UIBezierPath(ovalIn: CGRect(x: xCoord, y: yCoord, width: radius, height: radius))
let layer = CAShapeLayer()
layer.path = dotPath.cgPath
layer.strokeColor = UIColor.blue.cgColor
drawingView.layer.addSublayer(layer)
下面是等式的直线部分的尝试:
var offset:CGFloat = 0; var squareWidth:Int = 20
var squareRows:Int = Int(view.frame.size.width/CGFloat(squareWidth))
var squareColumns:Int = Int(view.frame.size.height/CGFloat(squareWidth))
for (index,element) in (0...squareRows).enumerate(){
for (column,element) in (0...squareColumns).enumerate(){
// Build The Square
let rectanglePath = UIBezierPath(roundedRect: CGRectMake(
view.frame.minX + CGFloat(squareWidth * index) - offset,
view.frame.minY + CGFloat(column * squareWidth), 20, 20
),
cornerRadius: 0.00)
// Style Square
let a = CAShapeLayer()
a.path = rectanglePath.CGPath
a.strokeColor = UIColor.whiteColor().CGColor
a.fillColor = nil
a.opacity = 0.3
a.lineWidth = 1.5
view.layer.insertSublayer(a, atIndex: 1)
}
}