Tutorial completo para iniciantes: Criando um canvas em Swift de forma simples e rápida
Desenhe em um canvas feito por você mesmo :)
Oi, tudo bem? Se você tem interesse em saber como construir um canvas bem simples no Xcode você está no lugar certo. O objetivo desse artigo é mostrar a construção de um pequeno app onde é possível desenhar com formas, cores e imagens.
Esse texto é baseado no conhecimento adquirido após desenvolver o aplicativo Color Beats, em conjunto com Dara Vasconcelos e Mayara Mendonça, para um dos projetos da Apple Developer Academy | UFPE. Como ainda não está disponível para testes, você pode conferir no Github.
No final do texto você terá algo similar a isso:
Enfim, vamos ao trabalho.
Passos iniciais
Primeiro: criaremos o projeto do zero, como um Single View App. Caso você já esteja trabalhando em um, apenas pule esses passos.
Após os passos acima, selecione o local onde ficarão os arquivos e finalize a criação do projeto.
Criando o canvas
Parte 1: Base do canvas
Como agora já temos um projeto novo para desenvolvimento, hora de criar a base do canvas. No Xcode, selecione o arquivo Main.storyboard e adicione uma view ao storyboard.
Essa será a área disponivel para desenho, deixe do tamanho que você deseja. Se quiser mudar a cor de fundo para melhor visualização, fique a vontade.
Agora criaremos o outlet (da view que acabamos de adicionar) para poder realizar ações com ele posteriormente. Para isso, abra o Assistant uzando o comando control + option + command + enter (⌃⌥ ⌘⏎) ou apenas como mostra as imagens abaixo. Com o Assistant aberto, pressione o tecla control⌃ e arraste da view para o código, assim possibilitando criar o seu outlet com um nome a sua escolha. Passos abaixo:
E assim temos uma base para fazer seu desenho :)
Parte 2: Adicionando formas
Aqui colocaremos os botões para adicionar as formas no seu canvas.
Utilizando os mesmos processos para adicionar objetos ao Main.storyboard mostrados acima(Imagem 1), adicione três botões ao storyboard, mude seus nomes para as formas que utilizaremos(triângulo, quadrado e círculo) e crie suas actions da mesma forma que criou os outlets acima(Imagem 2), mas com essas modificações:
Agora trabalharemos no código, vamos fazer programaticamente a criação e adição das formas no canvas. Para essa parte, vá para o arquivo ViewController.swift.
Começando pelo o triângulo. Vou explicar detalhadamente(como comentários no código) o processo de criação dessa forma para que as próximas fiquem com melhor entendimento:
O código apresentado é colocado dentro da Action que você acabou de criar para o triângulo:
@IBAction func adicionarTriangulo(_ sender: UIButton) {
// colocar o código do triângulo mostrado acima aqui
}Vamos repetir o quase o mesmo processo para as outras formas, mas mudando apenas alguns detalhes, já que são formas diferentes.
Para o quadrado, temos:
Para o círculo, temos:
E novamente, esses códigos são colocados dentro de suas respectivas Actions, como mostra abaixo:
@IBAction func adicionarQuadrado(_ sender: UIButton) {
// colocar o código do quadrado mostrado acima aqui
}@IBAction func adicionarCirculo(_ sender: UIButton) {
// colocar o código do círculo mostrado acima aqui
}
Com isso ja podemos adicionar todas essas formas!
Parte 3: Adicionando gestos
Caso tenha começado a testar o seu app, percebe que você apenas adiciona as formas ao seu canvas, mas não consegue fazer movimentos com elas? Pois bem, nessa parte trabalharemos na movimentação, rotação e redimensionamento das formas através do UIGestureRecognizer.
Primeiro, vamos a criação das funções que serão chamadas após o reconhecimento de cada gesto. Para essa parte, se mantenha no arquivo ViewController.swift.
Para fazer os movimentos das formas, usaremos o Pan Gesture:
Para realizar a rotação das formas, usaremos o Rotation Gesture:
Para redimensionar as formas, usaremos o Pinch Gesture:
Para trazer as formas para frente, usaremos o Tap Gesture:
Feito as funções que realizarão as ações para os gestos, hora de adicionar o reconhecimento deles para cada forma a ser colocada no canvas.
Percebe-se que são os mesmos gestos para todas, então, para evitar repetição de código, faremos uma função chamada chamarGesture com todos os gesture recognizers:
O parâmetro (imagem: UIImageView) que a função recebe é justamente a forma a qual os gestos serão adicionados.
Agora, adicionaremos essas linhas de código no final de cada função de criação das formas(adicionarTriangulo, adicionarQuadrado, …) para poder realizar a chamada da função chamarGesture criada para os gestos:
// dentro do adicionarTriangulo()
triangulo.isUserInteractionEnabled = true
chamarGesture(imagem: triangulo)// dentro do adicionarQuadrado()
quadrado.isUserInteractionEnabled = true
chamarGesture(imagem: quadrado)// dentro do adicionarCirculo()
circulo.isUserInteractionEnabled = true
chamarGesture(imagem: circulo)
O isUserInteractionEnabled é justamente para permitir a interação com a forma criada.
Para finalizar, vá para o arquivo Main.storyboard e selecione a view do canvas. No painel direito, selecione a opção Clip to Bounds para que suas formas não escapem do seu canvas.
Agora já temos um canvas com movimentos!! :)
Confere como está ficando:
Parte 4: Cores
Todas as formas criadas até agora foram feitas na cor preta, mas podemos colorir como a gente quiser. Para isso, vamos fazer uma paleta de cores para usar no nosso projeto.
A ideia é criar botões coloridos que, ao selecionado, permitirão usar as cores que eles representam nas formas que você deseja adicionar ao canvas.
Vá para o arquivo Main.storyboard e adicione, usando os processos da Imagem 1, quantos botões achar necessário(cada botão será uma cor).
No meu caso, escolhi 6 botões/cores. Para escolher a cor que deseja para a sua paleta de cores, troque a cor de fundo de cada botão(como mostra abaixo). Usaremos o backgroundColor do botão para selecionar as cores para as formas.
Após isso, é recomendado retirar o nome "Button" e também redimensionar os botões a sua escolha:
IMPORTANTE: para cada botão temos que adicionar uma Tag que serve como um identificador, permitindo saber qual botão foi selecionado. Para botão 1, tag 1; botão 2, tag 2, e assim vai:
Agora que ja temos as cores, hora de programar a ação para cada cor selecionada.
Primeiro, abra o Assistant(como mostra a Imagem 2) e crie uma variável global dentro da classe ViewController chamada cor e inicialize com a cor preta:
var cor: UIColor = UIColor.blackEssa variável será responsável por armazenar a cor escolhida nos botões.
Agora, criaremos uma função para realizar a ação de trocar a cor de acordo com o botão selecionado. Veja que usamos case 1, case 2, …; é justamente a Tag que colocamos em um dos passos acima(e também o número de botões/cores):
O código acima troca a cor da variável cor(que foi iniciada como preta) para a cor de fundo do botão selecionado. Isso vai servir pra usar posteriormente na criação de formas coloridas.
Agora só fazer a ligação da @IBAction criada acima com os botões do storyboard. Para isso, clique e arraste da bolinha para todos os botões das cores:
Por fim, apenas substitua essas linhas de código nas funções de adicionar formas(adicionarTriangulo, adicionarQuadrado, …):
// cor de preenchimento
ctx.cgContext.setFillColor(UIColor.black.cgColor)por essas aqui:
// cor de preenchimento
ctx.cgContext.setFillColor(cor.cgColor)Como mostra o exemplo abaixo:
Assim, todas as suas formas serão criadas com a cor que esta armazenada na variável cor, onde inicialmente é preta, mas que muda de acordo com a seleção dos botões de cores.
E………….. TEMOS UM CANVAS!! Vamos conferir:
Parte 5: Adicionando imagens
Agora a última parte, finalmente! Vamos adicionar imagens ao canvas.
No arquivo Main.storyboard, adicione um novo botão com nome "Imagem" no storyboard e crie sua @IBAction de nome adicionarImagem. OBS: (igual aos passos ja mostrado nas Imagens 1, 2 e 3).
Crie duas variáveis globais dentro da classe ViewController:
// a imagem que vai ser adicionada ao canvas
var imagemAdd:UIImageView = UIImageView(frame: CGRect(x: 100, y: 200, width: 200, height: 200))// a view controller do sistema para escolher imagens da galeria
var imagePicker = UIImagePickerController()
Adicione o delegate do ImagePicker dentro da função do viewDidLoad():
imagePicker.delegate = selfColoque esse código dentro da função adicionarImagem() criada acima:
Esse código serve para abrir a view controller da biblioteca de fotos, fazendo com que você possa escolher a foto que mais deseja. Além de já adicionar os gestos(pan, pinch, tap, …) na imagem escolhida e colocá-la no canvas, como mostra os comentários acima.
Por último, adicione esse código como uma extension da classe ViewController logo após a ultima chave fechada(}) do arquivo:
Ele serve para como uma extensão da classe que estamos trabalhando e permite a mágica(não é feitiçaria, é tecnologia — Banda Uó) acontecer.
No mais, rode seu projeto e voilà. Tudo certo e nada errado, um canvas pronto pra você desenhar a vontade! :)
Resultado final:
LINK DO PROJETO INTEIRO, para quem tiver interesse.
É isto, gente! Muito obrigado pra quem acompanhou até aqui. Espero que tenha ajudado :)
Em caso de dúvida, não hesite em comentar aqui abaixo.
Abraços!
