Jump to content
vikcch

problema com context clip

Recommended Posts

vikcch

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)

cliperror.png

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á!

Share this post


Link to post
Share on other sites
vikcch

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:

cliperror_aliasing.png

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);
       }
   };
};

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.