Estado atual das bibliotecas Javascript Canvas? [fechadas]

90

Tenho feito pesquisas sobre bibliotecas de telas HTML e me deparei com essa pergunta. Qual é o estado da arte atual em bibliotecas e estruturas JavaScript de canvas HTML? isso foi perguntado em 2010. A principal resposta foi Fabric.js. Depois de fazer um pouco mais de pesquisa, encontrei http://www.html5canvastutorials.com/ que apresenta tutoriais sobre KineticJs, que se orgulha de ter várias telas para velocidade. Um pouco mais de pesquisa revelou posteriormente que as bibliotecas do Canvas parecem estar em todos os lugares quando se trata de velocidade e recursos. Qual é o estado atual das bibliotecas e estruturas do JavaScript Canvas hoje? Alguém saiu por cima?

EDITAR: Como as bibliotecas estão sempre mudando e muitas pessoas têm vindo aqui recentemente para obter notícias e informações sobre novas bibliotecas, mudei a questão para ser mais atemporal.

javascript html html5-canvas Ericbowden
fonte
2
absolutamente. Acredito que as opções sejam assim: 2d-context -> KineticJS, fabric.js, paper.js ou easel.js. 3d-context (webgl) -> Three.js
Eric Rowell,
1
Você pode verificar o link do kangax para a comparação de bibliotecas do canvas. Repostagem aqui docs.google.com/spreadsheet/…
ericbowden
4
Estou surpreso que esta questão ainda não tenha sido encerrada, pois quase tudo aqui geralmente é encerrado. Eu quero responder, mas estou com muito medo (leia "apavorado"), pois pode ser considerado fora do tópico. Talvez se você reformular a pergunta como "o que são semelhanças / compensações", eu poderia adicionar meus dois centavos (leia "resposta")
puk
4
Eu sinto o mesmo que @puk. Além disso, acho divertida a lacuna semântica entre o que é essencialmente apenas "aberto" e o que é marcado como "não construtivo". Isso se traduz aproximadamente em dizer que as perguntas para as quais uma única resposta irredutível não é possível não merecem consideração no repositório de conhecimento de programação mais popular e abrangente do mundo. Eu entendo que eles não se encaixam em um bom 'Q + A', mas por que não apenas marcá-los como 'altamente subjetivos', limitar os pontos de repetição e mantê-los abertos ... alguma coisa.
Mark Fox
1
Apenas ponderando que eu também estou realmente irritado com o fechamento constante de perguntas úteis apenas porque são subjetivas. E daí!? É uma coisa muito útil.
Iain Duncan

Respostas:

80

Isenção de responsabilidade: sou o autor de Fabric.js .

Eu diria que Easel.js, Fabric.js e Paper.js estão entre os mais usados ​​no momento. Estou julgando pelo número de observadores do Github para cada repositório, pelo volume de discussão em seus Grupos do Google e pela frequência com que ouço falar deles como bibliotecas de canvas no Twitter.

Esses também são aqueles com documentação mais ou menos decente, exemplos / demos, grupos de discussão e testes de unidade (o estado de teste na maioria das outras bibliotecas de canvas é muito triste).

Também estou mantendo esta tabela de comparação de várias bibliotecas de canvas , onde você pode ver quão recentemente a biblioteca foi atualizada, seu tamanho, suporte para IE <9 ou node.js e muito mais.

kangax
fonte
sua comparação fornece muitas informações, mas é editável publicamente que deve ser restrita, porque alguns outros usuários as editarão incorretamente. Preciso de ajuda, o kineticjs não oferece suporte ao nodjs? e você pode dar um exemplo como o programa de pintura do Windows (desenhando o círculo do objeto ao vivo com seu tecido)
Thirumalai murugan
não é editável publicamente
kangax
1
Que sorte ter encontrado este post! Costumava trabalhar com Kinetic, mas ainda não está maduro. Então tentei cavalete, mas é muito pesado. Finalmente mudei para o Fabric, e isso é ótimo!
MeLight de
@kangax Desculpe pela falta de compreensão, você pode me dar um exemplo como o programa de pintura do Windows (desenhando o círculo de objetos ao vivo com seu tecido)
Thirumalai murugan
@Thirumalaimurugan aqui vai: jsfiddle.net/fabricjs/nXmTC/1
kangax
66

EDIT: KineticJS não está mais sendo mantido ativamente.

Aviso: Eu criei KineticJS

KineticJS está indo muito bem. Você pode encontrar o código-fonte no Github , onde ele é estrelado por 2180 pessoas no momento.

Ele pode lidar com milhares de formas simultâneas:

10.000 teste de resistência ao arrastar e soltar: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

10.000 formas com dicas de ferramentas: http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

Ele tem um suporte a eventos muito bom, incluindo eventos móveis, e tem um conjunto bastante sólido de centenas de testes de unidade, então a base de código parece bastante sólida.

kangax: PS: trabalho incrível com fabric.js! Além do KineticJS (é claro), minhas outras duas bibliotecas favoritas são tecido e papel.

