-
Conteúdo Similar
-
Por Jack Oliveira
Ola galera
Estava vendo alguns tutoriais que se dizem que ao usar imagens PNG elas tira estabilidade do servidor, que o certo e usar apenas jpg ou jpeg
Bom nesta questão, pessoal como poderia fazer para que quando a imagens elas forem png fazer ser salvas com jpg mais sem que as perdem a qualidade da imagem
Sei que ha algumas imagens elas chegam ha 2000px
Alguma forma que eu possa fazer ela fica com o tamanho recomendado pelo próprio site
Por exemplo
A imagem for 2000px × 1200px
Recomendado da imagem for
600px x 300px
Mais como disse sem que perca a qualidade
Chamam de otimização de imagens correto?
-
Por 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.
-
Por 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
-
Por mancialeo_geo
Olá pessoal! Trabalho com mapas no qgis e finalizo os layouts no corel, faço omapeamento das areas com vants, mas me aconteceude não mapear toda area tive que completar com imagem de satelite, finalizo ele no qgis exporto como pdf, em programas para abrir pdfs ele abre normal, quando abro o pdf no corel ele coe umapartes das imagens transformando elas em png, como resolvo isso é problema no qgis ou no corel?
-
Por KD14
Exemplo: Meu arquivo no illustrator tem as dimensões de 2000 x 2000 px (o mesmo tamanho da prancheta), quando eu exporto para JPEG ou PNG ele fica com as dimensões de 4168 x 4167.
Alguém sabe o porque disso?
-
