vikcch 18 Posted October 31, 2015 Report Share Posted October 31, 2015 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 post Share on other sites
vikcch 18 Posted November 1, 2015 Author Report Share Posted November 1, 2015 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 post Share on other sites
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