Eric Rowell
fonte
7
Apenas olhei para as demos e o desempenho está incrível! Também fico feliz em saber que você tem testes de unidade. Vejo que você permite a criação de várias camadas. Isso é bom. No tecido, otimizamos da mesma forma, mas temos apenas 2 camadas - uma para seleção, uma para desenho - e internamente (os usuários não podem criar mais). De alguma forma, perdi o Kinetic ao criar um gráfico de comparação de bibliotecas. Devemos consertar isso :)
kangax
6
atualização: KineticJS está agora no github: github.com/ericdrowell/KineticJS
Eric Rowell,
7
Como o KineticJS se compara ao EaselJS? Quando usar o quê?
geeky_monster
1
gostaria de salientar que KineticJS suporta vetores SVG também por meio da forma Kinetic.Path () html5canvastutorials.com/kineticjs/…
Eric Rowell
2
@EricRowell Mate Eu amo KineticJS, sua velocidade, casamento com GSAP, mas o que está fazendo minha cabeça girar, existe uma maneira de transformar objetos KineticJS livremente como no FabricJS? Aqui está o link de referência para o que estou tentando dizer: fabricjs.com/customization Não quero usar FabricJs porque é muito lento e seu baixo desempenho é evidente em vários testes de unidade. Estou realmente ansioso para encontrar uma maneira de ser capaz de transformar objetos livremente no KineticJS, pois isso tornaria a vida muito mais fácil. Obrigado, Praney
praneybehl
62

Para leitores recentes, em janeiro de 2013, avaliei:

  • Cinético
  • Tecido
  • Papel
  • Cavalete

Por "avaliados", fiz mais do que apenas ler a documentação; Eu criei um aplicativo protótipo.

Comecei com o Fabric porque parecia ter a maior comunidade e pensei que seria a minha solução. Mas, desisti do Fabric pelos seguintes motivos:

  • inconsistências de API estranhas e não documentadas que consumiam muito do meu tempo desnecessariamente.
  • suporte a eventos de ponteiro inconsistentes. Especificamente, o Fabric não considera um "Caminho" como um objeto de forma verdadeira selecionável e observável. Isso não atendeu às minhas necessidades, já que os caminhos interativos são um dos principais requisitos do meu aplicativo.
  • acréscimos de translações nos bastidores ao Canvas para posicionar objetos. Para mim, o Fabric tenta ser muito inteligente nesse aspecto, sem deixar claro para o desenvolvedor o que está fazendo.
  • opinião excessivamente forte sobre como funciona a interatividade mover, redimensionar e girar. De muitas maneiras, é ótimo ter essa funcionalidade incorporada ao framework, mas, no meu caso, não concordo com a maneira como ela foi implementada, o que significa essencialmente ter que reimplementá-la eu mesmo.
  • documentação esparsa - muitos dos casos em que a documentação de um método tem a forma: "setX (Y) - define o X para Y" :-)

Dei uma olhada no Paper e não fui muito longe. Pareceu-me abertamente obtuso e também caiu no meio do caminho - é uma biblioteca de visualização muito simples para ser um modelo de objeto simples para o Canvas, mas não é uma biblioteca de visualização suficiente para competir com o D3. Além disso, a documentação novamente não estava particularmente acessível.

Acho que Cavalete provavelmente faz muito sentido se você tem experiência em Flash / ActionScript, mas eu não tenho. Além disso, parecia excessivamente focado no jogo para minhas necessidades. O prego no caixão foi novamente documentação - insuficiente e apresentado em formato não padronizado.

Então, acabei optando pelo Kinetic porque:

  • tutoriais e exemplos realmente ricos e claros
  • As funções de API fazem o que são chamadas e são amplamente adivinhadas - produtividade mais rápida, curva de aprendizado mais superficial
  • é razoavelmente claro sobre o que faz e o que não faz - não é tão rico quanto alguns dos outros, mas é um benefício; faz menos coisas, mas faz melhor
  • Caminhos são Formas cidadãs de primeira classe, como qualquer outra Forma, o que era essencial para minhas necessidades.

Kinetic não é perfeito de forma alguma, e algumas vezes tive que mergulhar fundo no código-fonte para descobrir o que realmente está acontecendo nos bastidores. Além disso, sinto falta da análise SVG e da saída do Fabric.

Jeremy Burton
fonte
1
Obrigado por esta resposta, me economizou muito tempo. Vou com o Kinetic e espero que você descubra o que já disse.
Bashevis
Eu fiz um teste de usuário não científico das demos de arrastar e soltar fornecidas para as bibliotecas acima no iPad3 e Samsung Galaxy Tab2. KineticJS saiu como um vencedor claro também aqui, sendo mais ágil e mais exato em seu posicionamento de toque.
Por Quested Aronsson
1
Estou avaliando ambos e, no momento, sinceramente, fabricjs parece estar mais completo e bem documentado.
albanx
9
Jeremy, adoraria ouvir mais sobre inconsistências de API no Fabric. Eu tento torná-lo o mais intuitivo possível, então se algo ainda estiver estranho, eu definitivamente quero cuidar disso. Você pode registrar um tíquete ou mencioná-lo aqui? Os documentos têm melhorado desde janeiro, embora ainda não tão bons quanto eu gostaria que fossem. Opinião forte sobre interatividade - acho que você pode dizer isso, embora haja muitos ajustes que você possa fazer. O que exatamente você queria diferente? Finalmente, eventos de ponteiro - não tenho certeza do que você quer dizer. O caminho é certamente uma forma real: fabricjs.com/quadratic-curve
kangax
23

Eu recomendo pixijs. É uma biblioteca de telas de alto desempenho.

Pixi.js é um renderizador 2D webGL com um fallback de tela perfeito que permite que ele funcione em todos os navegadores modernos, tanto para desktop quanto para dispositivos móveis.

http://www.goodboydigital.com/pixi-js-is-out/

bendangelo
fonte
3
Em julho de 2014, esta parecia ser a melhor biblioteca de telas lá fora. Com 4 mil pessoas estrelou no Github e é usado por grandes empresas e agências. pixijs.com/projects como o Google.
Vennsoh