Jump to content
Sign in to follow this  
brunomartins

Canvas posição de imagens X e Y

Recommended Posts

Pessoal alguem poderia me ajudar, a como fazer para mudar de cor um objeto quando ficar um objeto por cima do outro.

Não sei se isso utiliza posições de X e Y ou outras coisas.

Por favor me ajudem...

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="fabric.min.js"></script>
</head>
<body>
<canvas id="c" width="1190" height="600"></canvas>
</body>
<script>
(function(){
var canvas = new fabric.Canvas('c');
var rect=new fabric.Rect({
left:10,
top:20,
fill:'red',
width:90,
height:90
});

var rect2 = new fabric.Rect({
left:1100,
top:100,
fill:'blue',
width:90,
height:90
});

var circle = new fabric.Circle({
radius:30,
left:1100,
top:200,
fill:'green'
});

canvas.add(rect,rect2,circle);
canvas.forEachObject(function(o){ o.hasBorders = o.hasControls = true; });
canvas.item(0).selectable=false;

canvas.on({
'object:moving': onChange,
});
})();
</script>
</html>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By DunkMask
      Olá, boa tarde.
       
      estou enfrentando um probleminha aqui. estou criando um teste aqui para inserir um canvas em um mapa e o angulo que ele esta entrando nao esta bacana, então preciso alterar ele.
       
      Mas acontece que ao usar o context.rotate() ele esta distorcendo todo o meu desenho e nao rotaciona o todo.
      Estou passando posição x e y, o _M_ seria o tamanho do desenho referente ao zoom do mapa e o tipo é um indicador qualquer e  para posicionar ele no mapa, até ai tudo bem, funciona perfeitamente, mas quando tento rotacionar que o problema começa.
      function poste(pX, pY, _M_, context,tipo){ context.strokeStyle = '#000000'; context.lineWidth = 1; context.lineJoin = 'round'; context.lineCap = 'round'; context.style(). switch(tipo) { case 1: context.beginPath(); context.arc(pX+(12.5 * _M_), pY+(6 * _M_), 17 * _M_, 111.2 * (Math.PI / 180), 68.8 * (Math.PI / 180), true); context.stroke(); context.beginPath(); context.arc(pX+(41.9 * _M_), pY+(12.5 * _M_), 25 * _M_, 158 * (Math.PI / 180), 202 * (Math.PI / 180), false); context.stroke(); context.beginPath(); context.arc(pX+(12.5 * _M_), pY+(19 * _M_), 17 * _M_, 291.3 * (Math.PI / 180), 248.8 * (Math.PI / 180), true); context.stroke(); context.beginPath(); context.arc(pX+(-16.9 * _M_), pY+(12.5 * _M_), 25 * _M_, 22 * (Math.PI / 180), 338 * (Math.PI / 180), true); context.stroke(); break; } } Alguém pode me dar uma luz, eu tento inserir o rotate no final de todas as linhas ele buga, tento inserir no começo e ele buga, ou se eu insiro fora do switch ele buga.
       
      se puderem me apontar uma solução eu agradeço
    • By jadergfarinon
      Bom dia pessoal, não sei quase nada de JavaScript e não consegui encontrar nada relacionado com o que eu preciso então desculpa se eu sair com alguma pergunta idiota aqui, bom... eu tenho um Mini Paint rodando aqui na empresa, o script não foi feito por mim, já estava rodando quando eu entrei e provavelmente foi pego na internet, bom, é uma tela em branco na qual é possível desenhar, seja com o mouse ou com o dedo na tela do celular, tem também dois botões, um para limpar a tela e outro para salvar, quando clicamos em salvar ele exibe um prompt para digitar um nome e salva o desenho em png localmente na máquina como um download, porem estou precisando modificar para que esse arquivo seja salvo em uma pasta no próprio servidor em que o script está rodando, esse servidor fica aqui na minha rede então poderia ser direto pelo script no webserver através de um endereço estilo localhost ou por um caminho estilo \\servidor\pasta_imagens que enviaria para uma pasta compartilhada no servidor aonde o site está rodando mas não faço idéia de como modificar o java script para isso, seguem os códigos, se alguém puder me ajudar agradeço muito
       
       
      HTML (index.html)
      <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Teste</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <main> <div class="left-block"> <div class="colors"> </div> <div class="brushes"> </div> <div class="buttons"> <button id="clear" type="button">Limpar</button> <button id="save" type="button">Salvar</button> </div> </div> <div class="right-block"> <canvas id="paint-canvas" width="640" height="400"></canvas> </div> </main> <script src="js/index.js"></script> </body> </html>  
      css(css/style.css)
      * { box-sizing: border-box; } main { width: 800px; border: 1px solid #e0e0e0; margin: 0 auto; display: flex; flex-grow: 1; } .left-block { width: 160px; border-right: 1px solid #e0e0e0; } .colors { background-color: #ece8e8; text-align: center; padding-bottom: 5px; padding-top: 10px; } .colors button { display: inline-block; border: 1px solid #00000026; border-radius: 0; outline: none; cursor: pointer; width: 20px; height: 20px; margin-bottom: 5px } .colors button:nth-of-type(1) { background-color: #0000ff; } .colors button:nth-of-type(2) { background-color: #009fff; } .colors button:nth-of-type(3) { background-color: #0fffff; } .colors button:nth-of-type(4) { background-color: #bfffff; } .colors button:nth-of-type(5) { background-color: #000000; } .colors button:nth-of-type(6) { background-color: #333333; } .colors button:nth-of-type(7) { background-color: #666666; } .colors button:nth-of-type(8) { background-color: #999999; } .colors button:nth-of-type(9) { background-color: #ffcc66; } .colors button:nth-of-type(10) { background-color: #ffcc00; } .colors button:nth-of-type(11) { background-color: #ffff00; } .colors button:nth-of-type(12) { background-color: #ffff99; } .colors button:nth-of-type(13) { background-color: #003300; } .colors button:nth-of-type(14) { background-color: #555000; } .colors button:nth-of-type(15) { background-color: #00ff00; } .colors button:nth-of-type(16) { background-color: #99ff99; } .colors button:nth-of-type(17) { background-color: #f00000; } .colors button:nth-of-type(18) { background-color: #ff6600; } .colors button:nth-of-type(19) { background-color: #ff9933; } .colors button:nth-of-type(20) { background-color: #f5deb3; } .colors button:nth-of-type(21) { background-color: #330000; } .colors button:nth-of-type(22) { background-color: #663300; } .colors button:nth-of-type(23) { background-color: #cc6600; } .colors button:nth-of-type(24) { background-color: #deb887; } .colors button:nth-of-type(25) { background-color: #aa0fff; } .colors button:nth-of-type(26) { background-color: #cc66cc; } .colors button:nth-of-type(27) { background-color: #ff66ff; } .colors button:nth-of-type(28) { background-color: #ff99ff; } .colors button:nth-of-type(29) { background-color: #e8c4e8; } .colors button:nth-of-type(30) { background-color: #ffffff; } .brushes { //background-color: purple; padding-top: 5px } .brushes button { display: block; width: 100%; border: 0; border-radius: 0; background-color: #ece8e8; margin-bottom: 5px; padding: 5px; height: 30px; outline: none; position: relative; cursor: pointer; } .brushes button:after { height: 1px; display: block; background: #808080; content: ''; } .brushes button:nth-of-type(1):after { height: 1px; } .brushes button:nth-of-type(2):after { height: 2px; } .brushes button:nth-of-type(3):after { height: 3px; } .brushes button:nth-of-type(4):after { height: 4px; } .brushes button:nth-of-type(5):after { height: 5px; } .buttons { height: 80px; padding-top: 10px; } .buttons button { display: block; width: 100%; border: 0; border-radius: 0; background-color: #ece8e8; margin-bottom: 5px; padding: 5px; height: 30px; outline: none; position: relative; cursor: pointer; font-size: 16px; } .right-block { width: 640px height:100vh; } #paint-canvas { cursor:crosshair; }  
      JavaScript (js/index.js)
      window.onload = function () { // Definitions var canvas = document.getElementById("paint-canvas"); var context = canvas.getContext("2d"); var boundings = canvas.getBoundingClientRect(); // Specifications var mouseX = 0; var mouseY = 0; context.strokeStyle = 'black'; // initial brush color context.lineWidth = 1; // initial brush width var isDrawing = false; // Handle Colors var colors = document.getElementsByClassName('colors')[0]; colors.addEventListener('click', function(event) { context.strokeStyle = event.target.value || 'black'; }); // Handle Brushes var brushes = document.getElementsByClassName('brushes')[0]; brushes.addEventListener('click', function(event) { context.lineWidth = event.target.value || 1; }); // Mouse Down Event canvas.addEventListener('mousedown', function(event) { setMouseCoordinates(event); isDrawing = true; // Start Drawing context.beginPath(); context.moveTo(mouseX, mouseY); }); // Mouse Move Event canvas.addEventListener('mousemove', function(event) { setMouseCoordinates(event); if(isDrawing){ context.lineTo(mouseX, mouseY); context.stroke(); } }); // Mouse Up Event canvas.addEventListener('mouseup', function(event) { setMouseCoordinates(event); isDrawing = false; }); // Handle Mouse Coordinates function setMouseCoordinates(event) { mouseX = event.clientX - boundings.left; mouseY = event.clientY - boundings.top; } // Handle Clear Button var clearButton = document.getElementById('clear'); clearButton.addEventListener('click', function() { context.clearRect(0, 0, canvas.width, canvas.height); }); // Handle Save Button var saveButton = document.getElementById('save'); saveButton.addEventListener('click', function() { var imageName = prompt('Digite o Número da movimentação.'); var canvasDataURL = canvas.toDataURL(); var a = document.createElement('a'); a.href = canvasDataURL; a.download = imageName || 'drawing'; a.click(); }); };  
    • By Pedro0069
      Bom dia Pessoal,

      Estou estudando Java e estou com algumas dúvidas muito simples pra quem já domina o assunto, gostaria que me esclarecessem apenas.

      O curso que estou fazendo pela Internet é voltado a desenvolvimento de games com Java, e nele o professor utiliza algumas classes que fiquei com bastante dúvidas, segue abaixo.

      Qual a diferença entre desenhar usando o objeto Graphics ou usando BufferedImage? O que seria exatamente um BufferedImage, ou BufferStrategy? Não entendi muito bem a questão dos Buffers, preciso mesmo criar um Buffer para desenhar na tela? Ele utiliza também a Classe Canvas e JFrame, para que exatamente elas servem? Elas precisam sempre estar juntas? Qual a aplicação destas classes?

      Estou com dúvida nestes pontos e ficaria muito grato a quem conseguir esclarecer de forma breve para mim, e tenho certeza que irá ajudar outros iniciantes com dúvidas também.

      Muito Obrigado!
    • By Mech
      Como posso animar um Canvas com javascript?
      Preciso criar um animação no canvas que crie "ondas".
      Algo como: https://cdn.dribbble.com/users/636156/screenshots/1904130/fluid_drop_loading.gif
    • By matheus.leite
      Boa tarde pessoal !
      Sou novo aqui no forum, então se eu postar algo errado me perdoe.
      Amigos, sou novo com php e estou tendo problemas em achar uma solução. 
      Tenho um array: 
      $arrayCarro = array( array( "Cor"=>$gol->getCor(), "Marca"=>$gol->getMarca(), "Modelo"=>$gol->getModelo(), "Ano"=>$gol->getAno() ), array( "Cor"=>$fusca->getCor(), "Marca"=>$fusca->getMarca(), "Modelo"=>$fusca->getModelo(), "Ano"=>$fusca->getAno() ), array( "Cor"=>$tg->getCor(), "Marca"=>$tg->getMarca(), "Modelo"=>$tg->getModelo(), "Ano"=>$tg->getAno() ) ); e eu passo ele para um objeto do tipo 'Corrida', até ai tudo bem. Porém eu tenho uma function chamada 'ultrapassagem' e não faço a menor ideia de como poderia, de fato, fazer essa "ultrapassagem".
      Este é o 'index.php':
      <?php require 'classes/Carro.php'; require 'classes/Corrida.php'; $gol = new Carro(); $fusca = new Carro(); $tg = new Carro(); $gol->setCor("Rosa"); $gol->setMarca("Wolks"); $gol->setAno(2018); $gol->setModelo("Sedan"); $fusca->setCor("Azul"); $fusca->setMarca("Wolks"); $fusca->setAno(2018); $fusca->setModelo("4X4"); $tg->setCor("vermelho"); $tg->setMarca("TG sedan"); $tg->setAno(2098); $tg->setModelo("Flat"); $arrayCarro = array( array( "Cor"=>$gol->getCor(), "Marca"=>$gol->getMarca(), "Modelo"=>$gol->getModelo(), "Ano"=>$gol->getAno() ), array( "Cor"=>$fusca->getCor(), "Marca"=>$fusca->getMarca(), "Modelo"=>$fusca->getModelo(), "Ano"=>$fusca->getAno() ), array( "Cor"=>$tg->getCor(), "Marca"=>$tg->getMarca(), "Modelo"=>$tg->getModelo(), "Ano"=>$tg->getAno() ) ); $corrida = new Corrida($arrayCarro); $corrida->posicaoCarro(); Esta é a Classe Corrida:
      <?php class Corrida { private $arrayCarros; public function __construct($arrayCarros) { $this->arrayCarros = $arrayCarros; if(count($arrayCarros) > 0) { echo 'A corrida pode começar pois existe mais de um carro !'.PHP_EOL; } else { echo 'A corrida não pode começar pois existe apenas um carro :('.PHP_EOL; exit; } } public function iniciarCorrida() { echo 'Começando a corrida ...'.PHP_EOL; echo '1, 2, 3 e JÁ!!.' .PHP_EOL; echo '- A corrida começou ! Confira a posição inicial de cada carro: '.PHP_EOL; echo PHP_EOL; $this->posicaoCarro(); } public function ultrapassagem() { /*Aqui eu tentei fazer algo, porem ele apenas retira o último elemento do array e o avança para direita, foi o mais próximo que consegui de uma 'Ultrapassagem' */ $quantidadeCarros = count($this->arrayCarros); $auxiliar = $this->arrayCarros[$quantidadeCarros - 1]; for ($i = $quantidadeCarros -1; $i > 0 ; $i--) { $this->arrayCarros[$i] = $this->arrayCarros[$i -1]; } $this->arrayCarros[0] = $auxiliar; echo 'Aconteceu uma ultrapassagem'.PHP_EOL; print_r($this->arrayCarros); } //Apenas uma função para 'melhorar' a exibição dos arrays. public function posicaoCarro() { $i = 1; foreach ($this->arrayCarros as $key => $value){ echo 'Posição ['. $i++."] => "; print_r("Marca: " . $value['Marca'] . ", "); print_r("Modelo: " . $value['Modelo'] . ", "); print_r("Ano: " . $value['Ano'] . " "); print_r("Cor: " . $value['Cor'] . " " .PHP_EOL); echo PHP_EOL; } } OBS: Existem N carros.
      Um carro só pode passar o carro que esta na sua frente, por ex: Carro[1] pode  ultrapassar o Carro[0], porém  o Carro [2] não pode ultrapassar o Carro[0], apenas o Carro[1]. Após a ultrapassagem a lista dos carros deve ser reordenada.
       
      Alguém poderia me ajudar ? 
      Desde já agradeço !
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.