Javascript Girl
  1. Javascript Girl
  3. Enveloppez l'image entière sur une tasse cylindrique en javascript html5
Intereting Posts
Javascript switch / case: les types sont-ils comparés? Uncaught TypeError: Object.values ​​n'est pas une fonction JavaScript Twitter Bootstrap vs jQuery UI? Comment mapper le modèle à la table lorsque la structure est basée sur le tableau? Extraire les phrases-clés du texte (ngrammes de 1 à 4 mots) La variable locale Javascript déclare Filtre angulaire retour html Hauteur réactive de carouFredSel Comment effacer, supprimer ou réinitialiser l'état de validation du formulaire HTML5 après "setCustomValidity (" … ");"? Abréviation de console.log en JavaScript Comment créer un Serializer personnalisé pour les données Ember Nokogiri peut-il interpréter javascript? – Scraping Web Comment puis-je utiliser JavaScript sur le côté client pour détecter si la page a été cryptée? Actualiser un Div qui a une publicité Google à l'intérieur Violation invariante: _registerComponent (…): Le conteneur cible n'est pas un élément DOM

Enveloppez l'image entière sur une tasse cylindrique en javascript html5

Je veux envelopper l'image sur une tasse cylindrique. J'utilise le script html5 et Java pour obtenir cette solution. J'ai eu une idée de ce lien: https://stackoverflow.com/questions/31424117/ . Mais je ne reçois pas de solution de ce lien.

Entrez la description de l'image ici

Je souhaite envelopper l'image restante derrière la tasse, Comme mouler la partie restante et ajouter un bouton pour la rotation. 

<canvas id="canvas"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var productImg = new Image(); productImg.onload = function () { var iw = productImg.width; var ih = productImg.height; console.log("height"); canvas.width = iw; canvas.height = ih; ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height, 0, 0, iw, ih); //start(); // outline /*ctx.beginPath(); ctx.moveTo(88, 235.734375); ctx.bezierCurveTo(88, 234.734375, 204, 298, 327, 234.734375); ctx.stroke();*/ }; productImg.src = "https://d2z4fd79oscvvx.cloudfront.net/0018872_inspirational_teacher_mug.jpeg"; var img = new Image(); img.onload = start; img.src = "http://blog.foreigners.cz/wp-content/uploads/2015/05/Make-new-friends.jpg"; var pointer = 0; function start() { var iw = img.width; var ih = img.height; //canvas.width = iw + 20; //canvas.height = ih + 20; var x1 = 125; var y1 = 130; var x2 = 180; var y2 = 190; var x3 = 405; var y3 = 150; // calc line equations slope & b (m,b) var unitT = 1 / iw; // draw vertical slices 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 - 600); }

Entrez la description de l'image ici

Si je change la valeur du pointeur dans le code ci-dessus, que l'étirement de l'image restante. 

 var pointer = 100 ;

Je veux envelopper l'image sur toute la tasse et tourner à gauche et à droite.

