Whiteboard

Whiteboard एक मुक्त चित्रण सतह है: उपयोगकर्ता अपनी उंगली/पॉइंटर खींचता है और घटक बिंदुओं को दर्ज करता है, स्ट्रोक को चिकना करता है (पड़ोसियों का भारित औसत) और उसे एक आंतरिक Image पर रेंडर करता है। यह हस्ताक्षर कैप्चर, हस्त-टिप्पणियों और छोटे रेखाचित्रों का आधार है। प्रत्येक पूर्ण स्ट्रोक (onTouchUp पर) छवि में “जला दिया” जाता है, ताकि इतिहास हर फ़्रेम पर सभी बिंदुओं को पुनः संसाधित किए बिना संचित हो।

आप पेन के रंग (setPenColor), मोटाई (thick फ़ील्ड) को नियंत्रित करते हैं और साफ़ कर सकते हैं (clear()) या पृष्ठभूमि छवि को निर्यात/परिभाषित कर सकते हैं (getImage/setImage)।

🟢 · पैकेज: dev.crossfly.ui · विस्तार करता है: Component · स्टाइल: ComponentStyle (डिफ़ॉल्ट रूप से सफ़ेद पृष्ठभूमि)

कब उपयोग करें

एक हस्ताक्षर या मुक्त हस्त-चित्र कैप्चर करना।
किसी मौजूदा छवि पर टिप्पणी करना (उसे setImage के माध्यम से पास करें)।

कब उपयोग न करें

संरचित डेटा प्रदर्शित/प्लॉट करना → chartview का उपयोग करें।

दिखावट

घटक के आकार की सफ़ेद पृष्ठभूमि (backColor)। स्ट्रोक चिकनी रेखाएँ हैं जिनकी मोटाई Styles.fontHeight/3 (मोटा) या Styles.fontHeight/10 (पतला) होती है, पेन के रंग में (अल्फा को अपारदर्शी के लिए बाध्य किया गया)। घटक में hasPan(true) है, यानी यह चित्र बनाने के लिए खींचने के इशारे को कैप्चर करता है।

पूर्ण उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)

Whiteboard एक सामान्य घटक है: यह शरीर को घेरने के लिए add(LAY_FILL, ...) के साथ सीधे स्क्रीन में जाता है। यह उदाहरण बुनियादी उपयोग (नीला पेन, मोटा स्ट्रोक) का पुनः उपयोग करता है और साफ़ करने के लिए एक बटन जोड़ता है।

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

