Le plug-in jQuery ImageDrawer.js réalise un dessin dynamique d'une animation d'image (avec téléchargement du code source)_jquery

ImageDrawer.js est un plug-in jQuery qui peut dessiner dynamiquement des animations d'images. Grâce au plug-in ImageDrawer.js, vous pouvez créer un processus dynamique de dessin d'images sur la page. Vous pouvez contrôler des paramètres tels que la durée de l'animation du dessin, ce qui est très intéressant.

Affichage de l'effet Téléchargement du code source

Comment utiliser

L'utilisation de ce plug-in d'image dessinée dynamiquement nécessite l'introduction des fichiers imagedrawer.css, jquery et imagedrawer.js dans la page.

<link rel="stylesheet" href="css/imagedrawer.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/imagedrawer.js"></script>

Structure HTML

Insérez l'image que vous devez dessiner sur la page.

<div id="container">
<img id="example" src="img.jpg">
</div>

Plug-in d'initialisation

Une fois l'élément DOM de la page chargé, le plug-in de dessin d'image peut être initialisé via la méthode suivante.

$('div#container').drawImage();

Paramètres de configuration

Le plug-in de dessin d'image ImageDrawer.js dispose des paramètres de configuration suivants.

$(div#container).drawImge({
duration: 20, @number - seconds it's take to draw the entire picture
Instead of specifying the duration on the whole animation,
|| { it's also possible to set the duration of single drawing phases:
borderPencil : 9, @number - seconds it's take to draw the picture by using only the pencil for borders
pencilShades : 6, @number - seconds it's take to draw sharpest shades with black pencil
colorShades : 7.5, @number - seconds it's take to draw first, basic, vanish colors
fullColors : 7.5 @number - seconds it's take to define better all colors on the picture
},
background: '#949494', @string - background color for image while it's been drawing
callback: fn(), @function - function to execute after the last phase
pencil: {
height: '50px',
width : '50px',
src : './img/pencil.png' @string - path to the pencil image
}
});

durée : la durée de l'animation du dessin. Peut être un entier ou un objet :

{
borderPencil : 9, 
pencilShades : 6, 
colorShades : 7.5, 
fullColors : 7.5 
}

borderPencil : Le temps nécessaire pour tracer la bordure.
pencilShades : Le temps nécessaire pour dessiner des ombres en noir et blanc.
colorShades : Le temps nécessaire pour dessiner les ombres de couleur.
fullColors ; le temps nécessaire pour remplir les couleurs.
background : La couleur d’arrière-plan de la toile.

callback : fonction de rappel.

crayon : Une petite icône en forme de crayon affichée au-dessus de la toile.

Ce qui précède est la connaissance du plug-in jQuery ImageDrawer.js introduit par l'éditeur pour dessiner dynamiquement des animations d'images (téléchargement du code source ci-joint).