2010-10-25 14 views
8

J'utilise la bibliothèque JavaScript de Raphael. Je voudrais dessiner une bordure avec des bords arrondis autour d'une image (qui est un objet de Raphaël) mais je n'arrive pas à comprendre comment faire cela. J'ai essayé de mettre un coup mais ça n'apparait pas.Peindre la bordure arrondie autour de l'image en utilisant Raphael

J'ai ceci:

var paper = Raphael(10, 50, 500, 500); 
var google_img = paper.image("http://www.google.com/images/logos/ps_logo2.png", 10, 10, 200, 200); 

apprécierais toute aide possible!

Répondre

1

Je pense que vous parlez d'un chemin de détourage. Découvrez Clipping path on Wikipedia. Un peu court Google, j'ai trouvé quelques nouvelles malheureuses du groupe Google de Raphaël:

Une application raphael doit fonctionner dans Internet Explorer sans plugins. [Chemins de détourage] sont disponibles en SVG, mais Internet Explorer ne supporte pas svg. Au lieu de cela, il utilise le propiétaire Microsoft VML "standard" (http://msdn.microsoft.com/en-us/library/bb263898(v=VS.85).aspx)

Donc en résumé (IMHO) raphael seulement "peut être" à l'intersection des opérations svg et des opérations VML.

(d'après Does RaphaelJS support clipping masking compositing?, publié par Sebastian Gurin).

Si vous souhaitez utiliser un plugin pour activer l'écrêtage dans les navigateurs qui le prennent en charge, consultez le fil de discussion.

Sinon, vous pouvez essayer de dessiner un non rempli, caressa rectangle avec les mêmes dimensions au même endroit que l'image, mais avec l'attribut r de l'ensemble de l'image et la stroke-width assez grand pour compenser le rayon (notez que cela peut entraîner le masquage des extrémités de l'image).

11

Comment l'utilisation de l'image comme remplissage:

var paper = Raphael(10, 50, 500, 500); 
paper.rect(10, 10, 364, 126, 20).attr({ 
    fill: "url(http://www.google.com/images/logos/ps_logo2.png)", 
    "stroke-width": 2 
}); 
+0

c'est probablement la solution la plus simple. La seule raison que je peux voir pour ne pas utiliser cela est si vous avez besoin de mettre à l'échelle votre image dans Raphael. – Brenden

+1

Son de nul autre que Dmitry !!! – kiranvj

+0

Malheureusement, avec cette solution par ailleurs élégante, l'image n'est pas adaptée aux dimensions rectales. –