Javascript Girl
  1. Javascript Girl
  3. GIF animé sur Canvas.js Canvas
Intereting Posts
Validation de la zone de texte dans jquery Impossible de charger la ressource: net :: ERR_CONTENT_LENGTH_MISMATCH Comment charger un JSON entre domaines avec $ http dans angularjs 1.0.8 comme il le fait avec 1.2.0 Comment remplacer une méthode intégrale d'objets natifs de javascript Comment créer une barre de progression de travail pour le transfert de fichiers cordova HTML5 permettra-t-il aux applications Web de faire des connexions HTTP peer-to-peer? Quel est le moyen simple d'obtenir l'url dans la fenêtre actuelle moins le nom de domaine? Site Web qui reconnaît la localisation de l'utilisateur / IP & change lang. basé sur cela Générer une chaîne HTML brute à partir d'un fichier de composant et d'un modèle de vue Comment puis-je utiliser JQuery pour détecter si un utilisateur se déplace vers le bas de la page? Intégration d'AngularJS et de Bridgeit.js (application Web mobile) Existe-t-il un moyen de créer deux animations jQuery (correctement) simultanément? Utilisez le plugin jQuery avec Backbone et Requirejs Détecter l'événement de la souris d'un enfant contenté dont le parent est une div contentative Le JavaScript de Bootstrap requiert jQuery version 1.9.1 ou supérieure, mais inférieur à la version 3

GIF animé sur Canvas.js Canvas

Je travaille sur un projet où on m'a demandé de prendre en charge le GIF animé sur une toile de tissu.js.

Selon https://github.com/kangax/fabric.js/issues/560 , j'ai suivi les conseils à effectuer régulièrement, en utilisant fabric.util.requestAnimFrame. La vidéo rend très bien cette méthode, mais les GIF ne semblent pas être mis à jour. 

var canvas = new fabric.StaticCanvas(document.getElementById('stage')); fabric.util.requestAnimFrame(function render() { canvas.renderAll(); fabric.util.requestAnimFrame(render); }); var myGif = document.createElement('img'); myGif.src = 'http://i.stack.imgur.com/e8nZC.gif'; if(myGif.height > 0){ addImgToCanvas(myGif); } else { myGif.onload = function(){ addImgToCanvas(myGif); } } function addImgToCanvas(imgToAdd){ var obj = new fabric.Image(imgToAdd, { left: 105, top: 30, crossOrigin: 'anonymous', height: 100, width:100 }); canvas.add(obj); }

JSFiddle ici: http://jsfiddle.net/phoenixrizin/o359o11f/

Tout conseil sera grandement apprécié! J'ai cherché partout, mais je n'ai pas trouvé de solution de travail.

Selon les spécifications sur la méthode drawImage Canvas 2DRenderingContext,

Plus précisément, lorsqu'un objet CanvasImageSource représente une image animée dans un HTMLImageElement , l'agent utilisateur doit utiliser l'image par défaut de l'animation (celle que le format définit doit être utilisée lorsque l'animation n'est pas prise en charge ou est désactivée), ou s'il existe N'est pas une telle image, la première image de l'animation, lors du rendu de l'image pour les API CanvasRenderingContext2D.

Cela signifie que seul le premier cadre de notre toile animée sera dessiné sur le canevas.
C'est parce que nous n'avons aucun contrôle sur les animations dans une balise img.

Et fabricjs est basé sur l'API de la toile et donc réglementé par les mêmes règles.

La solution consiste alors à analyser toutes les images fixes de votre gif animé et à l'exporter en tant que feuille de sprite. Vous pouvez ensuite l'animer facilement dans les tissus grâce à la classe sprite .