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.
```
Speichere `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; }
```
Speichere `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}`;
```
Stelle diesen Ordner über HTTP bereit, statt das HTML als lokale Datei zu öffnen:
```bash
python -m http.server 8000
```
Öffne `http://localhost:8000/reader.html` und warte auf die vier Bühnen. Die 240 × 180 große SVG liegt in jeder 420 × 260 großen Bühne an den Bühnenkoordinaten (80,40). Jeder Hintergrund ist ein eigener, auf Ereignisse reagierender `Konva.Rect` unter dem Bild. Der Klicklistener der Bühne meldet `event.target.id()`. Dies identifiziert den gewählten Konva-Knoten und nicht nur das Canvas-DOM-Element.
`await source.decode()` läuft vor dem Erstellen des Caches. Cache erst, wenn die tatsächliche Quelle bereit ist, und nicht während das Bild noch lädt. Konvas [Node-API](https://konvajs.org/api/Konva.Node.html#cache) dokumentiert die Methoden zum Cachen und Leeren des Caches.
## 3. Klicke Vollfläche, Loch, Ecke und Hintergrund an
Teste die vier unter den Feldern genannten Stellen. Das sind Koordinaten innerhalb der jeweiligen Bühne, keine vom Browserfenster aus gemessenen Koordinaten.
| Stelle | Bühnenkoordinate | Was sie testet |
| ------------------- | ---------------- | -------------------------------------------------------------- |
| Deckende Grafik | 125,110 | Einen deckenden Punkt deutlich innerhalb des Emblems |
| Ursprüngliches Loch | 195,130 | Einen transparenten Innenbereich in hollow\.svg |
| Transparente Ecke | 305,55 | Innerhalb des Bildrechtecks, außerhalb der bemalten Silhouette |
| Außerhalb des Bilds | 20,20 | Den separat anklickbaren Hintergrund |
Die folgende Tabelle hält den getesteten Zieltyp fest. Die Protokolle enthalten das Präfix des jeweiligen Felds, etwa `alpha-background`.
| Konfiguration | Vollfläche | Ursprüngliches Loch | Transparente Ecke | Außerhalb des Bilds |
| ----------------------------------------- | ---------- | ------------------- | ----------------- | ------------------- |
| Standardbild | Bild | Bild | Bild | Hintergrund |
| Gecachter Alpha-Trefferbereich | Bild | Hintergrund | Hintergrund | Hintergrund |
| Gecachtes Bild mit deckend weißer Füllung | Bild | Bild | Bild | Hintergrund |
| Ersetzte Quelle und neu aufgebauter Cache | Bild | Bild | Hintergrund | Hintergrund |
*Tatsächliche Konva-10.9.0-Bühnen mit eigener SVG-Grafik und protokollierten Desktop-Klickzielen. Das alphabasierte hohle Bild lässt Klicks in Loch und Ecke den separaten Hintergrund erreichen. Eine deckende Bildfüllung und eine bemalte Ersatzquelle verändern diese Ergebnisse.*
Der Browsertest verwendete echte Zeigerklicks an allen 16 Stellen und protokollierte den nativen Vertrauensstatus des Ereignisses, Bühnenkoordinaten und Ziel-IDs. Er prüfte außerdem Quelldateihashes, Bilddekodierung, Bühnen- und Bildmaße, öffentliche Schnittpunktabfragen und native Alphastichproben aus dem gerenderten Canvas jedes Bildknotens.
Am ursprünglichen Loch betrug das Alpha des hohlen Bildknotens 0. Die Kontrollversionen mit deckender Füllung und ersetzter Quelle hatten dort Alpha 255. Der separate Seitenhintergrund machte das hohle Bild selbst nicht deckend: Er gehörte zu einem anderen Konva-Knoten darunter. Das sind innere Stichproben abseits geglätteter Grenzen.
Dies ist ein einzelner Desktop-Browsertest mit einfachen eigenen SVGs und untransformierten Bühnen. Er belegt weder Mobil-/Touchverhalten noch Tastaturinteraktion, einen browserübergreifenden Vergleich, Leistungsgewinne oder einen Grenzwert für jedes weichkantige Bild. Wiederhole den Klicktest in der tatsächlichen Darstellungsgröße und mit den Transformationen deiner Anwendung.
## 4. Erneuere den Cache bei einem Quellenwechsel
Das vierte Feld beginnt mit der hohlen Quelle und ihrem Alpha-Trefferbereich. Dann leert es den Cache, setzt das bereits dekodierte Ersatzbild ein, cachet erneut und baut den Trefferbereich neu auf. Die Stelle des ursprünglichen Lochs wechselt nach dieser Abfolge vom Hintergrund zum Bild.
Der Cache ist eine gerenderte Momentaufnahme. Aktualisiere nach einer Änderung, die gerenderte Pixel betrifft, die gecachte Szene und ihren alphabasierten Trefferbereich gemeinsam. Gehe nicht davon aus, dass das Zuweisen eines anderen Bilds einen bestehenden gecachten Trefferbereich aktualisiert hat. Warte bei einem asynchron geladenen Ersatz vor der Beispielabfolge auf dessen Dekodierung.
Das dritte Feld isoliert eine andere Ursache: `artwork.fill('#ffffff')` malt ein deckendes Rechteck hinter das Bild als Teil desselben Bildknotens. Ein aus dieser gecachten Szene erzeugter Trefferbereich schließt die bemalte Fläche ein. Entferne eine unerwünschte Bildknotenfüllung und baue Cache und Trefferbereich anschließend neu auf. Ein weiß wirkender Bereich in deiner Quelldatei kann ebenfalls tatsächlich deckende Farbe sein. Prüfe Transparenz, bevor du die Treffererkennung verantwortlich machst.
## Untersuche Auslese- und Zielfehler getrennt
| Symptom | Zuerst prüfen |
| ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Das Loch protokolliert weiterhin das Bild | Bestätige, dass nach dem Dekodieren gecacht, der Trefferbereich neu aufgebaut und das Loch nicht durch deckende Füllung oder Quellhintergrund verdeckt wurde |
| Die Grafik änderte sich, aber Klicks folgen noch einer alten Form | Leere und erneuere Szenencache und Alpha-Trefferbereich nach dem Quellenwechsel |
| Ein Pixelauslese- oder Tainted-Canvas-Fehler erscheint | Prüfe Bildursprung und Antwortheader, bevor du Trefferergebnisse deutest |
| Das gesamte Bild erhält keine Ereignisse mehr | Prüfe `listening`, Sichtbarkeit, Ebenenreihenfolge und einen möglichen Knoten darüber |
| Ein Loch erreicht die Bühne statt eines tiefer liegenden Objekts | Bestätige, dass unter diesem Punkt tatsächlich ein vorgesehenes reagierendes Objekt existiert |
| Canvasklicks funktionieren, Tastaturbedienung aber nicht | Gestalte Tastatursteuerung und Semantik separat; Alpha-Trefferpixel liefern sie nicht |
Dieses Beispiel stellt beide SVGs vom selben Ursprung wie die Seite bereit. Bilder anderer Ursprünge benötigen zum Pixelauslesen einen ursprungsreinen Canvas. Konvas [Anleitung zu Tainted Canvas](https://konvajs.org/docs/posts/Tainted_Canvas.html) erklärt `crossOrigin` zusammen mit einem Server, der die CORS-Anfrage erlaubt. `crossOrigin = 'anonymous'` allein gewährt keinen Zugriff, wenn der Server ihn nicht erlaubt. Dieser Artikel führte keinen ursprungsübergreifenden Fehlerfall aus.
CSS-`pointer-events` am äußeren Canvas zu ändern bestimmt nicht, welche Pixel innerhalb einer `Konva.Image` ihre internen Knoten treffen. Halte Canvas-Zielauswahl getrennt von [DOM-SVG-Zeigerzielen](https://perfectvector.com/de/blog/svg-pointer-events). Behalte auch den SVG-Master: Eine gecachte Trefferkarte ist pixelbasierte Interaktionsinformation, kein Ersatz für ein Vektordokument.
## Trenne Grafikwiedergewinnung und Ereigniseinrichtung
Wenn deine Anwendung nur Bildplatzierung und alphabasierte Treffer benötigt, kann ein geeignetes transparentes Rasterbild bereits genügen. Wenn nur eine PNG oder JPG übrig ist und die Anwendung zusätzlich bearbeitbare Pfadgeometrie benötigt, kann [PerfectVectors Bild-zu-Vektor-Ablauf](https://perfectvector.com/de/image-to-vector) einen SVG-Kandidaten gewinnen. Prüfe Silhouette und Löcher, wähle anschließend die Konva-Darstellung und implementiere ihre Ereignisse. Dieses Beispiel verwendete eigene native SVGs und führte keine PerfectVector-Konvertierung durch.
Vektorisierung installiert keine Listener, baut keine barrierefreien Bedienelemente, wählt keine Klickziele und synchronisiert keine Caches. Wenn bereits ein SVG-Master existiert, korrigiere den Interaktionscode direkt. Enthält eine Datei unerwartet ein vollständiges rechteckiges Bild, nutze die [Prüfung eingebetteter Rasterbilder in SVGs](https://perfectvector.com/de/blog/svg-contains-raster-image), bevor du separate bearbeitbare Pfade als Inhalt annimmst.
## Häufige Fragen
**Warum erhalten transparente Pixel meines Konva-Bilds Klicks?**
Ein standardmäßiger Image-Knoten kann seine rechteckige Fläche für Treffer verwenden. Cache ihn nach dem Laden der Quelle, verwende drawHitFromCache mit einem passenden numerischen Alphagrenzwert und zeichne anschließend neu und teste die tatsächlichen Ziele.
**Welches Argument erhält drawHitFromCache?**
Die aktuelle API akzeptiert einen optionalen ganzzahligen Alphagrenzwert von 0 bis 255 mit Standardwert 0. Das getestete Beispiel übergibt 0. Es übergibt keinen Callback und verwendet den visuellen Threshold-Filter nicht.
**Warum macht eine weiße Füllung mein SVG-Loch wieder anklickbar?**
Eine deckende Füllung am Image-Knoten wird Teil seiner gecachten Szene. Das gecachte Alpha enthält dann diese bemalte Fläche. Entferne eine unerwünschte Füllung und erneuere Szenencache und Trefferbereich.
**Macht ein Alpha-Trefferbereich SVG-Pfade unabhängig bearbeitbar?**
Nein. Die Grafik bleibt ein Image-Knoten. Verwende geeignete separate Path-Knoten und ein ausdrückliches Szenenmodell, wenn deine Anwendung einzelne Vektorflächen steuern muss.
## Quellen
1. [Konva: Bildereignisse](https://konvajs.org/docs/events/Image_Events.html) — standardmäßiges Bildtrefferverhalten und Erzeugen eines Trefferbereichs aus gecachten Grafiken.
2. [Konva: Shape-API](https://konvajs.org/api/Konva.Shape.html#drawHitFromCache) — aktueller numerischer Parameter alphaThreshold und sein Wertebereich.
3. [Konva: Node-API](https://konvajs.org/api/Konva.Node.html#cache) — Cacheerstellung und -leerung, Ereignisziele und öffentliche Knotenmethoden.
4. [Konva: Anleitung zu Tainted Canvas](https://konvajs.org/docs/posts/Tainted_Canvas.html) — Ursprungsbeschränkungen, CORS und Pixelauslesefehler.
5. [Konva: SVG auf Canvas](https://konvajs.org/docs/sandbox/SVG_On_Canvas.html) — Ganzbilddarstellung im Vergleich zu separat konstruierten Vektorpfaden.
Wenn bearbeitbare Geometrie fehlt, [bereite mit PerfectVector einen SVG-Kandidaten vor](https://perfectvector.com/de/image-to-vector), prüfe seine Löcher und teste anschließend die vorgesehenen Konva-Klickziele und Cacheaktualisierungen separat.
## Explore
- [Read the HTML article](https://perfectvector.com/de/blog/konva-alpha-hit-region)
- [SVG-Streudiagrammmarker in Matplotlib: Pfad prüfen](https://perfectvector.com/de/blog/matplotlib-svg-scatter-marker.md)
- [Ein SVG-Wasserzeichen mit Python in eine PDF einfügen](https://perfectvector.com/de/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)