J'ai joué autour de votre plunkr pendant un certain temps et je suis venu avec ceci: http://plnkr.co/edit/83xAr99FjswWg0GHjDvJ?p=preview 

 function start() { var iw = img.width; var ih = img.height; var xOffset = 125, yOffset = 122; var a = 122.0; var b = 30.0; var scaleFactor = iw / (2*a); //how many times original image is greater compared to our rendering area? // draw vertical slices for (var X = 0; X < iw; X+=1) { var y = b/a * Math.sqrt(a*a - (Xa)*(Xa)); // ellipsis equation ctx.drawImage(img, X * scaleFactor, 0, 6, ih, X + xOffset, y + yOffset, 1, ih - 605 + y/2); } }

J'ai pris cette équation de points de suspension http://www.mathopenref.com/coordgeneralellipse.html et je l'ai transformé en formulaire où je peux obtenir une coordonnée Y à partir de la coordonnée X associée.

Tasse modifiée

Vous pouvez jouer avec mon plunkr encore plus pour que l'image recouvre plus précisément la tasse, mais elle est encore loin de la réalité car cette méthode ne tient pas compte des différentes caractéristiques de la lumière de la tasse. 

 function canvas1() { var canvas = document.getElementById("canvas1"); var ctx = canvas.getContext("2d"); var productImg = new Image(); productImg.onload = function() { var iw = productImg.width; var ih = productImg.height; console.log("height"); canvas.width = iw; canvas.height = ih; ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height, 0, 0, iw, ih); loadUpperIMage() }; productImg.src = "http://res.cloudinary.com/pussyhunter/image/upload/c_scale,f_auto,h_350/left_handle_cup_i7ztfs.jpg" function loadUpperIMage() { var img = new Image(); img.src = "https://media1.giphy.com/media/j3uyvaaslUxNe/200_s.gif" img.onload = function() { var iw = img.width; var ih = img.height; var xOffset = 102, //left padding yOffset = 110; //top padding //alert(ih) var a = 75.0; //image width var b = 10; //round ness var scaleFactor = iw / (4 * a); // draw vertical slices for (var X = 0; X < iw; X += 1) { var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation ctx.drawImage(img, X * scaleFactor, 0, iw / 9, ih, X + xOffset, y + yOffset, 1, 174); } }; } }; function canvas2() { var canvas = document.getElementById("canvas2"); var ctx = canvas.getContext("2d"); var productImg = new Image(); productImg.onload = function() { var iw = productImg.width; var ih = productImg.height; console.log("height"); canvas.width = iw; canvas.height = ih; ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height, 0, 0, iw, ih); loadUpperIMage() }; productImg.src = "http://res.cloudinary.com/pussyhunter/image/upload/h_350/canter_handle_cup_xyxhdd.jpg" function loadUpperIMage() { var img = new Image(); img.src = "https://media1.giphy.com/media/j3uyvaaslUxNe/200_s.gif" img.onload = function() { var iw = img.width; var ih = img.height; // alert(iw) var xOffset = 101, //left padding yOffset = 110; //top padding var a = 75.0; //image width var b = 10; //round ness var scaleFactor = iw / (4 * a); // draw vertical slices for (var X = 0; X < iw; X += 1) { var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation ctx.drawImage(img, X * scaleFactor, 0, iw / 3, ih, X + xOffset, y + yOffset, 1, 174); } }; } }; function canvas3() { var canvas = document.getElementById("canvas3"); var ctx = canvas.getContext("2d"); var productImg = new Image(); productImg.onload = function() { var iw = productImg.width; var ih = productImg.height; canvas.width = iw; canvas.height = ih; ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height, 0, 0, iw, ih); loadUpperIMage() }; productImg.src = "http://res.cloudinary.com/pussyhunter/image/upload/h_350/right_handle_cup_dsdhr7.jpg" function loadUpperIMage() { var img = new Image(); img.src = "https://media1.giphy.com/media/j3uyvaaslUxNe/200_s.gif" img.onload = function() { var iw = img.width; var ih = img.height; //alert(iw) var xOffset = 102, //left padding yOffset = 110; //top padding var a = 75.0; //image width var b = 10; //round ness var scaleFactor = iw / (3 * a); // draw vertical slices for (var X = 0; X < iw; X += 1) { var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation ctx.drawImage(img, X * scaleFactor, 0, iw / 1.5, ih, X + xOffset, y + yOffset, 1, 174); } }; } }; setTimeout(function() { canvas1() }, 1000); setTimeout(function() { canvas2() }, 2000); setTimeout(function() { canvas3() }, 3000); function updateItems(delta) { var $items = $('#group').children(); var $current = $items.filter('.current'); $current = $current.length ? $current : $items.first(); var index = $current.index() + delta; // Range check the new index index = (index < 0) ? 0 : ((index > $items.length) ? $items.length : index); $current.removeClass('current'); $current = $items.eq(index).addClass('current'); // Hide/show the next/prev $("#prev").toggle(!$current.is($items.first())); $("#next").toggle(!$current.is($items.last())); } $("#next").click(function () { updateItems(1); }); $("#prev").click(function () { updateItems(-1); }); // Cause initial selection updateItems(0); 
 #group div{ display: none; } #group div.current{ display: block; } #next, #prev{ width: 100px; height 40px; cursor:pointer; color:red; position:fixed; } #next{ float: right; } #prev{ float: left; margin-left:40px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <div id="next">next</div> <div id="prev">prev</div> <div id="group" > <div> <canvas id="canvas1"></canvas> </div> <div> <canvas id="canvas2"></canvas> </div> <div> <canvas id="canvas3"></canvas> </div> </div>