Forums Développement Multimédia

Aller au contenu

Drag/zoom d'une image

CODE HTML CSS

3 réponses à ce sujet

#1 Stripsodie

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 05 April 2012 - 14:42 PM

Bonjour à tous,
Je travaille actuellement sur un site mobile/web et je rentre deux petits soucis :)

J'ai une grande image "draggable" chargée dynamiquement mais je n'arrive pas à imposer des limites à ce draggage.

Aussi je souhaiterai disposer d'un bouton afin de pouvoir zoomer, mais là aussi je bloque !

Voici le code javascript/html que j'ai,
Merci d'avance,


var zoom = 1;
function zoomImg (){
zoom = 10;
drawImage(imageObj);
}
         
function drawImage(imageObj, zoomImg) {
var stage = new Kinetic.Stage("container", 10, 10);
var layer = new Kinetic.Layer();
var x = 0;
var y = 0;

var planImg = new Kinetic.Image({
image: imageObj,
x: x,
y: y,
width: largeur*zoom,
height: hauteur*zoom
});
       
var position1 = planImg.x;                     
planImg.draggable(true);
layer.add(planImg);
stage.add(layer);
}
window.onload = function(){
var imageObj = new Image();
imageObj.onload = function(){
drawImage(this);
};
imageObj.src = "plan.jpg";
};
function position(position1) {
if (position1 >= 0) {
alert("test");
}
};
document.onmousemove = position;
 


<div id="container"></div>
<img src="dot.png" id="bouton" onclick="bouge();">
<img src="plus.png" id="plus" onclick="zoomImg();">
 


#2 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 06 April 2012 - 16:55 PM

Bien que je connaisse cette librairie (Kinetic), je ne l'ai jamais utilisée.

Puisqu'on est sur un forum qui traite aussi du flash, je te propose une autre librairie javascript, développée par un célèbre flasheur, Grant Skinner qui utilise une syntaxe très proche de ce qu'on peut utiliser dans flash : easeljs

Pour être franc, ça fait des mois que j'attend une occasion de tester cette librairie, je profite donc de l'occasion et ai modifié à l'arrache l'exemple donné dans la doc (que tu télécharges en même temps que la librairie)

Petite vidéo pour te présenter la chose que je ne manquerais pas d'approfondir dans les jours qui viennent



Lien vers easeljs : http://createjs.com/
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#3 Stripsodie

    Ceinture Blanche

  • Members
  • Pip
  • 9 messages

Posté 07 April 2012 - 11:03 AM

Waouh !
Merci beaucoup de ta réponse, j'ai regardé ta vidéo, c'est très bien expliqué,
(en effet j'ai des bases en as3 et ce script devient de suite plus compréhensible)
Je vais tester dès que possible et suivrait avec attention la suite de ce que tu proposes avec cette librairie ;)

#4 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 07 April 2012 - 21:17 PM

C'est à moi de te remercier, sans ton post, je n'aurais sans doute pas encore testé EaslJS

http://forums.mediab...s-avec-easeljs/
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP