-
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 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(); }); };
-
Por 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!
-
Por 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
-
