Transparent artwork: which node gets the click?
Loading Konva…. Original same-origin SVGs, actual Konva.Image nodes, and a separately clickable background. These are canvas hit pixels, not editable SVG path nodes. Desktop click test only; no mobile or accessibility audit.
1. Default rectangular hit
The hollow image still catches its transparent center and corner.
2. Cached alpha hit region
cache() then drawHitFromCache(0): the center and corner reach the background.
3. Opaque image fill
A white fill behind this image is part of its cached scene. Its formerly empty pixels receive image hits.
4. Replaced source, rebuilt cache
The original hole is painted in filled.svg. Clear, replace, cache, and rebuild the hit region.
Click these stage coordinates in each panel: solid (125,110), hole (195,130), transparent corner (305,55), and outside the image (20,20). The corner is inside the image viewport but outside its painted shape. Logs report actual click targets.
```
`reader.css` सहेजें:
```css
body { margin: 32px; font: 16px/1.55 Arial, sans-serif; color: #183a42; background: #edf2ef; }
main { max-width: 1080px; margin: auto; }
h1 { font-size: 32px; margin-bottom: 12px; }
h2 { margin: 0 0 12px; font-size: 22px; }
p { margin: 10px 0; }
.banner { background: #dce8e4; padding: 18px; border-left: 5px solid #315d6f; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(460px, 1fr)); gap: 20px; margin: 24px 0; }
.panel { background: white; padding: 20px; border: 1px solid #d1dbd5; border-radius: 12px; }
.stage { width: 420px; height: 260px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f8faf7; padding: 12px; }
table { border-collapse: collapse; width: 100%; margin-top: 20px; }
th, td { border-bottom: 1px solid #c9d5ce; padding: 10px; text-align: left; }
.log { min-height: 88px; margin-bottom: 0; font-size: 13px; }
```
`reader.js` सहेजें:
```javascript
const source = new Image();
source.src = './hollow.svg';
await source.decode();
const replacement = new Image();
replacement.src = './filled.svg';
await replacement.decode();
const clicks = [];
const scenes = [];
function makeScene(id, mode) {
const stage = new Konva.Stage({ container: id, width: 420, height: 260 });
const layer = new Konva.Layer();
stage.add(layer);
const background = new Konva.Rect({
id: `${id}-background`, width: 420, height: 260, fill: '#eadfcd'
});
const artwork = new Konva.Image({
id: `${id}-image`, image: source, x: 80, y: 40, width: 240, height: 180
});
if (mode === 'fill') artwork.fill('#ffffff');
layer.add(background, artwork);
if (mode !== 'default') {
artwork.cache();
artwork.drawHitFromCache(0);
}
layer.draw();
const beforeUpdate = stage.getIntersection({ x: 195, y: 130 }).id();
if (mode === 'update') {
artwork.clearCache();
artwork.image(replacement);
artwork.cache();
artwork.drawHitFromCache(0);
layer.draw();
}
stage.on('click', (event) => {
const point = stage.getPointerPosition();
const record = {
scene: id, x: point.x, y: point.y,
target: event.target.id(), trusted: event.evt.isTrusted
};
clicks.push(record);
document.getElementById(`${id}-log`).textContent +=
`(${Math.round(point.x)}, ${Math.round(point.y)}) → ${record.target}\n`;
document.dispatchEvent(new CustomEvent('fixture-click-recorded'));
});
const scene = { id, stage, artwork, beforeUpdate };
scenes.push(scene);
return scene;
}
makeScene('default', 'default');
makeScene('alpha', 'alpha');
makeScene('fill', 'fill');
makeScene('updated', 'update');
document.getElementById('version').textContent = `Konva ${Konva.version}`;
```
HTML को स्थानीय फ़ाइल खोलने के बजाय फ़ोल्डर HTTP पर चलाएँ:
```bash
python -m http.server 8000
```
`http://localhost:8000/reader.html` खोलें और चार स्टेज आने दें। 240 × 180 SVG हर 420 × 260 स्टेज में (80,40) पर है। हर बैकग्राउंड अपना listening `Konva.Rect` है, इमेज के नीचे। स्टेज का click listener `event.target.id()` बताता है, जो चुना Konva नोड पहचानता है, केवल canvas DOM एलिमेंट नहीं।
कैश से पहले `await source.decode()` चलता है। असली स्रोत तैयार होने के बाद कैश करें, लोड होते समय नहीं। Konva का [Node API](https://konvajs.org/api/Konva.Node.html#cache) cache और clear-cache विधियाँ बताता है।
## 3. ठोस क्षेत्र, छेद, कोना और बैकग्राउंड क्लिक करें
पैनलों के नीचे दी चार जगह जाँचें। निर्देशांक हर स्टेज के भीतर हैं, ब्राउज़र विंडो से नहीं।
| जगह | स्टेज निर्देशांक | क्या जाँचती है |
| ------------- | ---------------- | ------------------------------------- |
| ठोस आर्टवर्क | 125,110 | चिह्न के भीतर अपारदर्शी बिंदु |
| मूल छेद | 195,130 | hollow\.svg में पारदर्शी अंदर |
| पारदर्शी कोना | 305,55 | इमेज आयत के भीतर, रंगी सिलुएट के बाहर |
| इमेज के बाहर | 20,20 | अलग क्लिक होने वाला बैकग्राउंड |
अगली तालिका जाँचा लक्ष्य प्रकार दर्ज करती है। लॉग में हर पैनल का उपसर्ग है, जैसे `alpha-background`।
| विन्यास | ठोस | मूल छेद | पारदर्शी कोना | इमेज के बाहर |
| ---------------------------------- | ---- | ---------- | ------------- | ------------ |
| डिफ़ॉल्ट इमेज | इमेज | इमेज | इमेज | बैकग्राउंड |
| कैश किया अल्फ़ा हिट क्षेत्र | इमेज | बैकग्राउंड | बैकग्राउंड | बैकग्राउंड |
| अपारदर्शी सफ़ेद फ़िल वाली कैश इमेज | इमेज | इमेज | इमेज | बैकग्राउंड |
| बदला स्रोत और फिर बना कैश | इमेज | इमेज | बैकग्राउंड | बैकग्राउंड |
*मूल SVG आर्टवर्क और दर्ज डेस्कटॉप क्लिक लक्ष्यों वाले वास्तविक Konva 10.9.0 स्टेज। अल्फ़ा आधारित खोखली इमेज छेद और कोने के क्लिक अलग बैकग्राउंड तक जाने देती है। अपारदर्शी फ़िल और रंगा बदला स्रोत परिणाम बदलते हैं।*
ब्राउज़र परीक्षण ने सभी 16 जगह असली pointer क्लिक किए और native event trust, स्टेज निर्देशांक तथा लक्ष्य ID दर्ज किए। स्रोत हैश, इमेज डिकोड, स्टेज और इमेज आयाम, सार्वजनिक intersection परिणाम और हर इमेज नोड के रेंडर canvas से मूल अल्फ़ा नमूने भी जाँचे।
मूल छेद पर खोखली इमेज नोड का अल्फ़ा 0 था। अपारदर्शी-फ़िल और बदले-स्रोत नियंत्रण में वहाँ 255 था। अलग पेज बैकग्राउंड ने खोखली इमेज स्वयं अपारदर्शी नहीं की: वह नीचे के दूसरे Konva नोड का था। नमूने अंदर के हैं, एंटीएलियास सीमाओं से दूर।
यह सरल मूल SVG और बिना ट्रांसफ़ॉर्म स्टेज का एक डेस्कटॉप परीक्षण है। मोबाइल/टच, कीबोर्ड, कई ब्राउज़र, गति लाभ या हर मुलायम-किनारे इमेज का थ्रेशोल्ड स्थापित नहीं करता। अपने ऐप के असली प्रदर्शित आकार और ट्रांसफ़ॉर्म पर क्लिक जाँच दोहराएँ।
## 4. स्रोत बदलने पर कैश फिर बनाएँ
चौथा पैनल खोखले स्रोत और उसके अल्फ़ा हिट क्षेत्र से शुरू होता है। फिर कैश साफ़ करता है, पहले डिकोड बदली इमेज लगाता है, फिर कैश और हिट क्षेत्र बनाता है। इसके बाद मूल-छेद जगह बैकग्राउंड से इमेज हो जाती है।
कैश रेंडर का स्नैपशॉट है। रेंडर पिक्सेल बदलें तो कैश दृश्य और अल्फ़ा हिट क्षेत्र साथ ताज़ा करें। दूसरी इमेज देने भर से पुराना कैश हिट क्षेत्र बदल गया ऐसा न मानें। असिंक्रोनस बदली इमेज में पहले डिकोड होने दें, फिर उदाहरण क्रम लें।
तीसरा पैनल अलग कारण दिखाता है: `artwork.fill('#ffffff')` उसी इमेज नोड के हिस्से के रूप में पीछे अपारदर्शी आयत रंगता है। उस कैश से हिट क्षेत्र बनाने पर रंगा हिस्सा जुड़ता है। अनचाहा इमेज-नोड फ़िल हटाएँ, फिर कैश और हिट क्षेत्र बनाएँ। स्रोत का सफ़ेद दिखता क्षेत्र भी असली अपारदर्शी रंग हो सकता है; हिट जाँच को दोष देने से पहले पारदर्शिता देखें।
## पिक्सेल पढ़ने और लक्ष्य चुनने की गलतियाँ अलग जाँचें
| लक्षण | पहले क्या देखें |
| ------------------------------------------ | ----------------------------------------------------------------------------------------------------- |
| छेद अब भी इमेज लॉग करे | डिकोड के बाद कैश, हिट क्षेत्र का पुनर्निर्माण और छेद पर अपारदर्शी फ़िल या बैकग्राउंड न होने की पुष्टि |
| आर्टवर्क बदले पर क्लिक पुरानी आकृति पर हों | स्रोत बदलने के बाद दृश्य कैश और अल्फ़ा हिट क्षेत्र साफ़ करके फिर बनाएँ |
| पिक्सेल-पढ़ने या tainted-canvas त्रुटि | किसी हिट परिणाम की व्याख्या से पहले इमेज origin और उत्तर हेडर देखें |
| पूरी इमेज इवेंट लेना बंद करे | `listening`, दृश्यता, लेयर क्रम और ऊपर दूसरा नोड देखें |
| छेद नीचे के ऑब्जेक्ट के बजाय स्टेज पाए | उस बिंदु के नीचे इच्छित listening ऑब्जेक्ट सचमुच है यह देखें |
| canvas क्लिक चले पर कीबोर्ड नहीं | कीबोर्ड नियंत्रण और अर्थ अलग बनाएँ; अल्फ़ा हिट पिक्सेल नहीं देते |
उदाहरण दोनों SVG पेज के समान origin से देता है। अलग origin की इमेज में पिक्सेल पढ़ने के लिए origin-clean canvas चाहिए। Konva की [tainted-canvas गाइड](https://konvajs.org/docs/posts/Tainted_Canvas.html) `crossOrigin` और CORS अनुमति देने वाले सर्वर का संयुक्त उपयोग बताती है। सर्वर अनुमति न दे तो केवल `crossOrigin = 'anonymous'` अधिकार नहीं देता। इस लेख में cross-origin असफलता नहीं चलाई गई।
बाहरी canvas पर CSS `pointer-events` बदलना नहीं तय करता कि `Konva.Image` के कौन-से पिक्सेल उसके नोड को हिट करें। canvas लक्ष्य को [DOM SVG pointer लक्ष्य](https://perfectvector.com/hi/blog/svg-pointer-events) से अलग रखें। SVG मास्टर भी रखें: कैश हिट मैप पिक्सेल-आधारित इंटरैक्शन डेटा है, वेक्टर दस्तावेज़ का विकल्प नहीं।
## आर्टवर्क वापस पाना इवेंट जोड़ने से अलग रखें
ऐप को केवल इमेज रखना और अल्फ़ा हिट चाहिए तो उचित पारदर्शी रास्टर पर्याप्त हो सकता है। केवल PNG या JPG बचा हो और संपादन योग्य पाथ भी चाहिए तो [PerfectVector का इमेज-टू-वेक्टर कार्यप्रवाह](https://perfectvector.com/hi/image-to-vector) SVG उम्मीदवार दे सकता है। सिलुएट और छेद देखें, फिर Konva निरूपण चुनकर इवेंट बनाएँ। इस उदाहरण ने मूल SVG लिए, PerfectVector परिवर्तन नहीं किया।
वेक्टराइज़ेशन listener नहीं लगाता, सुलभ नियंत्रण नहीं बनाता, क्लिक लक्ष्य नहीं चुनता या कैश समकालिक नहीं रखता। SVG मास्टर हो तो इंटरैक्शन कोड सीधे सुधारें। फ़ाइल में अचानक पूरा आयताकार चित्र हो तो अलग संपादन योग्य पाथ मानने से पहले [SVG में एम्बेडेड रास्टर जाँच](https://perfectvector.com/hi/blog/svg-contains-raster-image) लें।
## अक्सर पूछे जाने वाले सवाल
**Konva इमेज के पारदर्शी पिक्सेल क्लिक क्यों लेते हैं?**
डिफ़ॉल्ट Image नोड आयताकार क्षेत्र हिट में ले सकता है। स्रोत तैयार हो तो कैश करें और उचित संख्यात्मक अल्फ़ा थ्रेशोल्ड से drawHitFromCache लें, फिर दोबारा ड्रॉ करके असली लक्ष्य जाँचें।
**drawHitFromCache कौन-सा आर्ग्युमेंट लेता है?**
वर्तमान API वैकल्पिक पूर्णांक अल्फ़ा थ्रेशोल्ड 0 से 255 लेता है, डिफ़ॉल्ट 0। जाँचा उदाहरण 0 देता है, callback नहीं और दृश्य Threshold फ़िल्टर नहीं।
**सफ़ेद फ़िल से SVG छेद फिर क्लिक क्यों पकड़ता है?**
Image नोड का अपारदर्शी फ़िल उसके कैश दृश्य में जुड़ता है। कैश अल्फ़ा में फिर वह रंगा क्षेत्र है। अनचाहा फ़िल हटाएँ और दृश्य कैश तथा हिट क्षेत्र फिर बनाएँ।
**क्या अल्फ़ा हिट क्षेत्र SVG पाथ को स्वतंत्र संपादन योग्य बनाता है?**
नहीं। आर्टवर्क एक Image नोड रहता है। अलग वेक्टर क्षेत्र नियंत्रण चाहिए तो उपयुक्त अलग Path नोड और स्पष्ट दृश्य मॉडल लें।
## स्रोत
1. [Konva: Image Events](https://konvajs.org/docs/events/Image_Events.html) — डिफ़ॉल्ट इमेज हिट और कैश आर्टवर्क से हिट क्षेत्र बनाना।
2. [Konva: Shape API](https://konvajs.org/api/Konva.Shape.html#drawHitFromCache) — वर्तमान संख्यात्मक alphaThreshold और सीमा।
3. [Konva: Node API](https://konvajs.org/api/Konva.Node.html#cache) — कैश बनाना, साफ़ करना, इवेंट लक्ष्य और सार्वजनिक विधियाँ।
4. [Konva: Tainted canvas गाइड](https://konvajs.org/docs/posts/Tainted_Canvas.html) — origin सीमा, CORS और पिक्सेल-पठन असफलता।
5. [Konva: canvas पर SVG](https://konvajs.org/docs/sandbox/SVG_On_Canvas.html) — पूरी इमेज रेंडर बनाम अलग बने वेक्टर पाथ।
संपादन योग्य ज्यामिति न हो तो [PerfectVector से SVG उम्मीदवार तैयार करें](https://perfectvector.com/hi/image-to-vector), छेद देखें, फिर इच्छित Konva क्लिक लक्ष्य और कैश अपडेट अलग जाँचें।
## Explore
- [Read the HTML article](https://perfectvector.com/hi/blog/konva-alpha-hit-region)
- [Matplotlib में SVG स्कैटर मार्कर: पाथ जाँचें](https://perfectvector.com/hi/blog/matplotlib-svg-scatter-marker.md)
- [Python से मौजूदा PDF में SVG वॉटरमार्क जोड़ें](https://perfectvector.com/hi/blog/svg-watermark-existing-pdf.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)