jQuery Girl
  1. jQuery Girl
  3. Déplacement d’image dans la canvas avec la souris
Intereting Posts
alternative cffile, je dois télécharger sans soumettre le formulaire Uncaught TypeError: impossible de lire la propriété ‘ajax’ de non définie lorsque j’essaie d’envoyer des données à l’URL JQM (jQueryMobile) Les éléments ajoutés dynamicment ne s’affichant pas correctement et CSS n’est pas appliqué Comment charger dynamicment du contenu dans DIV en utilisant Javascript jQuery UI Autocomplete a cessé de fonctionner jQuery ne s’affiche pas sur la page JSP lorsqu’il est appelé depuis un servlet Comment appeler la propriété de dégradé CSS CSS -> Filtre de Jquery jquery: largeur de l’image sur domready ou load? Comment fondre dans une page Web entière – accessible Possible de faire fonctionner Excanvas dans IE 8? Utiliser la moustache pour remplir un argument de balise html jqPlot ticks sans décimales jquery cliquez sur l’élément d’ancrage oblige défiler vers le haut? Comment déclencher l’événement de changement JQuery lorsque la valeur d’entrée est modifiée par programme? Comment exclure un élément d’un glisser dans une liste pouvant être sortingée?

Déplacement d’image dans la canvas avec la souris

J’ai cette canvas où j’utilise 2 images, l’une est l’image principale et la seconde est utilisée comme masque d’écrêtage.

Je dois pouvoir déplacer l’image principale et avoir le code déjà implémenté, mais lorsque nous cliquons sur l’image pour la faire glisser, l’image prend toujours la position initiale. souris, il y a une sorte de retard croissant. J’ai essayé de changer ça, mais je ne suis pas très doué en maths pour trouver la bonne formule.

C’est le code que j’utilise pour capturer la souris en mouvement: 

$(window).mousemove(function(event) { if( isDragging == true ) { var cWidth = $("#stcanvas").width(); moveXAmount = (event.pageX / $(window).width())*cWidth; moveXAmount = moveXAmount - (cWidth/2); var cHeight = $("#stcanvas").height(); moveYAmount = (event.pageY / $(window).height())*cHeight; moveYAmount = moveYAmount - (cHeight/2); buildcanvas(); } });

Toute idée de comment cela peut-il être résolu?

Voici un violon: http://jsfiddle.net/rVx5G/10/

Il semble que vous deviez gérer le delta en mouvements de la souris au lieu de vous déplacer par rapport à la fenêtre. Voici un jsfiddle . Le changement est: 

 var prevX = 0; var prevY = 0; $(window).mousemove(function(event) { if( isDragging == true ) { if( prevX>0 || prevY>0) { moveXAmount += event.pageX - prevX; moveYAmount += event.pageY - prevY; buildcanvas(); } prevX = event.pageX; prevY = event.pageY; } });

Est-ce que cela réalise ce que tu voulais?

Changez cette ligne comme ci-dessous pour la taille automatique

ctx.clearRect (0, 0, mask_image.width , mask_image.height ); 

 function make_pic(ctx) { // Mask for clipping mask_image = new Image(); mask_image.src = 'mask.png'; ctx.clearRect(0, 0, mask_image.width, mask_image.height); ctx.drawImage(mask_image, 0, 0); ctx.save(); ....