在 swift 中绘制 UIImageView
Drawing on UIImageView in swift
我正在尝试开发一个可以在 UIImageView 上绘制内容的应用程序。我得到了以下代码。
import UIKit
class Line
{
var startPoint:CGPoint
var endPoint:CGPoint
init (start:CGPoint , end:CGPoint)
{
startPoint = start
endPoint = end
}
}
class AnnotationView: UIView {
static internal let nibName = "AnnotationView"
@IBOutlet weak var imageView: UIImageView!
var lines :[Line] = []
var lastPoint:CGPoint!
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
lastPoint = touches.first?.location(in: self)
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first
{
let newPoint = touch.location(in:self)
lines.append(Line(start: lastPoint, end: newPoint))
lastPoint = newPoint
self.setNeedsDisplay()
}
}
override func draw(_ rect: CGRect) {
if let context = UIGraphicsGetCurrentContext()
{
context.beginPath()
for line in lines
{
context.move(to: line.startPoint)
context.addLine(to: line.endPoint)
}
context.setLineCap(CGLineCap.round)
context.setStrokeColor(red: 0, green: 0, blue: 0, alpha: 1)
context.setLineWidth(5)
context.strokePath()
}
}
}
所以现在在上面的代码中,我有从 UIView 派生的 AnnotationView class,其中我有一个 UIImageView,我从界面构建器将其设置为超级视图的全尺寸。这是一个简单的绘图应用程序,我想在 UIImageView 上绘制一些东西。现在的问题是,当 imageView.image 为 nil 时,它会显示我的绘图,如果为 imageView.image 设置了任何图像,那么它不会显示绘图。它只显示在此 imageView 中设置的图像。我已经在这两种情况下调试了所有被调用的方法。肯定有一些我想念的东西。谁能帮帮我吗?我想在我在 UIImageView 中设置的图像之上显示我的绘图。
问候,
妮娜
问题是您在 AnnotationView
的主图层中绘图,该图层位于其任何子视图的后面,包括您的 UIImageView
。解决方案是将您的绘图移动到单独的 sublayer
添加到 AnnotationView
的主图层。
不是直接在 draw()
方法中绘制线条,您需要有一个单独的图层用于绘图叠加层。将此 属性 添加到您的 AnnotationView
:
let drawingLayer = CAShapeLayer()
并重写 awakeFromNib()
以在从 Storyboard/Nib:
加载视图后立即使该图层成为其他所有内容之上的子图层
override func awakeFromNib() {
super.awakeFromNib()
layer.addSublayer(drawingLayer)
}
现在让我们创建一个函数,以便在每次需要更新叠加层时调用而不是调用 setNeedsDisplay()
:
func updateDrawingOverlay() {
let path = CGMutablePath()
for line in lines {
path.move(to: line.startPoint)
path.addLine(to: line.endPoint)
}
drawingLayer.frame = imageView.frame
drawingLayer.path = path
drawingLayer.lineWidth = 5
drawingLayer.strokeColor = UIColor.black.cgColor
setNeedsDisplay()
}
删除 draw(_:)
方法中的代码,因为它现在是多余的,并将来自 touchesMoved(_: with:)
的 setNeedsDisplay()
调用替换为 updateDrawingOverlay()
调用。
整个事情对你来说应该是这样的:
import UIKit
class Line {
var startPoint:CGPoint
var endPoint:CGPoint
init (start:CGPoint , end:CGPoint) {
startPoint = start
endPoint = end
}
}
class AnnotationView: UIView {
static internal let nibName = "AnnotationView"
@IBOutlet weak var imageView: UIImageView!
var lines :[Line] = []
var lastPoint:CGPoint!
let drawingLayer = CAShapeLayer()
override func awakeFromNib() {
super.awakeFromNib()
layer.addSublayer(drawingLayer)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
lastPoint = touches.first?.location(in: self)
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first
{
let newPoint = touch.location(in:self)
lines.append(Line(start: lastPoint, end: newPoint))
lastPoint = newPoint
updateDrawingOverlay()
}
}
func updateDrawingOverlay() {
let path = CGMutablePath()
for line in lines {
path.move(to: line.startPoint)
path.addLine(to: line.endPoint)
}
drawingLayer.frame = imageView.frame
drawingLayer.path = path
drawingLayer.lineWidth = 5
drawingLayer.strokeColor = UIColor.black.cgColor
setNeedsDisplay()
}
}
这应该可以解决问题,让我知道进展如何。
我正在尝试开发一个可以在 UIImageView 上绘制内容的应用程序。我得到了以下代码。
import UIKit
class Line
{
var startPoint:CGPoint
var endPoint:CGPoint
init (start:CGPoint , end:CGPoint)
{
startPoint = start
endPoint = end
}
}
class AnnotationView: UIView {
static internal let nibName = "AnnotationView"
@IBOutlet weak var imageView: UIImageView!
var lines :[Line] = []
var lastPoint:CGPoint!
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
lastPoint = touches.first?.location(in: self)
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first
{
let newPoint = touch.location(in:self)
lines.append(Line(start: lastPoint, end: newPoint))
lastPoint = newPoint
self.setNeedsDisplay()
}
}
override func draw(_ rect: CGRect) {
if let context = UIGraphicsGetCurrentContext()
{
context.beginPath()
for line in lines
{
context.move(to: line.startPoint)
context.addLine(to: line.endPoint)
}
context.setLineCap(CGLineCap.round)
context.setStrokeColor(red: 0, green: 0, blue: 0, alpha: 1)
context.setLineWidth(5)
context.strokePath()
}
}
}
所以现在在上面的代码中,我有从 UIView 派生的 AnnotationView class,其中我有一个 UIImageView,我从界面构建器将其设置为超级视图的全尺寸。这是一个简单的绘图应用程序,我想在 UIImageView 上绘制一些东西。现在的问题是,当 imageView.image 为 nil 时,它会显示我的绘图,如果为 imageView.image 设置了任何图像,那么它不会显示绘图。它只显示在此 imageView 中设置的图像。我已经在这两种情况下调试了所有被调用的方法。肯定有一些我想念的东西。谁能帮帮我吗?我想在我在 UIImageView 中设置的图像之上显示我的绘图。 问候, 妮娜
问题是您在 AnnotationView
的主图层中绘图,该图层位于其任何子视图的后面,包括您的 UIImageView
。解决方案是将您的绘图移动到单独的 sublayer
添加到 AnnotationView
的主图层。
不是直接在 draw()
方法中绘制线条,您需要有一个单独的图层用于绘图叠加层。将此 属性 添加到您的 AnnotationView
:
let drawingLayer = CAShapeLayer()
并重写 awakeFromNib()
以在从 Storyboard/Nib:
override func awakeFromNib() {
super.awakeFromNib()
layer.addSublayer(drawingLayer)
}
现在让我们创建一个函数,以便在每次需要更新叠加层时调用而不是调用 setNeedsDisplay()
:
func updateDrawingOverlay() {
let path = CGMutablePath()
for line in lines {
path.move(to: line.startPoint)
path.addLine(to: line.endPoint)
}
drawingLayer.frame = imageView.frame
drawingLayer.path = path
drawingLayer.lineWidth = 5
drawingLayer.strokeColor = UIColor.black.cgColor
setNeedsDisplay()
}
删除 draw(_:)
方法中的代码,因为它现在是多余的,并将来自 touchesMoved(_: with:)
的 setNeedsDisplay()
调用替换为 updateDrawingOverlay()
调用。
整个事情对你来说应该是这样的:
import UIKit
class Line {
var startPoint:CGPoint
var endPoint:CGPoint
init (start:CGPoint , end:CGPoint) {
startPoint = start
endPoint = end
}
}
class AnnotationView: UIView {
static internal let nibName = "AnnotationView"
@IBOutlet weak var imageView: UIImageView!
var lines :[Line] = []
var lastPoint:CGPoint!
let drawingLayer = CAShapeLayer()
override func awakeFromNib() {
super.awakeFromNib()
layer.addSublayer(drawingLayer)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
lastPoint = touches.first?.location(in: self)
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first
{
let newPoint = touch.location(in:self)
lines.append(Line(start: lastPoint, end: newPoint))
lastPoint = newPoint
updateDrawingOverlay()
}
}
func updateDrawingOverlay() {
let path = CGMutablePath()
for line in lines {
path.move(to: line.startPoint)
path.addLine(to: line.endPoint)
}
drawingLayer.frame = imageView.frame
drawingLayer.path = path
drawingLayer.lineWidth = 5
drawingLayer.strokeColor = UIColor.black.cgColor
setNeedsDisplay()
}
}
这应该可以解决问题,让我知道进展如何。