1

Como saber se o canvas está pronto?

Estou utilizando a biblioteca fabricjs, que cria uma estrutura de elementos complexos dentro de um canvas, porém eu gostaria de chamar uma função callback depois que o canvas tivesse todos os elementos complexos carregados.

O html2canvas faz algo similar, porém não funciona com o fabricjs:

html2canvas($('#my_canvas'), {
   onrendered: function(canvas) {
   //SIMILAR A ISSO
  }
});

O que eu consigo ter é o total de elementos do meu canvas:

 var totalItens = canvas.getObjects().length;

E estou processando um tempo baseado na quantidade, o problema é que pode haver 1 único item muito complexo, e a ação pode não ter um bom comportamento enquanto ainda estiver sendo carregada no navegador:

var calc = (totalItens * 400), 
    tempoDoProcesso = (calc) > 6000 ? 6000 : calc

setTimeout({
 //faço a ação...
}, tempoDoProcesso);

O canvas começa a travar quando tem muitos itens na tela... e por isso, fica impossível fazer qualquer evento antes do processo ter finalizado.

3
  • Você leu a documentação? fabricjs.com/events Commented 12/12/2019 às 22:01
  • canvas.on("after:render", function() {}). Fonte: github.com/fabricjs/fabric.js/wiki/Working-with-events Commented 12/12/2019 às 22:06
  • Eu li sim, mas não encontrei a informação muito clara, tive dificuldades em achar a solução, um colega meu também procurou comigo aqui e não achou... se vc notar nesse link de events, ele é o último da lista, passou batido. Aliás muito dos eventos que tenho utilizado na lib, tive que caçar por aí... Commented 13/12/2019 às 12:40

1 Resposta 1

2

Olá Ivan e para outros programadores.

Você lendo a documentação de eventos no site da fabric.js vai entender tudo.

Antes de usar uma nova biblioteca javascript leia a documentação pra usar corretamente e não haver problemas.

Solução:

var canvas = new fabric.Canvas('my-canvas');
canvas.on("after:render",function() {
  console.log("render on")
});

Fonte: https://github.com/fabricjs/fabric.js/wiki/Working-with-events

1
  • Valeu @AnittaDeveloper, era isso que eu estava procurando... Commented 13/12/2019 às 12:34

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 .