swift - Cómo trazar rectilíneas/rectángulos en forma rápida utilizando CGContext

Question

He estado buscando en internet durante días tratando de encontrar los ejemplos de código más simples sobre cómo dibujar un rectángulo o líneas de manera procesal en Swift. He visto cómo hacerlo anulando el comando DrawRect. Creo que puedes crear un CGContext y luego dibujar en una imagen, pero me encantaría ver algunos ejemplos de código simples. ¿O es este un enfoque terrible? Gracias.

class MenuController: UIViewController
{
override func viewDidLoad()
{
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
self.view.backgroundColor = UIColor.blackColor()
var logoFrame = CGRectMake(0,0,118,40)
var imageView = UIImageView(frame: logoFrame)
imageView.image = UIImage(named:"Logo")
self.view.addSubview(imageView)
//need to draw a rectangle here
}
}

Answer 1

Aquí hay un ejemplo que crea un UIImage personalizado que contiene un fondo transparente y un rectángulo rojo con líneas que se cruzan diagonalmente a través de él.

class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad();
let imageSize = CGSize(width: 200, height: 200)
let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 100, y: 100), size: imageSize))
self.view.addSubview(imageView)
let image = drawCustomImage(size: imageSize)
imageView.image = image
}
}
func drawCustomImage(size: CGSize) -> UIImage {
// Setup our context
let bounds = CGRect(origin: .zero, size: size)
let opaque = false
let scale: CGFloat = 0
UIGraphicsBeginImageContextWithOptions(size, opaque, scale)
let context = UIGraphicsGetCurrentContext()!
// Setup complete, do drawing here
context.setStrokeColor(UIColor.red.cgColor)
context.setLineWidth(2)
context.stroke(bounds)
context.beginPath()
context.move(to: CGPoint(x: bounds.minX, y: bounds.minY))
context.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
context.move(to: CGPoint(x: bounds.maxX, y: bounds.minY))
context.addLine(to: CGPoint(x: bounds.minX, y: bounds.maxY))
context.strokePath()
// Drawing complete, retrieve the finished image and cleanup
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image!
}

Answer 2

Una respuesta actualizada usando Swift 3.0

class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad();
let imageSize = CGSize(width: 200, height: 200)
let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 100, y: 100), size: imageSize))
self.view.addSubview(imageView)
let image = drawCustomImage(size: imageSize)
imageView.image = image
}
}
func drawCustomImage(size: CGSize) -> UIImage? {
// Setup our context
let bounds = CGRect(origin: CGPoint.zero, size: size)
let opaque = false
let scale: CGFloat = 0
UIGraphicsBeginImageContextWithOptions(size, opaque, scale)
guard let context = UIGraphicsGetCurrentContext() else { return nil }
// Setup complete, do drawing here
context.setStrokeColor(UIColor.red.cgColor)
context.setLineWidth(5.0)
// Would draw a border around the rectangle
// context.stroke(bounds)
context.beginPath()
context.move(to: CGPoint(x: bounds.maxX, y: bounds.minY))
context.addLine(to: CGPoint(x: bounds.minX, y: bounds.maxY))
context.strokePath()
// Drawing complete, retrieve the finished image and cleanup
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
let imageSize = CGSize(width: 200, height: 200)
let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 100, y: 100), size: imageSize))
let image = drawCustomImage(size: imageSize)
imageView.image = image

Answer 3

Usé la respuesta aceptada para dibujar líneas en un juego de Tic Tac Toe cuando uno de los jugadores ganó. Gracias, bueno saber que funcionó. Desafortunadamente, tuve algunos problemas para que funcionara en diferentes tamaños de iPhones y iPads simultáneamente. Eso es probablemente algo que debería haber sido abordado. Básicamente, lo que estoy diciendo es que puede que no valga la pena el problema de todo ese código, dependiendo de su caso.

Mi solución alternativa es simplemente hacer una línea personalizada y de mejor aspecto en Photoshop y luego cargarla con UIImageView. Para mí esto fue MUCHO más simple, funciona mejor y se ve mejor. Obviamente, realmente depende de para qué lo necesites.

Pasos:

1: Descargar o crear una imagen (preferiblemente guardada como .PNG)

2: Arrástrelo a su proyecto

3: Arrastra una vista de UIImage a tu guión gráfico

4: haga clic en la vista de imagen y seleccione la imagen en el inspector de atributos

5: Presione Ctrl y arrastre la Vista de Imagen a su archivo .swift para declarar un Outlet

6: Establezca las restricciones de reproducción automática para que funcione en TODOS los dispositivos FÁCILMENTE

Animar, rotar y transformar vistas de imágenes dentro y fuera de la pantalla también es posiblemente más fácil

Para cambiar la imagen:

yourImageViewOutletName.image = UIImage(named: "ImageNameHere")