Path: csiph.com!fu-berlin.de!uni-berlin.de!individual.net!not-for-mail
From: Arno Welzel <usenet@arnowelzel.de>
Newsgroups: comp.lang.javascript
Subject: Re: Click on Non-transparent Part of an Image
Date: Sun, 2 Apr 2023 12:08:02 +0200
Lines: 40
Message-ID: <k8t2g1F8p01U1@mid.individual.net>
References: <f9289988-25e5-4e02-bc92-cf39c69be08dn@googlegroups.com> <f7ddb082-a6c8-4105-8fb9-bf1beb4dfacen@googlegroups.com> <a704d822-b62b-4df8-8628-c7ad55769d0an@googlegroups.com>
Mime-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
X-Trace: individual.net /HhM0eAjDamPq6UDu2Mi1wNHLxD/NZ9+dytx4PBmSaxauspO44
Cancel-Lock: sha1:Jq5I+djYO7yLSvojUqUEM1OeghY=
Content-Language: de-DE
In-Reply-To: <a704d822-b62b-4df8-8628-c7ad55769d0an@googlegroups.com>
Xref: csiph.com comp.lang.javascript:41256

Andrew Poulos, 2023-04-02 01:16:

> On Thursday, 30 March 2023 at 03:40:33 UTC+11, Michael Haufe (TNO)
> wrote:
>> On Sunday, March 26, 2023 at 5:43:12 PM UTC-5, Andrew Poulos wrote:
>> 
>>> Is there a way to detect a click only on the non-transparent part
>>> of an image?
>>> 
>>> That is, a click on a transparent part works as if pointer-events
>>> is set to none and a click on a non-transparent part works as if
>>> pointer-events is set to auto.
>> You can use css clip-path to define clickable areas.
>> 
>> <https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path>
>> 
>> Example usage:
>> 
>> <https://codepen.io/mlhaufe/pen/YzOMOGv?editors=1100>
>> 
>> clicking on the clipped areas will not trigger an alert but the
>> visible portions will
> 
> Thanks for the replies. Alas the image doesn't have regular shaped
> transparent parts and using a secondary canvas won't work as well as
> I'd like.

clip-path can also be a complex path:

For example:

clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');

Also see <https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path>


-- 
Arno Welzel
https://arnowelzel.de