/** चलाने योग्य मुख्य स्क्रीन। launcher (classname) की ओर संकेत करें और चलाएँ: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      Whiteboard board = new Whiteboard();
      board.setPenColor(0x0000FF);   // नीला (ड्रॉइंग में alpha को अपारदर्शी पर बाध्य किया जाता है)
      board.thick = true;            // मोटी लकीर

      Button limpar = new Button("Limpar")
         .onAction(c -> board.clear());
      add(LAY_AUTO, limpar);

      add(LAY_FILL, board);          // स्क्रीन का मुख्य भाग घेरता है
   }
}

नीचे दिए गए अंश केवल मुख्य भाग दिखाते हैं (जो onShow() के अंदर जाता है)। चलाने के लिए, उन्हें ऊपर दिए गए MainWindow ढाँचे में रखें।

बुनियादी उपयोग

Whiteboard board = new Whiteboard();
board.setPenColor(0x0000FF);   // नीला (ड्रॉइंग में alpha को अपारदर्शी पर बाध्य किया जाता है)
board.thick = true;            // मोटी लकीर
container.add(LAY_FILL, board);

// कहीं और, साफ़ करने के लिए एक बटन:
btnLimpar.onAction(c -> board.clear());

कंस्ट्रक्टर

कंस्ट्रक्टर	विवरण
`Whiteboard()`	सफ़ेद पृष्ठभूमि और `hasPan(true)` के साथ सतह बनाता है (चित्रण के लिए तैयार)।

गुण और अनुकूलन

गुण / मेथड	प्रकार	डिफ़ॉल्ट	क्या करता है
`setPenColor(int)`	`void`	`BLACK`	पेन का रंग परिभाषित करता है (चित्रण अल्फा को अपारदर्शी बाध्य करता है)।
`getPenColor()`	`int`	—	पेन का वर्तमान रंग लौटाता है।
`thick`	`boolean` (फ़ील्ड)	`false`	`true` = मोटा स्ट्रोक (`fontHeight/3`); `false` = पतला (`fontHeight/10`)।
`clear()`	`void`	—	छवि और संचित बिंदुओं को साफ़ करता है।
`getImage()`	`Image`	`null`	चित्रण छवि लौटाता है (यदि कुछ नहीं बनाया गया तो `null` हो सकता है)।
`setImage(Image)`	`void`	—	पृष्ठभूमि/आधार छवि परिभाषित करता है (खाली सतह के लिए `null` पास करें)। `throws ImageException`।
`Whiteboard.debugPoints`	`boolean` स्थैतिक	`false`	डिबगिंग: बिंदुओं की गिनती/रेंडरिंग समय प्रदर्शित करता है।

कॉलबैक और इवेंट

Whiteboard इशारों को आंतरिक रूप से संभालता है; यह “स्ट्रोक पूर्ण” का कोई कॉलबैक उजागर नहीं करता।

इवेंट (आंतरिक)	व्यवहार
`onTouchDown(x,y,button)`	एक नया स्ट्रोक शुरू करता है और पहला बिंदु दर्ज करता है।
`onPan(x,y,dx,dy)`	उपयोगकर्ता के खींचने के दौरान बिंदुओं को संचित करता है और पुनः रंगता है।
`onTouchUp(x,y,button)`	स्ट्रोक को अंतिम रूप देता है और चित्रण को आंतरिक `Image` में “जला देता है”।

स्थितियाँ

चित्रण करते हुए: onTouchDown और onTouchUp के बीच, बिंदु एक अस्थायी बफ़र में रहते हैं और प्रत्येक onPan पर चिकने/रेंडर किए जाते हैं।
समेकित: onTouchUp में, स्ट्रोक Image में दर्ज होता है और बफ़र साफ़ हो जाता है (प्रति फ़्रेम लागत स्ट्रोक की कुल संख्या के साथ नहीं बढ़ती)।

रंग चयन और निर्यात के साथ हस्ताक्षर पैनल

Whiteboard assinatura = new Whiteboard();
assinatura.thick = false;                 // हस्ताक्षर के लिए पतला स्ट्रोक
container.add(LAY_FILL, assinatura);

btnPreto.onAction(c -> assinatura.setPenColor(0x000000));
btnAzul.onAction (c -> assinatura.setPenColor(0x0000FF));
btnLimpar.onAction(c -> assinatura.clear());

// पुष्टि पर, परिणामी इमेज पुनः प्राप्त करें:
btnOk.onAction(c -> {
   Image desenho = assinatura.getImage();   // अगर कुछ नहीं बनाया गया तो null हो सकता है
   if (desenho != null)
      salvarAssinatura(desenho);
});

अच्छी प्रथाएँ

हस्ताक्षर के लिए thick = false (अधिक सटीक स्ट्रोक) और व्यापक रेखाचित्रों के लिए thick = true पसंद करें।
निर्यात से पहले हमेशा getImage() != null जाँचें: यदि उपयोगकर्ता ने कुछ नहीं बनाया, तो छवि अभी भी null है।
एक clear() बटन प्रदान करें — प्रति स्ट्रोक कोई “पूर्ववत करें” नहीं है।

आम गलतियाँ

पारदर्शिता की अपेक्षा में स्पष्ट अल्फा वाला रंग पास करना: चित्रण अल्फा को अपारदर्शी बाध्य करता है (0xFF000000 | cor)।
स्ट्रोक कॉलबैक की अपेक्षा करना: इंटरैक्शन के बाद मेथड (getImage) का उपयोग करें; स्ट्रोक पूर्णता का कोई onAction नहीं है।

यह भी देखें

क्षेत्र गाइड: ui/ · रेसिपी: cookbook/
अवधारणा (छवियाँ, ग्राफिक प्रिमिटिव): concepts/
संबंधित घटक: chartview