vikcch Posted October 31, 2015 at 11:08 PM Report Share #589401 Posted October 31, 2015 at 11:08 PM Boas! Tenho uma imagem (64px por 32px) com uma sombra meio transparente que não posso corta-la directamente no *.png... E fica sobreposta quando faço o clip. Aquela parte para onde aponta a seta vermelha. (só não acontece na ultima imagem desenhada) No meu projecto também aparece o resto da imagem (onde estão as setas azuis) quando passo com o rato nos tiles que fazem fronteira... fica aqui o codigo para desenhar a imagem de cima: window.onload = function () { var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var myImage = new Image(); myImage.src = "https://s24.postimg.cc/4szaj728x/test.png"; myImage.onload = function () { context.save(); context.translate(100, 100); context.moveTo(0, 0); context.lineTo(myImage.width / 2, myImage.height / 2); context.lineTo(0, myImage.height); context.lineTo(-myImage.width / 2, myImage.height / 2); context.closePath(); context.clip(); context.drawImage(myImage, -myImage.width / 2, 0); context.restore(); context.save(); context.translate(100 + myImage.width / 2, 100 + myImage.height / 2); context.moveTo(0, 0); context.lineTo(myImage.width / 2, myImage.height / 2); context.lineTo(0, myImage.height); context.lineTo(-myImage.width / 2, myImage.height / 2); context.closePath(); context.clip(); context.drawImage(myImage, -myImage.width / 2, 0); context.restore(); }; }; Alguém sabe como resolver isso?? É um jogo isométrico, o ideal seria ordenar "topológicamente" todos os items/objectos na cena (para não ficarem sobrepostos quando se desenha objectos com mais de um tile) mas tive a ver como se fazia e perdi tempo a mais e não consegui fazer... decidi dividir os objectos grandes e desenha-los tile por tile... mas tem esse tem esse problema que me fez abrir este tópico... Obrigado desde já! Link to comment Share on other sites More sharing options...
vikcch Posted November 1, 2015 at 10:35 PM Author Report Share #589408 Posted November 1, 2015 at 10:35 PM Já resolvi, usei um canvas auxiliar para fazer o clip. Mas tem um problema de "aliasing" que mal se nota nas bordas do tile, como mostra a imagem: Tentei setar o imageSmoothingEnabled a false mas ficou na mesma... Alguém sabe uma solução? fica aqui o code: window.onload = function () { var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var myImage = new Image(); myImage.src = "https://s24.postimg.cc/4szaj728x/test.png"; var canvasAux = null; var contextAux = null; function initCanvasAux() { canvasAux = document.createElement('canvas'); canvasAux.width = myImage.width; canvasAux.height = myImage.height; contextAux = canvasAux.getContext('2d'); } function drawTile(x, y, index) { contextAux.clearRect(0, 0, canvasAux.width, canvasAux.height); contextAux.save(); contextAux.translate(myImage.width / 2, 0); contextAux.moveTo(0, 0); contextAux.lineTo(myImage.width / 2, myImage.height / 2); contextAux.lineTo(0, myImage.height); contextAux.lineTo(-myImage.width / 2, myImage.height / 2); contextAux.closePath(); contextAux.clip(); contextAux.imageSmoothingEnabled = false; contextAux.drawImage(myImage, -myImage.width / 2, 0); contextAux.restore(); context.save(); context.translate(x + index * myImage.width / 2, y + index * myImage.height / 2); context.drawImage(canvasAux, -myImage.width / 2, 0); context.restore(); } myImage.onload = function () { initCanvasAux(); var x = 100, y = 100; for (var i = 0; i < 5; i++) { drawTile(x, y, i); } }; }; Link to comment Share on other sites More sharing options...
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 accountSign in
Already have an account? Sign in here.
Sign In Now