-
Conteúdo Similar
-
Por asacap1000
Galera salve salve!!
Estou com um projeto em que são armazenados vídeos, porém seguindo os requisitos exigidos, para visualizar e baixar esses vídeos eles tem que aparecer com numero de cadastro do usuário que está acessando no centro do video como uma marca d'agua.
Para simplesmente aparecer na tela eu consigo fazer uma camada superior com css e apresentar os dados do usuário mas para baixar o vídeo ele já faz sem a marca.
Vocês conhecem algum recurso pra adicionar essa marca? ela não pode ficar no arquivo original pois outros usuário poderão baixar com sua identificação na tela.
Se alguem puder me dar um norte ajudaria muito
-
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 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
-
Por 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(); }); };
-
