 |
|
||||
HTML5 ::: Aplicativos Completos ::: Programas de desenho, edição e visualização de imagens e fotos |
Como criar um programa de desenho simples usando o objeto Canvas do HTML5Quantidade de visualizações: 7735 vezes |
|
Revisando alguns códigos que desenvolvi para clientes ao longo desses anos, encontrei um exemplo de um programa de desenho bem simples demonstrando as possibilidades gráficas do elemento Canvas do HTML. Este código foi escrito há uns dois anos e resolvi compartilhar com todos, para que vocês possam aprimorá-lo e acrescentar novas idéias, afinal, o HTML5 está mais atual do que nunca. Veja o resultado no navegador:  Eu o escrevi de forma bem simples, sem usar jQuery ou qualquer outro framework, apenas JavaScript raiz mesmo, de forma que até os estudantes mais iniciantes não terão dificuldade de entender. Veja a listagem completa e com comentários:
<html>
<head>
<title>Desenhando no canvas do HTML5</title>
</head>
<body style="padding: 15px">
<b>Clique e arraste para desenhar</b><br><br>
<canvas id="quadro" style="border: 1px solid #666"
width="600" height="350"></canvas>
<br><br><button onClick="limpar()">Limpar</button>
<script type="text/javascript">
// obtém uma referência ao canvas
var quadro = document.getElementById('quadro');
// vamos obter o contexto de desenho
var areaDesenho = quadro.getContext("2d");
// podemos desenhar?
var podeDesenhar = false; // ainda não
// vetores para guardar as posições x, y, e se o mouse está sendo
// movimentado pressionado
var vetorX = new Array();
var vetorY = new Array();
var vetorArrastar = new Array();
// agora vamos adicionar na área de desenho um "ouvidor" de
// eventos mousedown, ou seja, vamos detectar quando o usuário
// pressionar o botão do mouse (sem soltar)
quadro.addEventListener('mousedown', function(e){
// podemos iniciar o desenho
podeDesenhar = true;
registrarClique(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, false);
desenhar(); // faça o desenho, moço
});
// o "ouvidor" de evento que detecta se o mouse está sendo arrastado
// pressionado
quadro.addEventListener('mousemove', function(e){
if(podeDesenhar){
registrarClique(e.pageX - this.offsetLeft, e.pageY -
this.offsetTop, true);
desenhar(); // faça o desenho, moço
}
});
// o "ouvidor" de evento que detecta se o mouse foi liberado
// e interrompe o desenho
quadro.addEventListener('mouseup', function(e){
podeDesenhar = false;
});
// o mouse saiu da área de desenho?
quadro.addEventListener('mouseleave', function(e){
podeDesenhar = false;
});
function registrarClique(x, y, arrastar){
// aqui nós guardamos em vetores as posições x, y do clique ou
// o movimento do mouse pressionado.
vetorX.push(x);
vetorY.push(y);
vetorArrastar.push(arrastar);
}
// é aqui que a mágica ocorre
function desenhar(){
// primeiro vamos limpar o quadro de desenho
areaDesenho.clearRect(0, 0, areaDesenho.canvas.width,
areaDesenho.canvas.height);
areaDesenho.strokeStyle = "#5c5cd6"; // cor
areaDesenho.lineJoin = "round"; // formato da junção de linha
areaDesenho.lineWidth = 5; // largura da linha
// percorremos os vetores, usando como base o vetor de coordenadas x
for(var i = 0; i < vetorX.length; i++){
areaDesenho.beginPath(); // inicia o caminho
// o mouse foi arrastado neste evento?
if((vetorArrastar[i] == true && i > 0)){
areaDesenho.moveTo(vetorX[i - 1], vetorY[i - 1]);
}
else{
// é o início do desenho
areaDesenho.moveTo(vetorX[i] - 1, vetorY[i]);
}
// desenha a linha do ponto X ao ponto Y
areaDesenho.lineTo(vetorX[i], vetorY[i]);
// fecha o caminho
areaDesenho.closePath();
// conclui de fato o desenho
areaDesenho.stroke();
}
}
// e aqui nós limpamos a área de desenho e esvaziamos os vetores
function limpar(){
areaDesenho.clearRect(0, 0, areaDesenho.canvas.width,
areaDesenho.canvas.height);
vetorX = [];
vetorY = [];
vetorArrastar = [];
}
</script>
</body>
</html>
Salve o código como "desenho.html" (cuidado para não salvar como "desenho.html.txt") e abra-o no seu navegador, remoto ou localmente. Você pode começar suas modificações alterando a cor do desenho, a largura da linha, etc. Você pode também deixar figuras pré-configuradas e até permitir que o usuário inclua fotos no Canvas. Para os estudantes que já sabem Node.js, saiba que é possível enviar os três vetores via sockets em um ambiente real time para que outros usuários na rede vejam o seu desenho em tempo real. Bons estudos. |
Android Java ::: android.widget ::: Button |
Como detectar um clique em um botão do Android usando o evento onClick no XML de layoutQuantidade de visualizações: 2510 vezes |
|
Nesta dica mostrarei como podemos detectar um clique em um botão usando o evento onClick diretamente no arquivo XML de layout. No entanto, para usar este artifício, algumas regras devem ser seguidas: a) O método chamado pelo clique do botão deverá ser public e retornar void; b) O único parâmetro do método deverá conter apenas um objeto da classe View, representando a view na qual o evento onclick ocorreu. Veja um exemplo completo no qual detectamos o clique no botão e exibimos uma mensagem AlertDialog contendo apenas um botão OK. Comece analisando o XML de layout (o nome do botão foi definido no arquivo strings.xml):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="
http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
tools:context=".MainActivity">
<Button xmlns:android="
http://schemas.android.com/apk/res/android"
android:id="@+id/button_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/btn_enviar"
android:onClick="enviarMensagem"
/>
</LinearLayout>
Veja agora o código Java no MainActivity.java:
package com.example.estudosandroid;
import androidx.appcompat.app.AppCompatActivity;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.app.AlertDialog;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
// método público que será chamado ao clicarmos no botão
public void enviarMensagem(View view) {
AlertDialog dialogo = new
AlertDialog.Builder(MainActivity.this).create();
dialogo.setTitle("Aviso");
dialogo.setMessage("Esta é uma mensagem de aviso");
dialogo.setButton(AlertDialog.BUTTON_NEUTRAL, "OK",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog,
int which){
dialog.dismiss(); // fecha o AlertDialog
}
}
);
dialogo.show();
}
}
|
PHP ::: Dicas & Truques ::: Programação Orientada a Objetos |
Programação Orientada a Objetos em PHP - Como passar um objeto de uma classe para uma função PHPQuantidade de visualizações: 8800 vezes |
Em algumas situações precisamos fornecer um objeto de uma classe para um método de outra classe ou mesmo uma simples função PHP. Nesta dica eu mostro como isso pode ser feito. Note que, ao receber o objeto da classe no método ou função, todas as alterações feitas no objeto serão refletidas no objeto original, ou seja, objetos de classe são automaticamente passados por referência em PHP. Eis o código:
<?php
// classe Cliente com duas variáveis privadas e seus
// correspondentes métodos mutatórios e acessórios
class Cliente{
private $nome;
private $email;
public function setNome($nome){
$this->nome = $nome;
}
public function getNome(){
return $this->nome;
}
public function setEmail($email){
$this->email = $email;
}
public function getEmail(){
return $this->email;
}
}
// vamos criar um novo objeto da classe Cliente
$c = new Cliente;
$c->setNome("Osmar J. Silva");
$c->setEmail("osmar@arquivodecodigos.com.br");
// vamos agora passar este objeto para uma função PHP
imprimirCliente($c);
// e aqui está a função que recebe o objeto da classe Cliente
// e exibe o valor de suas variáveis
function imprimirCliente($cliente){
echo "Nome: " . $cliente->getNome() . "<br>
E-Mail: " . $cliente->getEmail();
}
?>
Ao executar este código teremos o seguinte resultado: Nome: Osmar J. Silva E-Mail: osmar@arquivodecodigos.com.br |
Java ::: Pacote java.lang ::: String |
Curso de Java - Como usar a classe String da linguagem JavaQuantidade de visualizações: 7799 vezes |
|
A classe String, presente no pacote java.lang, permite a representação de cadeias (strings) de caracteres. Todos os strings literais em Java, tais como "abc", são implementados como instâncias desta classe. Por pertencer ao pacote java.lang, não precisamos importar nenhum pacote para poder usar esta classe em nossos programas Java. Veja um exemplo de como declarar e inicializar uma variável do tipo String:
public class Main {
public static void main(String[] args) {
String nome = "Osmar J. Silva";
System.out.println(nome);
}
}
Veja a posição desta classe na hierarquia de classes da plataforma Java: java.lang.Object java.lang.String Esta classe implementa as interfaces Serializable, CharSequence e Comparable<String>. Objetos do tipo String são constantes, ou seja, seus valores não podem ser alterados depois de criados. Assim, se você tiver um código parecido com:
public class Main {
public static void main(String[] args) {
// ambas as variáveis apontam para uma mesma string
// há somente uma cópia de "Osmar J. Silva" na memória
String nome = "Osmar J. Silva";
String nome2 = "Osmar J. Silva";
// agora uma nova string é criada e a anterior é preservada
nome2 = "Marcos de Souza Gomes";
}
}
Note que o compilador, com o propósito de poupar recursos do sistema, cria apenas uma string "Osmar J. Silva" e a coloca no pool de strings. No momento que alteramos o valor da variável nome2, uma nova string "Marcos de Souza Gomes" é criada e a anterior permanece intacta. A classe String inclui métodos para examinar os caracteres individuais da sequencia, para a comparação de strings, pesquisar, extrair substrings e também criar uma cópia da string com todos os caracteres convertidos para letras maiúsculas ou minúsculas. O mapeamente das letras maiúsculas e minúsculas é feito com base na versão Unicode Standard especificada na classe Character. A linguagem Java fornece suporte especial para a concatenação de strings, usando o operador (+) e para a conversão de outros objetos em strings. A concatenação é implementada por meio da classe StringBuilder (ou StringBuffer) e seu método append(). As conversões de strings são implementadas por meio do método toString(), definido na classe Object e herdado por todas as demais classes Java. Quando não devidamente observado, passar um argumento null para o construtor ou método da classe String fará com que uma exceção do tipo NullPointerException seja atirado. A classe String representa uma string no formato UTF-16, no qual caracteres suplementares são representados por pares prepostos. Valores de índice referem-se às unidades de código de caracteres. Assim, caracteres suplementares usam duas posições em uma String. |
Nossas 20 dicas & truques de programação mais populares |
Você também poderá gostar das dicas e truques de programação abaixo |
|
AutoCAD Civil 3D - Como criar pontos COGO no AutoCAD Civil 3D |
Nossas 20 dicas & truques de programação mais recentes |
Últimos Projetos e Códigos Fonte Liberados Para Apoiadores do Site |
|
Python - Como criar o jogo Pedra, Papel, Tesoura em Python - Jogo completo em Python com código comentado |
Últimos Exercícios Resolvidos |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
