2

Preciso desenhar diversas imagens em diversos canvas, por isso, gostaria de fazer uma função genérica que me permitisse passar os argumentos para desenhar as imagens posicionadas.

Pensei na seguinte função genérica:

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

Então quando eu definisse o Canvas e a imagem:

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");

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

Eu poderia definir uma função para iniciar on body load:

function drawScreen(){
   drawIt(ctx,Image1,100,100);
}

Porém eu recebo o erro de que a propriedade onload não pode ser atribuida a um objeto não-identificado.

Alguém pode me ajudar a construir essa função genérica?

5
  • Há alguns problemas no código: qual é o valor atribuido aqui? this.y = ; Esse new não é necessário: new function(...) Commented 3/03/2014 às 22:30
  • Curiosamente navegadores executam o código da new function mas ignoram os argumentos. O nodejs cria um objeto que não pode ser chamado: typeof drawIt === 'object' Commented 3/03/2014 às 22:32
  • Descobri porque o new function é válido: gist.github.com/qgustavor/9336704 Commented 3/03/2014 às 23:17
  • @GustavoRodrigues new function(){} é a mesma coisa que new referenciaDeFuncaoQualquer(). A questão é que isso é executado imediatamente. Basicamente, esse código define o construtor e o invoca logo em seguida.
    – bfavaretto
    Commented 3/03/2014 às 23:21
  • Isso é mais ou menos o que coloquei na gist. Commented 4/03/2014 às 0:04

1 Resposta 1

2

O problema é que você está executando um construtor no mesmo momento em que o define (por causa do new, como apontado pelo Gustavo Rodrigues). Assim, todos os parâmetros que você está passando são undefined.

A gambiarra mais rápida é mover o primeiro bloco de código para dentro de drawScreen, mas, se entendi bem o seu código, eu reescreveria tudo de maneira mais simples, sem usar um construtor nem this. Isso inclusive resolve um problema que você encontraria logo adiante, pois o valor de this dentro do onload não seria o que você espera... Minha sugestão é usar isto:

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

O uso é como você previu mesmo:

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var Image1 = new Image();
Image1.src = "https://www.google.com.br/images/srpr/logo11w.png";

function drawScreen(){
   drawIt(ctx,Image1,100,100);
}

drawScreen();

Exemplo no jsfiddle

1
  • Funcionou! Você tem razão, sua solução é mais simples e direta. Commented 4/03/2014 às 15:52

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 .