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` を開き、4つのステージが表示されるのを待ちます。240 × 180のSVGは、各420 × 260のステージ内のステージ座標(80,40)に配置されます。背景はそれぞれ、画像の下にある、イベントを受け取る独立した `Konva.Rect` です。ステージのクリックリスナーは `event.target.id()` を報告し、単なるキャンバスのDOM要素ではなく、選ばれたKonvaノードを特定します。
`await source.decode()` はキャッシュ作成より前に実行されます。画像の読み込み中ではなく、実際の元画像が準備できてからキャッシュします。Konvaの[Node API](https://konvajs.org/api/Konva.Node.html#cache)は、キャッシュとキャッシュ削除のメソッドを説明しています。
## 3. 塗り部分・穴・隅・背景をクリックする
パネルの下に示した4か所を試します。ブラウザーウィンドウから測った座標ではなく、各ステージ内の座標です。
| 位置 | ステージ座標 | 検証するもの |
| --------- | ------- | -------------------- |
| 塗りのあるデザイン | 125,110 | エンブレムの十分内側にある不透明な点 |
| 元の穴 | 195,130 | hollow\.svgの透明な内部 |
| 透明な隅 | 305,55 | 画像の長方形内で、塗ったシルエットの外側 |
| 画像の外 | 20,20 | 別にクリックできる背景 |
以下の表は、確認した対象の種類を記録したものです。ログには `alpha-background` のように、各パネルの接頭辞が含まれます。
| 設定 | 塗り部分 | 元の穴 | 透明な隅 | 画像の外 |
| ------------------ | ---- | --- | ---- | ---- |
| 既定の画像 | 画像 | 画像 | 画像 | 背景 |
| キャッシュしたアルファのヒット領域 | 画像 | 背景 | 背景 | 背景 |
| 不透明な白い塗り付きのキャッシュ画像 | 画像 | 画像 | 画像 | 背景 |
| 元画像を差し替えてキャッシュを再作成 | 画像 | 画像 | 背景 | 背景 |
*独自のSVGデザインとデスクトップのクリック対象を記録した、実際のKonva 10.9.0のステージです。アルファに基づく穴あき画像では、穴と隅のクリックが別の背景に届きます。画像の不透明な塗りや、穴を塗った差し替え元画像によって結果が変わります。*
ブラウザーのテストでは、全16か所で実際のポインタークリックを使い、ネイティブイベントの信頼状態、ステージ座標、対象IDを記録しました。また、元ファイルのハッシュ、画像のデコード、ステージと画像の寸法、公開APIの交差判定結果、各画像ノードを描画したキャンバスのネイティブなアルファサンプルも確認しました。
元の穴では、穴あき画像ノードのアルファは0でした。不透明な塗りと差し替え元画像の対照例は、その場所のアルファが255でした。別のページ背景は、穴あき画像自体を不透明にはしません。背景はその下にある別のKonvaノードに属するからです。これらはアンチエイリアスされた境界から離れた内部のサンプルです。
これは単純な独自のSVGと変形していないステージを使った、1つのデスクトップブラウザーでのテストです。モバイルやタッチ、キーボード操作、複数ブラウザーでの対応、性能向上、すべての柔らかい縁の画像に合う閾値を確立するものではありません。自分のアプリの実際の表示サイズと変換で、クリックのテストを繰り返してください。
## 4. 元画像が変わったらキャッシュを作り直す
4つ目のパネルは、穴あきの元画像とそのアルファのヒット領域から始めます。その後、キャッシュを削除し、デコード済みの差し替え画像を設定して、再度キャッシュし、ヒット領域を作り直します。この順序の後、元の穴の位置の対象は背景から画像へ変わります。
キャッシュは描画済みのスナップショットです。描画ピクセルに影響する変更の後は、キャッシュされたシーンと、そのアルファに基づくヒット領域を一緒に更新します。別の画像を割り当てるだけで既存のキャッシュのヒット領域が更新されたとは考えないでください。非同期で読み込む差し替えでは、例の手順に進む前に、その画像のデコードを待ちます。
3つ目のパネルは別の原因を切り分けます。`artwork.fill('#ffffff')` は、同じ画像ノードの一部として、画像の背後に不透明な長方形を描きます。そのキャッシュシーンからヒット領域を作ると、塗った部分も含まれます。不要な画像ノードの塗りを外し、キャッシュとヒット領域を作り直します。元ファイルの白く見える部分が、本当に不透明な塗りの場合もあります。ヒット判定を疑う前に透明性を確認してください。
## ピクセル読み出しと対象選択の問題を分けて診断する
| 症状 | 最初に確認すること |
| -------------------------- | ------------------------------------------------------- |
| 穴のログがまだ画像になる | デコード後にキャッシュしたか、ヒット領域を作り直したか、不透明な塗りや元画像の背景が穴を覆っていないか確認する |
| デザインは変わったのにクリックが古い形に従う | 元画像の変更後、シーンキャッシュとアルファのヒット領域を削除・再作成する |
| ピクセル読み出しや汚染キャンバスのエラーが出る | ヒット判定を解釈する前に、画像のオリジンとレスポンスヘッダーを確認する |
| 画像全体がイベントを受け取らなくなる | `listening`、可視状態、レイヤー順、上に別ノードがないか確認する |
| 穴が下のオブジェクトではなくステージに届く | その点の下に、意図したイベント受付オブジェクトが実際にあるか確認する |
| キャンバスのクリックは動くがキーボード操作は動かない | キーボード操作と意味付けは別に設計する。アルファのヒットピクセルはそれらを提供しない |
この例は、両方のSVGをページと同じオリジンから配信します。別オリジンの画像では、ピクセルを読み出すためにオリジンが汚染されていないキャンバスが必要です。Konvaの[Tainted Canvasガイド](https://konvajs.org/docs/posts/Tainted_Canvas.html)は、CORSリクエストを許可するサーバーと `crossOrigin` を併用する方法を説明しています。サーバーが許可しない場合、`crossOrigin = 'anonymous'` を設定するだけではアクセスできません。この記事では別オリジンの失敗例は実行していません。
外側のキャンバスでCSSの `pointer-events` を変えても、`Konva.Image` のどの内部ピクセルがノードにヒットするかは決まりません。キャンバスの対象選択と[DOM SVGのポインター対象](https://perfectvector.com/ja/blog/svg-pointer-events)を分けて考えます。SVGマスターも残します。キャッシュしたヒットマップはピクセルベースの操作データであり、ベクター文書の代わりではありません。
## デザインの取り出しとイベント実装を分ける
画像の配置とアルファに基づくヒットだけが必要なアプリなら、適切な透明ラスター画像で十分かもしれません。PNGやJPGしか残っておらず、アプリに編集可能なパス形状も必要なら、[PerfectVectorの画像からベクターへの変換手順](https://perfectvector.com/ja/image-to-vector)でSVG候補を取り出せます。シルエットと穴を確認し、Konvaでの表現を選んでイベントを実装します。この例は独自のネイティブSVGを使い、PerfectVectorでの変換は行っていません。
ベクター化は、リスナーの設置、アクセシブルな操作部品の作成、クリック対象の選択、キャッシュの同期を行いません。SVGマスターがすでにあるなら、操作コードを直接修正します。予想外に長方形の画像全体を含むファイルでは、内容が別々の編集可能なパスだと考える前に、[SVG内の埋め込みラスター確認](https://perfectvector.com/ja/blog/svg-contains-raster-image)を使ってください。
## よくある質問
**Konva画像の透明ピクセルがクリックを受け取るのはなぜですか？**
既定のImageノードは、長方形の範囲をヒット判定に使えます。元画像の準備後にキャッシュし、適切な数値のアルファ閾値でdrawHitFromCacheを使ってから、再描画して実際の対象を確認します。
**drawHitFromCacheはどの引数を受け取りますか？**
現在のAPIは、省略可能な0から255の整数のアルファ閾値を受け取り、既定値は0です。検証例は0を渡します。コールバックを渡したり、見た目のThresholdフィルターを使ったりはしません。
**白い塗りを付けるとSVGの穴がまたクリック対象になるのはなぜですか？**
Imageノードの不透明な塗りが、キャッシュシーンの一部になるためです。キャッシュのアルファにはその塗った領域も含まれます。不要な塗りを除き、シーンキャッシュとヒット領域を作り直してください。
**アルファのヒット領域でSVGパスを個別編集できるようになりますか？**
いいえ。デザインは1つの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) — オリジン制限、CORS、ピクセル読み出しの失敗。
5. [Konva：SVG on canvas](https://konvajs.org/docs/sandbox/SVG_On_Canvas.html) — 画像全体の描画と、別に作るベクターパスの違い。
編集可能な形状がなければ、[PerfectVectorでSVG候補を準備し](https://perfectvector.com/ja/image-to-vector)、穴を調べ、意図するKonvaのクリック対象とキャッシュ更新を別にテストしてください。
## Explore
- [Read the HTML article](https://perfectvector.com/ja/blog/konva-alpha-hit-region)
- [MatplotlibのSVG散布図マーカー：パスを確認する](https://perfectvector.com/ja/blog/matplotlib-svg-scatter-marker.md)
- [Pythonで既存PDFにSVGの透かしを追加する](https://perfectvector.com/ja/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)