Deplacer les elements d'un canvas a la souris et créer des lien

Télécharger le projet
Commenter

Description

Comme son nom l'indique, la source sert a deplacer les elements d'un canvas (image texte rectangle et cercle) à la souris et permet de créer des lien vers d'autres pages par l'intermediaire d'un fichier de configuration json.

Pour cette source, j'ai experimenté comment deplacer des elements : pour ce faire, j'utilise un fichier json qui au chargement de la page devient un array d'objet contenant la configuration de chaques elements et, à chaque deplacement, on reatualise le array en modifiant la position de l'element deplacé et on reactulise le canvas toujours en lisant les donné du array de l'ojet concerné.
La detection de chaques elements se fait en utilisant une fonction de detection des bords comme celle utilisée dans les colisions pour les jeux 2d.
Il y a aussi un array qui permet de connaitre la position au niveau de la pronfondeur des elements afin qu'un element deplacé se retrouve au premier plan et que ceux precedement deplacé concervent leurs place.

j'aurai pu appronfondir la source mais j'ai preferé m'arreter car je ne sais pas si elle peut vraiment etre utile. En tout cas je pense q'elle peut etre une bonne base de depart pour se créer son propre systeme de deplacement dans un canvas.

page teste

mise en place

pour chaque canvas il suffit de cree une instance en precisant le nom du canvas et le nom de l'objet json 

//////////////creation des instances////////////////

function lancer(){
    
    new kvs_drag("zone",cvs_elem);    //mettre le nom du canvas cible et le nom de l'objet json//
    new kvs_drag( "zone2",cvs_elem2);    //mettre le nom du canvas cible et le nom de l'objet json//
}

window.addEventListener("load",lancer, false);

//////////////////////////////////////////////////



exemple de fichier json 

var cvs_elem=[

   {
    "type":"rectangle",
    "gauche":290,
    "haut":10,
    "hauteur":100,
    "largeur":80,
    "couleur":"blue",
    "deplacable":true
    },
    
    {
    "type":"image",
    "gauche":200,
    "haut":250,
    "hauteur":60,
    "largeur":60,
    "image":"images/cherry.png",
    "deplacable":true
    },
    
    {
    "type":"cercle",
    "gauche":100,
    "haut":250,
    "hauteur":0,
    "largeur":0,
    "rayon":30,
    "couleur":"gray",
    "deplacable":true
    },
    
    {
    "type":"texte",
    "texte":"bonjour tout tout le monde",
    "police":"20px serif",
    "gauche":140,
    "haut":320,
    "hauteur":20,        //taille de la police
    "largeur":0,
    "couleur":"purple",
    "deplacable":true
    },
    
    "type":"texte_lien",
    "texte":"lien vers code source",
    "adresse":"http://codes-sources.commentcamarche.net",
    "police":"20px serif",
    "gauche":50,
    "haut":100,
    "hauteur":20,        //taille de la police
    "largeur":0,
    "couleur":"blue",
    "deplacable":false,
    }
]
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (@karamel)