कपड़ा जे एस: पाठ वस्तु के चयन के क्षेत्र हम कपड़ा जे एस के साथ काम कर रहे हैं कैनवास में टेक्स्ट और छवि वस्तुओं को जोड़ने के लिए पाठ

Question

के वास्तविक आकार से बड़ा है।

लेकिन जब हम कोई टेक्स्ट ऑब्जेक्ट जोड़ते हैं और उसे चुनते हैं, तो यह टेक्स्ट के वास्तविक आकार से अधिक चयन क्षेत्र दिखाता है।

Please refer this link to see the screen-shot.

हम निम्नलिखित कोड का उपयोग कर रहे पाठ वस्तु जोड़ने के लिए।

 
var text_object = new fabric.Text('00', { 
        fontSize: 192, 
        fontFamily: 'Times New Roman', 
        padding: 0 
        }); 
text_object.top = parseInt((canvas.height - text_object.height)/2); 
text_object.left = parseInt((canvas.width - text_object.width)/2); 
text_object.lockUniScaling = true; 
canvas.add(text_object); 
canvas.renderAll(); 
canvas.setActiveObject(text_object); 

मुख्य समस्या है जब हम चौड़ाई और जोड़ा पाठ वस्तु की ऊंचाई प्राप्त करने की कोशिश; यह हमें चौड़ाई और पाठ वस्तु के चयन के क्षेत्र की ऊंचाई न कि पाठ के वास्तविक आकार देता है।

हम टेक्स्ट ऑब्जेक्ट का चयन क्षेत्र टेक्स्ट के वास्तविक आकार के समान कैसे बना सकते हैं?

या चयन क्षेत्र के बिना, हम पाठ का वास्तविक आकार कैसे प्राप्त कर सकते हैं?

Answer 1

आप जो चाहते हैं उसे हासिल करने का कोई सीधा तरीका नहीं है, यह टेक्स्ट के वेक्टर पथों का बाध्यकारी बॉक्स होगा।

आप एक अनुमानित समाधान ठीक लगता है,, एक खाली कैनवास में टेक्स्ट प्रस्तुत करना सभी पिक्सल की पारदर्शिता की जाँच करने के लिए, और यह पता लगाने की अधिकतम और न्यूनतम x और y जहां भरा अंक खोजने के getImageData का उपयोग करें। यह सही से दूर है, लेकिन आप आसानी से एक बेहतर समाधान नहीं मिलेगा।

मुझे लगता है कि समाधान सर्वर पक्ष हो सकता है, लेकिन मुझे किसी के बारे में पता नहीं है।

और सिद्धांत रूप में जेएस में अपना स्वयं का फ़ॉन्ट प्रतिपादन इंजन बनाना संभव हो सकता है, और इसलिए आपके पास सही बाउंडिंग बॉक्स होंगे, लेकिन, सरल/खिलौनों के मामलों को छोड़कर, एक गंभीर टेक्स्ट लेआउट इंजन को सालों और वर्षों लगते हैं लागू करने के लिए, तो मैं यह पूरी तरह से है क्षेत्र से बाहर लगता है।

यदि आपको सन्निकटन विधि के साथ मदद की ज़रूरत है, तो मुझे बताएं और मैं एक उदाहरण प्रदान करता हूं।

संपादित एक उदाहरण प्रदान करने के लिए:

function getVisiblePixelsBoundingBox(canvas) { 
 
    const context = canvas.getContext("2d"); 
 
    const imageData = context.getImageData(0, 0, canvas.width, canvas.height).data; 
 
    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity; 
 
    for (let y = 0; y < canvas.height; y++) { 
 
     for (let x = 0; x < canvas.width; x++) { 
 
      const alpha = imageData[(y * canvas.width + x) * 4 + 3]; 
 
      if (alpha > 0) { 
 
       minX = Math.min(minX, x); 
 
       minY = Math.min(minY, y); 
 
       maxX = Math.max(maxX, x); 
 
       maxY = Math.max(maxY, y); 
 
      } 
 
     } 
 
    } 
 
    return { 
 
     left: minX, 
 
     top: minY, 
 
     width: maxX - minX, 
 
     height: maxY - minY 
 
    }; 
 
} 
 

 
// you will need to create a new canvas 
 
var canvas = document.createElement("canvas"), 
 
    context = canvas.getContext("2d"); 
 

 
// and set the width and height the same as the canvas you want to draw the text 
 
// here I'm just adding some values for the example: 
 
canvas.width = 600; 
 
canvas.height = 400; 
 

 
// now I'm going to draw some text on it 
 
context.font = "120px serif"; 
 
context.fillText("Lipsum", 100, 200); 
 

 
let boundingBox = getVisiblePixelsBoundingBox(canvas); 
 

 
// now this is not needed in your case, but want to see the canvas and 
 
// I will draw a rectangle around the bounding box to see how it works: 
 
document.body.appendChild(canvas); 
 
context.strokeStyle = "red"; 
 
context.strokeRect(boundingBox.left, boundingBox.top, boundingBox.width, boundingBox.height);

ठीक है, तो यह अच्छा लगता है, लेकिन मुद्दों से सावधान:

• परिशुद्धता के लिए सीमित है पिक्सल है, तो, जबकि यह सीमांकन बॉक्स बैठक के लिए पूरी तरह से ठीक है, है ना आपरेशन था के लिए अच्छा है टी पूरी तरह से संरेखित आकार की तरह एक बहुत उच्च परिशुद्धता की आवश्यकता होती है, होगा। इसके अलावा, माप विधि के कारण, यदि आकार का एक हिस्सा इतना पतला होता है जो बिल्कुल दिखाई नहीं देता है, तो इसे मापा नहीं जाएगा (शायद आपके लिए एक बड़ा मुद्दा नहीं है, क्योंकि बहुत पतले आकार में नहीं होता है फोंट्स)।

• इसे निष्पादित करना धीमा हो सकता है क्योंकि हम परिणाम प्राप्त करने के लिए सभी पिक्सल को पुन: सक्रिय कर रहे हैं (और जेएस इसके लिए विशेष रूप से तेज़ नहीं है)। यह जानकर, आप कैनवास आकार को कम करने की कोशिश कर सकते हैं और अपने लक्षित कैनवास के समान कैनवास का उपयोग नहीं कर सकते हैं, लेकिन मैं आपको सलाह नहीं देता, क्योंकि यह अगले बिंदु से संबंधित नई समस्याओं को पेश करेगा।

• यदि आप कैनवास के बाहर अपने पाठ को मापते हैं, तो बाउंडिंग बॉक्स दृश्य क्षेत्र तक सीमित होगा (यह सीमाओं तक टिकेगा)। यदि आप वास्तविक चौड़ाई और ऊंचाई प्राप्त करने के लिए होते हैं, तो आप कैनवास आकार को बढ़ाने में सोच सकते हैं, लेकिन यदि आप फ़ॉन्ट आकार और टेक्स्ट की मात्रा को सीमित नहीं करते हैं, तो आप ब्राउज़र को धीमा कर सकते हैं या शायद इतना बड़ा कैनवास समाप्त कर सकते हैं यहां तक ​​कि इसे दुर्घटनाग्रस्त भी करता है ... तो मैं बस स्वीकार करता हूं कि बाउंडिंग बॉक्स सीमाओं पर चिपक जाता है। आप measureText द्वारा प्रदान की गई चौड़ाई का उपयोग करने में सोच सकते हैं, लेकिन दुर्भाग्य से, पूर्ण छवि को स्कैन करने के लिए आपको शीर्ष और ऊंचाई प्राप्त करने में सहायता मिल सकती है।