3

Criei uma função padronizada para acelerar o processo de desenho em um projeto que envolve canvas múltiplos.

Agradeço a colaboração de bfavaretto https://pt.stackoverflow.com/users/74/bfavaretto

Vejam a função: (ela funciona corretamente)

var drawIt = function (canvasCtx, drawObj, x, y) {
    drawObj.onload = function () {
        canvasCtx.drawImage(drawObj, x, y);
    };
};

Chamei os diversos canvas no script: (e foram inicializados corretamente):

var c1Canvas = document.getElementById("c1");
var c1Ctx = c1Canvas.getContext("2d");

var c2Canvas = document.getElementById("c2");
var c2Ctx = c2Canvas.getContext("2d");

var c3Canvas = document.getElementById("c3");
var c3Ctx = c3Canvas.getContext("2d");

var c4Canvas = document.getElementById("c4");
var c4Ctx = c4Canvas.getContext("2d");

Vejam fragmento HTML5:

<div class="gfwrapper">
    <canvas id="c1" width="800" height="600"></canvas>
    <canvas id="c2" width="800" height="600"></canvas>
    <canvas id="c3" width="800" height="600"></canvas>
    <canvas id="c4" width="800" height="600"></canvas>
</div>

E deste ponto criei objetos para as imagens que deveriam ser adicionadas ao Canvas:

var image1 = new Image();
image1.src = "http://folhaz.com.br/cms/wp-content/uploads/2014/02/carnaval-300x237.jpg";

var image2 = new Image();
image2.src = "https://www.google.com.br/images/srpr/logo11w.png";

var image3 = new Image();
image3.src = "http://folhaz.com.br/cms/wp-content/uploads/2012/10/sky-tv.jpg";

var image4 = new Image();
image4.src = "http://folhaz.com.br/cms/wp-content/uploads/2013/12/web300x180px1.jpg";

Porém, para a minha surpresa, não consigo adicionar o mesmo objeto de imagem em canvas diferentes.

Vejam o código abaixo.

function drawScreen() {
    drawIt(c1Ctx, image1, 0, 0);
    drawIt(c2Ctx, image2, 0, 0);
    drawIt(c3Ctx, image3, 0, 0);
    drawIt(c4Ctx, image4, 0, 0);

    drawIt(c4Ctx, image1,100,100);
}

drawScreen();

A image1 foi adicionada inicialmente ao c1. Ao tentar adicioná-la ao c4, a image1 é apagada do c1 e desenhada no c4. Gostaria que a imagem fosse mantida em c1, sem precisar renomear o objeto.

Alguém sabe um workaround para isso? É possível?

Segue JSFiddle para ajudar: http://jsfiddle.net/LeoTheTitan/vV69K/

0

1 Resposta 1

5

Você precisa de um objeto separado para a imagem (não se preocupe, ela será carregada do cache):

var image5 = new Image();
image5.src = "http://folhaz.com.br/cms/wp-content/uploads/2014/02/carnaval-300x237.jpg";

// ...

drawIt(c4Ctx, image5, 100, 100);

Uma alternativa é clonar a imagem antes de passá-la à função:

drawIt(c4Ctx, image1.cloneNode(), 100, 100);
2
  • Clonar o node funciona muito bem. Mais uma vez obrigado pela sua ajuda. Deixe seu contato, posso ter oportunidades de trabalho no futuro que sejam interessantes para você. Commented 4/03/2014 às 23:55
  • Obrigado. Se quiser entrar em contato no futuro, me procure aqui no site, ou no chat do site. Estou sempre por aqui.
    – bfavaretto
    Commented 5/03/2014 às 2:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .