Jump to content
zetabyte00

WebGL, Canvas ou SVG

Recommended Posts

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

  • Similar Content

    • By Givanildo_Silva
      Srs sou principiante na Linguagem Javascript e estou tendo dificuldades em implementar um projeto, peço ajuda .
      Neste projeto crio dinamicamente  com Javascript polylines dentro de um SVG, cada polyline e criada com duas Classes (draggable e tooltip), a Class draggable é reconhecida normalmente, mas a tooltip não é reconhecida, quando a tag polyline com as classes é adicionada normalmente dentro do index funciona corretamente.
       
      abaixo códigos do projeto:
       
      Função ocultar polyline:
      let valor; let checagem; function teste(checkbox) { valor = checkbox.value; checagem = checkbox.checked; } function ocultar(){ let polyline = document.getElementsByTagName("polyline"); let equipe = document.getElementsByName("equipe"); if(checagem === true){ for(j=0;j<polyline.length;j++){ if(polyline[j].getAttribute("name")=== valor){ polyline[j].setAttributeNS(null, "visibility", "hidden"); } } } if(checagem ===false){ for(j=0;j<polyline.length;j++){ if(polyline[j].getAttribute("name")===valor){ polyline[j].setAttributeNS(null, "visibility", "visible"); } } } } <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="_css/estilo_principal.css"> <script src="js/arrastar.js"></script> <script src="js/tooltip.js"></script> <script src="js/ocultar.js"></script> <title>Painel Diagrama</title> </head> <body> <div id="painel"> <input type="button" value="Desenhar" onclick="criarlinha()"/> <div id="itens" class="w3-container"> <div class="w3-dropdown-hover"> <input type="button" id="equipe-1" value="Equipes" title="Selecione uma Equipe para oculta-lá"/> <div class="w3-dropdown-content w3-bar-block w3-border"> <ul id="equipes"> </ul> </div> </div> </div> </div> <div id="diagrama" > <svg id="tela" width="14800px" height="2640px" viewBox="0 0 14800 2640" onload="makeDraggable(evt); tooltip(evt)"> <g id="tooltip" visibility="hidden" > <rect x="2" y="2" width="80" height="85" fill="black" opacity="0.4" rx="2" ry="2"/> <rect width="80" height="85" fill="grey" rx="2" ry="2"/> <text x="4" y="6">Tooltip</text> <line x1="2" y1="23" x2="170" y2="23" stroke="black" stroke-width="2"></line> <text x="4" y="26">Tooltip</text> <line x1="2" y1="43" x2="170" y2="43" stroke="black" stroke-width="2"></line> <text x="4" y="46">Tooltip</text> <line x1="2" y1="63" x2="170" y2="63" stroke="black" stroke-width="2"></line> <text x="4" y="66">Tooltip</text> </g> <polyline class="draggable tooltip" name="teste" points="885 980 1200 980" stroke="green" stroke-width="10" fill="none" equipe="Equipe: Teste" os="os: 27493/2019" trecho="Trecho: Teste1" fiscal="Fiscal: Fulano de Tal"/> </svg> </div> <script src="js/linhasvg.js"></script> </body> </html> Função tooltip:
      function tooltip(evt) { var svg = document.getElementById('tela'); var tooltip = svg.getElementById('tooltip'); var tooltipText = tooltip.getElementsByTagName('text')[1]; var tooltipText1 = tooltip.getElementsByTagName('text')[0]; var tooltipText2 = tooltip.getElementsByTagName('text')[2]; var tooltipText3 = tooltip.getElementsByTagName('text')[3]; var tooltipRects = tooltip.getElementsByTagName('rect'); var triggers = svg.getElementsByClassName('tooltip'); var line = svg.getElementsByTagName('line'); for (var i = 0; i < triggers.length; i++) { triggers[i].addEventListener('mousemove', showTooltip); triggers[i].addEventListener('mouseout', hideTooltip); } function showTooltip(evt) { var CTM = svg.getScreenCTM(); var x = (evt.clientX - CTM.e + 6) / CTM.a; var y = (evt.clientY - CTM.f + 20) / CTM.d; tooltip.setAttributeNS(null, "transform", "translate(" + x + " " + y + ")"); tooltip.setAttributeNS(null, "visibility", "visible"); tooltipText.firstChild.data = evt.target.getAttributeNS(null, "equipe"); tooltipText1.firstChild.data = evt.target.getAttributeNS(null, "os"); tooltipText2.firstChild.data = evt.target.getAttributeNS(null, "trecho"); tooltipText3.firstChild.data = evt.target.getAttributeNS(null, "fiscal"); var length = tooltipText.getComputedTextLength(); for (var i = 0; i < tooltipRects.length; i++) { tooltipRects[i].setAttributeNS(null, "width", length + 15); line[i].setAttributeNS(null,"x2",length + 15) } } Função linhasvg:
      let svg = document.querySelector("svg"); let status = true; function criarlinha(){ let linha = document.createElementNS("http://www.w3.org/2000/svg","polyline"); let pontos = []; let equipes = document.getElementsByTagName("li") let equipe = prompt("Informe o nome do Setor.") let checar = document.getElementsByClassName("equipe") for (let i = 0; i < 4; i ++ ){ pontos.push(Number(prompt("Informe os valor"))); } linha.setAttribute("class","draggable tooltip"); linha.setAttribute("name",equipe); linha.setAttribute( "points", pontos); linha.setAttribute("fill", "none"); linha.setAttribute("stroke","green"); linha.setAttribute("stroke-width", 6); linha.setAttribute("equipe",equipe) linha.setAttribute("os","2997/2019") linha.setAttribute("trecho","POA/CVN") linha.setAttribute("fiscal","Fiscal: Fulano de Tal") svg.appendChild(linha); pontos = []; let quantidade_li = equipes.length if (quantidade_li > 0) { for (let i = 0; i < checar.length; i++) { if ( checar[i].value === equipe){ status = false; } } } if(status !== false){ let lis; let ul = document.getElementById("equipes"); let l1 = document.getElementsByTagName("li"); let li = document.createElement("li"); let span = document.createElement("span"); var input = document.createElement("input"); input.type ="checkbox"; input.value = equipe; input.className="equipe"; input.name="equipe"; input.setAttribute("onclick","teste(this), ocultar()") span.innerText= equipe; ul.appendChild(li); if (l1.length > 0) { lis = l1.length - 1; } else{ lis = l1.length; } l1[lis].appendChild(span); l1[lis].before(input, span); } let item = document.getElementsByClassName("equipe") let poly = document.getElementsByTagName("polyline") for (let i = 0; i < item.length;i++){ for(j = 0; j < poly.length; j++){ if (item[i].attributes[1].value === poly[j].attributes[1].value){ if(item[i].checked === true){ poly[j].setAttribute( "visibility", "hidden") } } } } } Função arrastar:
      function makeDraggable(evt) { let svg = evt.target; svg.addEventListener('mousedown', startDrag); svg.addEventListener('mousemove', drag); svg.addEventListener('mouseup', endDrag); svg.addEventListener('mouseleave', endDrag); svg.addEventListener('touchstart', startDrag); svg.addEventListener('touchmove', drag); svg.addEventListener('touchend', endDrag); svg.addEventListener('touchleave', endDrag); svg.addEventListener('touchcancel', endDrag); svg.addEventListener('click', clicar); function getMousePosition(evt) { let CTM = svg.getScreenCTM(); if (evt.touches) { evt = evt.touches[0]; } return { x: (evt.clientX - CTM.e) / CTM.a, y: (evt.clientY - CTM.f) / CTM.d }; } let selectedElement, offset, transform; function startDrag(evt) { if (evt.target.classList.contains('draggable')) { selectedElement = evt.target; offset = getMousePosition(evt); // Make sure the first transform on the element is a translate transform let transforms = selectedElement.transform.baseVal; if (transforms.length === 0 || transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE) { // Create an transform that translates by (0, 0) let translate = svg.createSVGTransform(); translate.setTranslate(0, 0); selectedElement.transform.baseVal.insertItemBefore(translate, 0); } // Get initial translation transform = transforms.getItem(0); offset.x -= transform.matrix.e; offset.y -= transform.matrix.f; } } function drag(evt) { if (selectedElement) { evt.preventDefault(); let coord = getMousePosition(evt); transform.setTranslate(coord.x - offset.x, coord.y - offset.y); } } function clicar(evt) { if (selectedElement) { evt.preventDefault(); let coord = getMousePosition(evt); transform.setTranslate(coord.x - offset.x, coord.y - offset.y); } alert("X= " + getMousePosition(evt).x + " Y= " + getMousePosition(evt).y) } function endDrag(evt) { selectedElement = false; } } Estilo estilo_principal:
      @charset "utf-8"; svg#tela{ background: url("_imagens/diagrama.png") no-repeat; } div#diagrama{ position: absolute; border: 2px solid black; top: 180px; left: 30px; width: 95%; height: 80%; overflow: auto; } div#painel{ position: absolute; border: 1px solid black; padding: 10px; left: 30px; } div#painel input{ text-align: center; } input#equipe-1{ width: 150px; margin-left: -10px; } div#itens{ float: right; width: 165px; } .equipe{ margin-left: 5px; } span{ margin-left: 5px; } ul#equipes{ padding-left: 0px; padding-top: -15x; } ul#equipes li{ list-style: none; padding: 1px; } svg text{ fill: white; } #tooltip { dominant-baseline: hanging; } .draggable{ cursor: move; } Desde já agradeço a atenção e colaboração.
       
    • By Overtron8000
      Criei um mini game com recursos svg gerados por javascript para estudar e queria adicionar uma condição da bolinha quando tocar o chão zerar o contador (seria como a posição cy do eixo da bolinha tocasse o chão no 265px) só que não consigo acessar ele para ativar essa condição tentei assim..
       
      contador.innerHTML=numero+=1 if(balloon.cy==265){ numero=0; contador.innerHTML=numero; } }) https://codepen.io/regis404/pen/PMyYzv   projeto completo ai
    • 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!
×

Important Information

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