Saltar al contenido

Swift 3: dibujar un rectángulo

Te sugerimos que revises esta resolución en un entorno controlado antes de pasarlo a producción, saludos.

Solución:

Para ver la vista, debe crear una y darle un marco para que sepa qué tamaño debe tener.

Si coloca su código en un Playground y luego agrega esta línea:

let d = Draw(frame: CGRect(x: 0, y: 0, width: 100, height: 100))

Podrá hacer clic en el Vista rápida a la derecha, y luego verás la vista.

Cuadrado amarillo en un parque infantil


También puede agregar la vista como una subvista de view en tus ViewController y luego lo verás en el iPhone:

override func viewDidLoad() 
    super.viewDidLoad()

    let k = Draw(frame: CGRect(
        origin: CGPoint(x: 50, y: 50),
        size: CGSize(width: 100, height: 100)))

    // Add the view to the view hierarchy so that it shows up on screen
    self.view.addSubview(k)

Tenga en cuenta que nunca llama draw(_:) directamente. Es llamado para ti por toque de cacao para mostrar la vista.

Cuadrado amarillo en iPhoneSE

Cree una clase, la puse en un archivo Swift 3 separado.

//
//  Plot_Demo.swift
//
//  Storyboard is not good in creating self adapting UI
//  Plot_Demo creates the drawing programatically.

import Foundation
import UIKit

public class Plot_Demo: UIView

    override init(frame: CGRect) 
        super.init(frame: frame)
    

    required public init?(coder aDecoder: NSCoder) 
        fatalError("init(coder:) has not been implemented")
    

    public override func draw(_ frame: CGRect) 
        let h = frame.height
        let w = frame.width
        let color:UIColor = UIColor.yellow

        let drect = CGRect(x: (w * 0.25), y: (h * 0.25), width: (w * 0.5), height: (h * 0.5))
        let bpath:UIBezierPath = UIBezierPath(rect: drect)

        color.set()
        bpath.stroke()

        print("it ran")
        NSLog("drawRect has updated the view")
    

Ejemplo de uso en un UIViewController objeto:

override func viewDidLoad() 
    super.viewDidLoad()

    // Instantiate a new Plot_Demo object (inherits and has all properties of UIView)
    let k = Plot_Demo(frame: CGRect(x: 75, y: 75, width: 150, height: 150))

    // Put the rectangle in the canvas in this new object
    k.draw(CGRect(x: 50, y: 50, width: 100, height: 100))

    // view: UIView was created earlier using StoryBoard
    // Display the contents (our rectangle) by attaching it
    self.view.addSubview(k)

Ejecutar en un simulador de iPhone y en un iPhone:

ingrese la descripción de la imagen aquí

Usado XCode versión 8.0 (8A218a), Swift 3, destino iOS 10.0

Esta es otra forma de dibujar Rectángulo,

Paso 1: obtenga la ruta del rectángulo para los puntos dados

(Nota: arrPathPoints debe ser 4 en la cuenta para dibujar un rectángulo),

func getPathPayer(arrPathPoints:[CGPoint]) throws -> CAShapeLayer 
        enum PathError : Error
            case moreThan2PointsNeeded
        

        guard arrPathPoints.count > 2 else 
            throw PathError.moreThan2PointsNeeded
        

        let lineColor = UIColor.blue
        let lineWidth: CGFloat = 2
        let path = UIBezierPath()
        let pathLayer = CAShapeLayer()

        for (index,pathPoint) in arrPathPoints.enumerated() 
            switch index 
            //First point
            case 0:
                path.move(to: pathPoint)

            //Last point
            case arrPathPoints.count - 1:
                path.addLine(to: pathPoint)
                path.close()

            //Middle Points
            default:
                path.addLine(to: pathPoint)
            
        

        pathLayer.path = path.cgPath
        pathLayer.strokeColor = lineColor.cgColor
        pathLayer.lineWidth = lineWidth
        pathLayer.fillColor = UIColor.clear.cgColor

        return pathLayer
    

Paso 2: uso, método de llamada como este,

override func viewDidLoad() 
        super.viewDidLoad()

        do 
            let rectangleLayer = try getPathPayer(arrPathPoints: [
                CGPoint(x: 110, y: 110),    //Top-Left
                CGPoint(x: 130, y: 110),    //Top-Right
                CGPoint(x: 130, y: 130),    //Bottom-Right
                CGPoint(x: 110, y: 130)])   //Bottom-Left
            view.layer.addSublayer(rectangleLayer)
         catch 
            debugPrint(error)
        
    

Recuerda que puedes dar difusión a este escrito si te ayudó.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *