wiki:fr/drafts/jimage2
developer.jelix.org is not used any more and exists only for history. Post new tickets on the Github account.
developer.jelix.org n'est plus utilisée, et existe uniquement pour son historique. Postez les nouveaux tickets sur le compte github.

Version 12 (modified by Lipki, 12 years ago) (diff)

--

Proposition pour jImage2 le plugin

{image 'data/fichiers/toupie.png', '

    border-radius    : 5° ;                              // avec ou sans le °
    border-width     : 2px ;                             // avec ou sans le px
    border-color     : #f00 || #ff0000 ;                 // 3 ou 6
    border-8share    : url(border.png) 5px ;             // [▲►▼◄] || [▲▼] [►◄] || [▲] [►◄] [▼] || [▲] [►] [▼] [◄]
	
    border           : 5° 2px #f00;                      // ° et px requis ; ordre aléatoire ; n'intègre pas 8share
	
    square           : on ;                              // [on|off] ; force l'interprétation rectangulaire de l'image, pour les fonds transparent, activer par défaut pour le jpg
	
    shadow-offset    : 10px ;                            // avec ou sans le px
    shadow-angle     : 45° ;                             // avec ou sans le ° ; [0-360]
    shadow-alpha     : 0.5@ ;                            // avec ou sans le @ ; [0-1]
    shadow-blur      : 5 ;                               // [1-10]
    shadow-color     : #f00 || #ff0000 ;                 // 3 ou 6
    shadow           : on ;                              // on ou off ; inutile si un autre paramêtre et spécifier
	
    shadow           : 10px 45° 5 #f00 ;                 // ° et px requis ; ordre aléatoire
	
    rotate           : 20° ;                             // avec ou sans le ° ; [0-360]
    zoom             : 50% ;                             // avec ou sans le % ; [0-∞]
	
    link             : url(http://jelix.org) ;
	
    vertical-align   : top   || -20px ;                  // avec ou sans le px ; [top |middle|bottom|:int]
    horizontal-align : right ||  20px ;                  // avec ou sans le px ; [left|center|right |:int]
	
    align            : top 20px ;                        // avec ou sans le px ; vertical horizontal
	
    extension        : jpg ;                             // [png|jpg|gif]
    quality          : 0.8 ;                             // [0-1]
	
    background-color : #f00 || #ff0000 ;                 // 3 ou 6
    background-image : url(border.png) ;

    background       : #f00 url(border.png) ;

    defaut           : url(border.png) || hide ;         // [hide|hidden|url(x)]

    width            : 90px || 20% ;                     // % et px requis ; % de la taille d'origine
    height           : 90px || 20% ;                     // % et px requis ; % de la taille d'origine
    enlarge          : on ;                              // [on|off]
    ratio            : inner ;                           // [inner|outer|inner-cap|outer-cut]

    class            : bob ;                             // n'importe quel attributs html

'}

Comparaison

 av : {image 'toupie.png', array('width'=>100) }[[BR]]
 ap : {image 'toupie.png', 'width: 100;' }

 av : {image 'toupie.png', array('width'=>150, 'height'=>50, 'omo'=>true) }[[BR]]
 ap : {image 'toupie.png', 'width: 150; height: 50; ratio: outer-cut;' }

 av : {image 'toupie.png', array('width'=>100, 'zoom'=>60, 'alignh'=>'right', 'alignv'=>-20) }[[BR]]
 ap : {image 'toupie.png', 'width: 100; zoom: 140; align: -20 right;' }

 av : {image 'toupie.png', array('width'=>100, 'shadow'=>true, 'soffset'=>20, 'sangle'=>0, 'sblur'=>0, 'sopacity'=>100, 'scolor'=>'#ffff00') }[[BR]]
 ap : {image 'toupie.png', 'width: 100; shadow: 20px 0° 0 1@ #ff0;' }

 av : {image 'toupie2.png', array('width'=>100, 'notexists'=>'pastoupie.png') }[[BR]]
 ap : {image 'toupie2.png', 'width: 100; defaut: url(pastoupie.png);' }

Utilisation de :

Border

Il est possible d'ajouter une bordure a l'image.

note : l'utilisation de "border-8share" et de "border-radius" force "square" à "on". note : si "square" est à "off", la bordure devra suivra la forme de l'image.

  • border-radius : Ajoute des coins arrondi a l'image. [défaut : 5]
  • border-width : Épaisseur de la bordure. [défaut : 2]
  • border-color : Couleur de la bordure. [défaut : #fff]
  • border-8share : url de l'image utilisé pour créer la bordure, cette image est divisé en 8 part. [défaut : ...]
    Les chiffres représente la taille de la bordure en haut, en bas et sur les coté.
  • border : l'ordre des paramètres n'importe pas, mais il faut penser a mettre les unités. [défaut : 5° 2px #fff]
    border-8share n'est pas intégrer.

ex de code :

   {image 'toupie.png', 'border: 3° 3px #fff;' }
   {image 'toupie.png', 'border-8share: url(border.png) 5px 3px;' }

Square

Lorsque square est a "on", l'image est traité comme un rectangle plein même si c'est une image png24, avec des zones transparentes.
par défaut square est a "off", mais il est forcé a "on" lorsque l'on utilise :

  • border-radius
  • border-8share
  • dans le cas d'une image jpg en entrée et/ou en sortie

ex de code :

   {image 'toupie.png', 'square: on;' }

Shadow

Shadow permet d'appliquer une ombre portée a l'image.

note : l'utilisation de l'une ou l'autre de c'est attributs force l'ombre a s'afficher, utiliser "shadow: on;" si tous les paramètres reste par défaut. note : l'image est redimensionner après la pose de l'ombre.

  • shadow-offset : décalage de l'ombre avec l'image [défaut : 10]
  • shadow-angle : angle de l'ombre [défaut : 45]
  • shadow-alpha : niveau de transparence [défaut : 0.5]
  • shadow-blur : niveau de flou [défaut : 3]
  • shadow-color : couleur de l'ombre [défaut : #000]
  • shadow : Affiche l'ombre [défaut : off]

  • shadow : l'ordre des paramètres n'importe pas, mais il faut penser a mettre les unités. [défaut : 10px 45° 0.5@ 3 #000 on]

ex de code :

   {image 'toupie.png', 'shadow: on;' }
   {image 'toupie.png', 'shadow: 20px 0° 0 1@ #ff0;' }

Rotate