GWT Image clippée

Question

Je crée un widget dans lequel une partie d'une image sera mise en évidence et la partie restante aura une opacité de 0,5.

Pour cela, j'utilise deux images. L'image complète à l'arrière avec l'opacité 0.5. la partie de l'image que je veux mettre en évidence à l'avant. l'image frontale est l'image Clipped de GWT.

J'ai un scénario où je dois redimensionner l'image arrière. Est-il possible de redimensionner l'image découpée à l'avant?

Answer 1

GWT implémente des images taillées à l'aide de style CSS2 (avec un contenu d'image en blanc), comme dans l'exemple suivant:

width: 300px; height: 300px; 
background: url("/team.png") no-repeat scroll -5px -5px transparent; 

Malheureusement CSS2 ne supporte pas les arrière-plan mise à l'échelle (fourni l'URL), les images, donc il n'y a pas un moyen naturel de redimensionner une image découpée en utilisant des bibliothèques GWT intégrées.

Une option consiste à utiliser une toile, et charger une image en elle, comme décrit à:
http://code.google.com/p/google-web-toolkit-incubator/wiki/GWTCanvas

Sinon, votre meilleure option peut être soit clip ou échelle (ou les deux) l'image sur la serveur. Pardon!

-Bosh

Answer 2

Une alternative avec GWT 2.0+, si vous ne me dérange pas de servir différentes images est de définir un ClientBundle avec différents DataResources, un pour chaque image. Ensuite, vous devez utiliser l'URL de DataResource pour définir l'URL des images.

interface MyClientBundle extends ClientBundle { 
    @Source("img1.png") 
    DataResource myImg1(); 
    @Source("img2.png") 
    DataResource myImg2(); 
} 

private static final MyClientBundle BUNDLE = GWT.create(MyClientBundle.class); 

puis ...

new Image(BUNDLE.myImg1().getUrl()); 

Il devrait fonctionner et GWT peut générer « des données: » URL pour du navigateur qui le soutiennent, ce qui élimine la nécessité d'une image télécharger séparément du tout. Au fait, avez-vous vraiment besoin de redimensionner? Visuellement ce n'est pas très gentil.