सजावट के रूप में किसी तत्व को छवि कैसे जोड़ें?

Question

कल्पना कीजिए कि मेरे पास रेक्ट तत्व है और मैं इसे ऊपरी बाईं ओर एक छोटी (16x16) पीएनजी छवि के साथ सजाने की इच्छा करता हूं। मैं यह निर्धारित करने में असमर्थ हूं कि उस कार्य को कैसे प्राप्त किया जाए। मैंने दस्तावेज़ों का अध्ययन किया है लेकिन अभी तक (उस समय) उस कार्य को प्राप्त करने के तरीके पर नमूना या संदर्भ नहीं ढूंढ पाया है। क्या किसी के पास नुस्खा या नमूना सूचक है कि वे मेरे लक्ष्य को प्राप्त करने में मेरी सहायता के लिए साझा करने के इच्छुक होंगे?

Answer 1

बेहतर आयत बनाना है जिसमें आयताकार, छवि और टेक्स्ट है। यह आपको अधिक लचीलापन देता है और आपके पास एक आकार व्यक्त करने के लिए दो तत्व होने की आवश्यकता नहीं है। आपका आकार ऊपरी बाएँ कोने में एक छोटा छवि के साथ सजाया की तरह लग रहे हो सकता है:

joint.shapes.basic.DecoratedRect = joint.shapes.basic.Generic.extend({ 

    markup: '<g class="rotatable"><g class="scalable"><rect/></g><image/><text/></g>', 

    defaults: joint.util.deepSupplement({ 

     type: 'basic.DecoratedRect', 
     size: { width: 100, height: 60 }, 
     attrs: { 
      'rect': { fill: '#FFFFFF', stroke: 'black', width: 100, height: 60 }, 
      'text': { 'font-size': 14, text: '', 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle', fill: 'black' }, 
      'image': { 'ref-x': 2, 'ref-y': 2, ref: 'rect', width: 16, height: 16 } 
     } 

    }, joint.shapes.basic.Generic.prototype.defaults) 
}); 

और आप अपने चित्र में इस तरह इसका इस्तेमाल कर सकते हैं:

var decoratedRect = new joint.shapes.basic.DecoratedRect({ 
    position: { x: 150, y: 80 }, 
    size: { width: 100, height: 60 }, 
    attrs: { 
     text: { text: 'My Element' }, 
     image: { 'xlink:href': 'http://placehold.it/16x16' } 
    } 
}); 
graph.addCell(decoratedRect); 

नोट कैसे निर्दिष्ट आकार है, महत्वपूर्ण बिट्स markup, type और attrs ऑब्जेक्ट हैं जो सामान्य सीएसएस चयनकर्ताओं द्वारा मार्कअप में एसवीजी तत्वों का संदर्भ देता है (यहां केवल टैग चयनकर्ता हैं लेकिन यदि आप चाहें तो कक्षाओं का उपयोग कर सकते हैं)। छवि टैग के लिए, हम सापेक्ष स्थिति (ref, ref-x और ref-y) के लिए संयुक्त जेएस विशेष विशेषताओं का लाभ उठाते हैं। इन विशेषताओं के साथ, हम छवि को rect तत्व के शीर्ष बाएं कोने में अपेक्षाकृत स्थान देते हैं और हम इसे शीर्ष किनारे (ref-y) से 2px और बाएं किनारे से 2px (ref-x) से ऑफ़सेट करते हैं।

एक नोट: यह महत्वपूर्ण है कि type विशेषता ('basic.DecoratedRect') नामस्थान से मेल खाने वाले नामस्थान से मेल खाता है (joint.shapes.basic.DecoratedRect)। ऐसा इसलिए है क्योंकि जब जेएसओएनएस जेएसओएन से ग्राफ को फिर से तैयार करता है, तो यह type विशेषता को देखता है और इस प्रकार के लिए परिभाषित आकार देखने के लिए joint.shapes नेमस्पेस को सरल लुकअप बनाता है।

Answer 2

हम एक छवि निम्नलिखित नुस्खा प्रयोग करने के लिए एक तत्व प्रकार बना सकते हैं:

var image = new joint.shapes.basic.Image({ 
    position : { 
     x : 100, 
     y : 100 
    }, 
    size : { 
     width : 16, 
     height : 16 
    }, 
    attrs : { 
     image : { 
      "xlink:href" : "images/myImage.png", 
      width : 16, 
      height : 16 
     } 
    } 
}); 

graph.addCell(image); 

यह एक्स = 100, वाई = 100 पर चित्र का स्थान होगा। आकार चौड़ाई/ऊंचाई को attrs/छवि चौड़ाई/ऊंचाई से मेल करना महत्वपूर्ण है और छवि की चौड़ाई/ऊंचाई होनी चाहिए।

हालांकि यह पिछले तत्व को सजाने नहीं करता है, इसे वांछित प्रभाव प्राप्त करने वाले पिछले तत्व पर रखा जा सकता है।