Selecting through transparent background KonvaJS

I'm making an image editor, what's the best logic or way of selecting through images with transparent background?

2 Replies

Not sure I understand fully what you want but could you apply the following style: Tailwind: pointer-events-none CSS: pointer-events: none;

Paul•9mo ago

I asked chatgpt a lot and I think @lukem121's solution is best. Maybe something like when holding control and hovering over an element, apply pointer-events:none to the top layers so the bottom layer can detect the click. Otherwise, the top layer can't detect the click apparently. And chatgpt suggests using a ref to determine if a click target matches the underlying element via a ref if you think that's appropriate.

if (event.target === this.topmostElementRef.current) {
  console.log('Clicked on the topmost element.');
} else if (event.target === this.underlyingElementRef.current) {
  console.log('Clicked on the underlying element.');
}

if (event.target === this.topmostElementRef.current) {
  console.log('Clicked on the topmost element.');
} else if (event.target === this.underlyingElementRef.current) {
  console.log('Clicked on the underlying element.');
}

I was thinking about the click event bubbling up, but I'm not sure that applies in this case since the layers aren't parents of other layers

Gaming

Programming

Selecting through transparent background KonvaJS