Javascript Girl
  1. Javascript Girl
  3. Enveloppez l'image autour d'une tasse cylindrique à l'aide de la toile html 5 et javascript
Intereting Posts
Existe-t-il un moyen de voir qu'une fenêtre de navigateur est minimisée alors que l'utilisateur passe à l'autre fenêtre sur l'iPhone? Dc.js tri ordinal line chart par axe y / valeur Javascript simple pour imiter le comportement jQuery de l'utiliser dans les gestionnaires d'événements Le type org.springframework.beans.BeansException ne peut pas être résolu. Il est indirectement référencé à partir des fichiers .class requis. La requête Ajax provoquant une erreur "param ou la valeur est vide" Portabilité de nextElementSibling / nextSibling Erreur: impossible de trouver le module html Quand dois-je utiliser let and var? Comment puis-je obtenir l'heure actuelle de la lecture de la chanson dans jPlayer? AngularJS (Matériau) – Actualiser les données dans la liste md après avoir ajouté un nouvel objet à l'aide de md-dialog Extension Chrome: communication entre script de contenu et background.html Découvrez le mot le plus long d'une phrase – Javascript ASP.NET MVC3 – Ajout dynamique d'un élément au tableau sur l'objet Transitions CSS bloquées par JavaScript Accès aux fichiers locaux avec javascript

Enveloppez l'image autour d'une tasse cylindrique à l'aide de la toile html 5 et javascript

Mon objectif est d'envelopper une image sur une tasse de café virtuellement en utilisant HTML5 et javascript.

J'ai créé un prototype: http://jsfiddle.net/sandeepkum88/uamov2m7/

Actuellement, je coupe l'image en bandes de largeur 1px puis je place ces bandes sur la courbe de Bezier. 

var img = new Image(); img.onload = start; img.src = "http://in-sandeep.printvenue.org/test-images/mug-strap.png"; var pointer = 0; function start() { var iw = 198.97826; var ih = img.height; var x1 = 50; var y1 = 40; var x2 = 97; var y2 = 60; var x3 = 152; var y3 = 40; // calc unit value for t to calculate bezier curve var unitT = 1 / iw; // put image slices on the curve for (var X = 0, t = 0; X < iw; X++, t+=unitT) { var xTop = (1-t) * (1-t) * x1 + 2 * (1 - t) * t * x2 + t * t * x3; var yTop = (1-t) * (1-t) * y1 + 2 * (1 - t) * t * y2 + t * t * y3; ctx.drawImage(img, X + pointer, 0, 1, ih, xTop, yTop, 0.85, ih-188); } }

Mais je ne suis pas satisfait du résultat.

Est-ce que je me trompe quelque part? Y a-t-il une meilleure alternative? Et si la courbe supérieure et la courbe inférieure sont différentes.

Existe-t-il un moyen d'y parvenir en utilisant une matrice de transformation?