पेंट मैं राफेल JavaScript लाइब्रेरी का उपयोग कर रहा राफेल

Question

का उपयोग कर छवि के चारों ओर बॉर्डर गोल। मैं एक छवि के चारों ओर गोल किनारों के साथ एक सीमा (जो एक राफेल वस्तु) आकर्षित करने के लिए चाहते हैं, लेकिन मुझे लगता है कि कैसे करना है यह पता लगाने नहीं कर पा रहे। मैंने स्ट्रोक सेट करने की कोशिश की लेकिन यह प्रकट नहीं होता है।

मैं इस है:

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); 

किसी भी मदद मैं प्राप्त कर सकते हैं की सराहना!

Answer 1

मुझे लगता है कि आप एक कतरन पथ के बारे में बात कर रहे हैं। Clipping path on Wikipedia देखें। एक छोटा Google दूर, मुझे राफेल के Google समूह से कुछ दुर्भाग्यपूर्ण समाचार मिली:

एक रैफेल एप्लिकेशन बिना इंटरनेट प्लगइन के इंटरनेट एक्सप्लोरर में चलाना चाहिए। [क्लिपिंग पथ] एसवीजी में उपलब्ध हैं, लेकिन इंटरनेट एक्सप्लोरर svg का समर्थन नहीं करता है। इसके बजाय यह प्रोपेटरी माइक्रोसॉफ्ट वीएमएल "मानक" (http://msdn.microsoft.com/en-us/library/bb263898(v=VS.85).aspx)

तो संक्षेप में (आईएमएचओ) राफेल केवल एसवीजी संचालन और वीएमएल संचालन के चौराहे "अंदर हो सकता है" का उपयोग करता है।

(Does RaphaelJS support clipping masking compositing? से, सेबेस्टियन गुरिन द्वारा पोस्ट)। धागा बाहर

चेक यदि आप ब्राउज़र इसका समर्थन में कतरन सक्षम करने के लिए एक प्लगइन का उपयोग करने में रुचि रखते हैं।

वैकल्पिक रूप से, आप एक रिक्त ड्राइंग की कोशिश कर सकते, छवि के रूप में एक ही स्थान पर एक ही आयामों के साथ आयत stroked, लेकिन छवि सेट की r विशेषता है, और stroke-width इतना बड़ा त्रिज्या के लिए क्षतिपूर्ति करने के साथ (ध्यान दें कि इसका परिणाम छवि के चरम छिपाने में हो सकता है)।

Answer 2

कैसे एक भरने के रूप में छवि का उपयोग कर के बारे में:

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 
});