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.
```
Zapisz `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; }
```
Zapisz `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}`;
```
Udostępnij folder przez HTTP zamiast otwierać HTML jako lokalny plik:
```bash
python -m http.server 8000
```
Otwórz `http://localhost:8000/reader.html` i poczekaj na cztery sceny. SVG 240 × 180 jest umieszczony w pozycji (80,40) każdej sceny 420 × 260. Każde tło jest własnym nasłuchującym `Konva.Rect` pod obrazem. Nasłuch kliknięć sceny zgłasza `event.target.id()`, identyfikujący wybrany węzeł Konva, a nie sam element DOM canvas.
`await source.decode()` wykonuje się przed utworzeniem bufora. Buforuj po przygotowaniu rzeczywistego źródła, a nie podczas wczytywania obrazu. [API Node Konva](https://konvajs.org/api/Konva.Node.html#cache) dokumentuje metody tworzenia i czyszczenia bufora.
## 3. Kliknij pełny obszar, otwór, narożnik i tło
Przetestuj cztery miejsca podane pod panelami. To współrzędne wewnątrz każdej sceny, a nie mierzone od okna przeglądarki.
| Miejsce | Współrzędna sceny | Co sprawdza |
| ---------------------- | ----------------- | ---------------------------------------------------- |
| Pełna grafika | 125,110 | Nieprzezroczysty punkt wewnątrz emblematu |
| Oryginalny otwór | 195,130 | Przezroczyste wnętrze hollow\.svg |
| Przezroczysty narożnik | 305,55 | Wewnątrz prostokąta obrazu, poza namalowaną sylwetką |
| Poza obrazem | 20,20 | Oddzielnie klikalne tło |
Poniższa tabela zapisuje sprawdzony typ celu. Logi zawierają prefiks panelu, na przykład `alpha-background`.
| Konfiguracja | Pełny obszar | Oryginalny otwór | Przezroczysty narożnik | Poza obrazem |
| -------------------------------------------------------- | ------------ | ---------------- | ---------------------- | ------------ |
| Domyślny obraz | Obraz | Obraz | Obraz | Tło |
| Buforowany obszar trafienia z alfy | Obraz | Tło | Tło | Tło |
| Buforowany obraz z nieprzezroczystym białym wypełnieniem | Obraz | Obraz | Obraz | Tło |
| Zmienione źródło i przebudowany bufor | Obraz | Obraz | Tło | Tło |
*Rzeczywiste sceny Konva 10.9.0 z autorską grafiką SVG i zapisanymi celami kliknięć na komputerze. Pusty obraz oparty na alfie przepuszcza kliknięcia otworu i narożnika do oddzielnego tła. Nieprzezroczyste wypełnienie i zamalowane źródło zastępcze zmieniają wyniki.*
Test przeglądarkowy użył rzeczywistych kliknięć wskaźnika we wszystkich 16 miejscach i zapisał zaufanie natywnego zdarzenia, współrzędne sceny i ID celów. Sprawdził też hasze źródeł, dekodowanie obrazów, wymiary scen i obrazów, publiczne wyniki przecięcia oraz natywne próbki alfy z renderowanego canvas każdego węzła obrazu.
W oryginalnym otworze alfa pustego węzła obrazu wynosiła 0. Warianty z pełnym wypełnieniem i zmienionym źródłem miały tam alfę 255. Oddzielne tło strony nie uczyniło samego pustego obrazu nieprzezroczystym: należało do innego węzła Konva pod spodem. To próbki wnętrz, z dala od wygładzonych granic.
Jest to jeden test przeglądarki komputerowej z prostymi autorskimi SVG i nieprzekształconymi scenami. Nie potwierdza działania dotyku, klawiatury, wielu przeglądarek, korzyści wydajnościowych ani progu dobrego dla każdego obrazu z miękkimi krawędziami. Powtórz test kliknięć przy rzeczywistym rozmiarze i transformacjach aplikacji.
## 4. Przebuduj bufor przy zmianie źródła
Czwarty panel zaczyna od pustego źródła i obszaru trafienia z alfy. Następnie czyści bufor, instaluje już zdekodowany obraz zastępczy, buforuje ponownie i przebudowuje obszar trafienia. Po tej sekwencji miejsce oryginalnego otworu zmienia cel z tła na obraz.
Bufor jest wyrenderowaną migawką. Po zmianie wpływającej na renderowane piksele odśwież razem bufor sceny i obszar trafienia z alfy. Nie zakładaj, że przypisanie innego obrazu zaktualizowało istniejący bufor trafień. Przy asynchronicznym zamienniku poczekaj na jego dekodowanie przed sekwencją z przykładu.
Trzeci panel izoluje inną przyczynę: `artwork.fill('#ffffff')` maluje nieprzezroczysty prostokąt za obrazem jako część tego samego węzła obrazu. Obszar trafienia z takiego bufora obejmuje namalowany obszar. Usuń niechciane wypełnienie węzła obrazu, a potem przebuduj bufor i obszar trafienia. Biało wyglądający obszar źródła też może być rzeczywistym nieprzezroczystym malowaniem; sprawdź przezroczystość przed obwinieniem wykrywania trafień.
## Oddzielnie diagnozuj błędy odczytu i wyboru celu
| Objaw | Co sprawdzić najpierw |
| -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| Otwór nadal zapisuje obraz | Potwierdź buforowanie po dekodowaniu, przebudowę trafień i brak nieprzezroczystego wypełnienia lub tła źródła w otworze |
| Grafika się zmieniła, lecz kliknięcia trafiają w stary kształt | Wyczyść i przebuduj bufor sceny oraz obszar trafienia po zmianie źródła |
| Występuje błąd odczytu pikseli lub tainted-canvas | Sprawdź pochodzenie obrazu i nagłówki odpowiedzi przed interpretacją wyników |
| Cały obraz przestaje odbierać zdarzenia | Sprawdź `listening`, widoczność, kolejność warstw i obecność innego węzła nad nim |
| Otwór trafia w scenę zamiast dolny obiekt | Potwierdź istnienie właściwego nasłuchującego obiektu pod punktem |
| Kliknięcia canvas działają, a klawiatura nie | Zaprojektuj kontrolki klawiatury i semantykę osobno; piksele trafień alfy ich nie zapewniają |
Zestaw udostępnia oba SVG z tego samego pochodzenia co strona. Obrazy obcego pochodzenia wymagają czystego pochodzeniowo canvas do odczytu pikseli. [Poradnik tainted-canvas Konva](https://konvajs.org/docs/posts/Tainted_Canvas.html) wyjaśnia użycie `crossOrigin` wraz z serwerem zezwalającym na CORS. Samo `crossOrigin = 'anonymous'` nie udzieli dostępu bez zgody serwera. Artykuł nie uruchamiał przypadku błędu obcego pochodzenia.
Zmiana CSS `pointer-events` na zewnętrznym canvas nie wybiera pikseli `Konva.Image` trafiających w wewnętrzne węzły. Oddziel wybór celu canvas od [celów wskaźnika SVG w DOM](https://perfectvector.com/pl/blog/svg-pointer-events). Zachowaj też główny SVG: buforowana mapa trafień jest pikselową informacją interakcji, a nie zamiennikiem dokumentu wektorowego.
## Oddziel odzyskiwanie grafiki od obsługi zdarzeń
Jeśli aplikacja potrzebuje tylko umieszczania obrazu i trafień według alfy, odpowiedni przezroczysty raster może wystarczyć. Jeśli pozostał PNG lub JPG, a aplikacja potrzebuje też edytowalnych ścieżek, [proces obrazu na wektor PerfectVector](https://perfectvector.com/pl/image-to-vector) może pomóc odzyskać kandydata SVG. Sprawdź sylwetkę i otwory, potem wybierz reprezentację Konva i zaimplementuj zdarzenia. Przykład używał autorskich natywnych SVG i nie przeprowadzał konwersji PerfectVector.
Wektoryzacja nie instaluje nasłuchów, nie buduje dostępnych kontrolek, nie wybiera celów kliknięć ani nie synchronizuje buforów. Jeśli istnieje główny SVG, napraw bezpośrednio kod interakcji. Dla pliku niespodziewanie zawierającego pełny prostokątny obraz zastosuj [kontrolę osadzonego rastra SVG](https://perfectvector.com/pl/blog/svg-contains-raster-image), zanim uznasz zawartość za oddzielne edytowalne ścieżki.
## FAQ
**Dlaczego przezroczyste piksele obrazu Konva odbierają kliknięcia?**
Domyślny węzeł Image może używać prostokątnego obszaru trafień. Po przygotowaniu źródła buforuj go i użyj drawHitFromCache z właściwym liczbowym progiem alfy, a potem przerysuj i przetestuj rzeczywiste cele.
**Jaki argument przyjmuje drawHitFromCache?**
Aktualne API przyjmuje opcjonalny całkowity próg alfy od 0 do 255, domyślnie 0. Przetestowany przykład podaje 0. Nie podaje callbacku i nie używa wizualnego filtra Threshold.
**Dlaczego białe wypełnienie znów czyni otwór SVG klikalnym?**
Nieprzezroczyste wypełnienie węzła Image staje się częścią buforowanej sceny. Alfa bufora obejmuje wtedy namalowany obszar. Usuń niechciane wypełnienie i przebuduj bufor sceny oraz obszar trafienia.
**Czy obszar trafienia z alfy pozwala niezależnie edytować ścieżki SVG?**
Nie. Grafika pozostaje jednym węzłem Image. Gdy potrzebujesz osobnych kontrolek obszarów wektorowych, użyj odpowiednich oddzielnych węzłów Path i jawnego modelu sceny.
## Źródła
1. [Konva: Image Events](https://konvajs.org/docs/events/Image_Events.html) — domyślne trafienia obrazu i generowanie obszaru trafienia z buforowanej grafiki.
2. [Konva: API Shape](https://konvajs.org/api/Konva.Shape.html#drawHitFromCache) — aktualny liczbowy parametr alphaThreshold i jego zakres.
3. [Konva: API Node](https://konvajs.org/api/Konva.Node.html#cache) — tworzenie i czyszczenie bufora, cele zdarzeń i publiczne metody węzłów.
4. [Konva: poradnik tainted canvas](https://konvajs.org/docs/posts/Tainted_Canvas.html) — ograniczenia pochodzenia, CORS i błędy odczytu pikseli.
5. [Konva: SVG na canvas](https://konvajs.org/docs/sandbox/SVG_On_Canvas.html) — renderowanie całego obrazu i oddzielnie konstruowane ścieżki wektorowe.
Jeśli brakuje edytowalnej geometrii, [przygotuj kandydata SVG za pomocą PerfectVector](https://perfectvector.com/pl/image-to-vector), sprawdź otwory, a potem oddzielnie przetestuj cele kliknięć Konva i aktualizacje bufora.
## Explore
- [Read the HTML article](https://perfectvector.com/pl/blog/konva-alpha-hit-region)
- [Znaczniki SVG w Matplotlib scatter: sprawdź ścieżkę](https://perfectvector.com/pl/blog/matplotlib-svg-scatter-marker.md)
- [Dodaj znak wodny SVG do istniejącego PDF w Pythonie](https://perfectvector.com/pl/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)