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 = "http://s24.postimg.org/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 = "http://s24.postimg.org/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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • 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.