# Whiteboard

> मुक्त-हस्त ड्रॉइंग कैप्चर — हस्ताक्षर, स्क्रिबल — पेन के रंग और मोटाई के साथ।

Source: https://crossfly.dev/hi/docs/ui/images-and-graphics/whiteboard — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# Whiteboard

`Whiteboard` **उंगली/माउस से मुक्त-हस्त ड्रॉइंग** का एक क्षेत्र है — इसका शास्त्रीय उपयोग **हस्ताक्षर
कैप्चर** है। यह पहले से ही टच इवेंट्स को संभालता है और स्ट्रोक को आंतरिक रूप से संचित करता है।

## संपूर्ण उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.image.*;       // Image

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

      // बची हुई जगह घेरता हस्ताक्षर क्षेत्र (LAY_FILL)।
      Whiteboard board = new Whiteboard();
      board.setPenColor(0xFF000000);   // काली कलम
      board.thick = true;              // मोटी लकीर
      add(LAY_FILL, board);

      // चित्र मिटाने का बटन।
      Button limpar = new Button("Limpar");
      limpar.onAction(c -> board.clear());
      add(LAY_AUTO, limpar);

      // चित्र को इमेज के रूप में कैप्चर करने का बटन (उदा.: सहेजने के लिए)।
      Button salvar = new Button("Salvar");
      salvar.onAction(c -> {
         Image img = board.getImage();   // वर्तमान चित्र Image के रूप में (खाली हो तो null हो सकता है)
         // … img सहेजें (उदा.: PNG) …
      });
      add(LAY_AUTO, salvar);
   }
}
```
> नीचे दिए गए स्निपेट **केवल मूल भाग** दिखाते हैं (जो `onShow()` के अंदर जाता है)। चलाने के लिए, इन्हें ऊपर दिए `MainWindow` कंकाल में रखें।

## बुनियादी उपयोग (हस्ताक्षर)
```java
Whiteboard assinatura = new Whiteboard();
assinatura.setPenColor(0xFF000000);   // काली कलम
assinatura.thick = true;              // मोटी लकीर
painel.add(0.5f, assinatura);         // ऊंचाई का 50%

Button limpar = new Button("Limpar");
limpar.onAction(c -> assinatura.clear());

Button salvar = new Button("Salvar");
salvar.onAction(c -> {
   Image img = assinatura.getImage();   // चित्र इमेज के रूप में
   // … img सहेजें (उदा.: PNG) …
});
```

## API
| सदस्य | प्रभाव |
|---|---|
| `setPenColor(int)` / `getPenColor()` | पेन का रंग (ARGB) |
| `thick` (फ़ील्ड `boolean`) | `true` = मोटा स्ट्रोक |
| `clear()` | सब कुछ मिटा देता है |
| `getImage()` | वर्तमान ड्रॉइंग को `Image` के रूप में लौटाता है |
| `setImage(Image)` | एक बेस इमेज लोड करता है (`ImageException` फेंकता है) |

## अच्छे तरीके
- **उदार ऊँचाई** दें (कंटेनर का अंश या `autoHeight`) — हस्ताक्षर को जगह चाहिए।
- हमेशा एक **साफ़ करें** बटन प्रदान करें।
- सहेजते समय, `getImage()` का उपयोग करें और कन्वर्ट/परसिस्ट करते समय अपवादों को संभालें।

## सामान्य गलतियाँ
- क्षेत्र बहुत छोटा → हस्ताक्षर अपठनीय।
- यह भूल जाना कि `setImage(Image)` `ImageException` (चेक्ड) फेंकता है।
- इसे `ImageView` (केवल दिखाता है) के साथ भ्रमित करना — `Whiteboard` ड्रॉइंग को **कैप्चर** करता है।

## यह भी देखें
- [इमेजेस](/docs/ui/images-and-graphics/images) · [कस्टम ड्रॉइंग](/docs/ui/images-and-graphics/custom-drawing)
- कैटलॉग: [Whiteboard](/docs/ui/widgets/whiteboard) · संदर्भ: अध्याय 18 — इमेजेस