Custom Shape Control Points - Same size as shape?

Hi there - I am currently working on a project to prototype complex interactions where users click on a variety of surfaces to show/remove coloring (to show selection) and drive other changes on the screen.

To do this, I created custom shapes modeled after a simple shape I found - consisting of a few surfaces and curves.

The issue I’m running into is that the control points that drive interactions and shape resizing are different than the visible shape that was created, so click interactions overlap with each other. Ideally, I could somehow have the control points and visible shape match up, but I’m not sure if that’s possible.

I’ve tried hotspots, but that isn’t ideal either due to not being able to modify the widget size of a hotspot.

Any ideas on the best way to approach this?

Not exactly clear what you are dong here… If you post an RP file it might help…

Have you tried bringing each widget to the front when hovered? So, for each of your clickable shapes, put a “Bring This to front” action in its OnMouseEnter event. This way, overlapping areas shouldn’t be obscured.

Thanks for the help! I attached an image similar to the one I’m looking at. It’s a 3d object with multiple custom shapes created from a stencil. I think the bring to front action could potentially help, but if you look at the file the actual shape of the widget is bigger than the visible object.

So, assume someone wanted to click on “surface2” then click on “surface1” to initiate actions, Because the control handles and the shape of the objects all overlap, this causes issues.

Ideally, each visible shape would be matched with equal control areas, so there’s no overlap.

demoFileClickMultiple.rp (55.9 KB)

Now I understand… you have non-square shapes and need non-square clickable hotpsots, also known as “polyganal regions.” That, unfortunately, is not supported by Axure. Every widget, even custom shapes, get converted to PNGs in the HTML prototypes.

This is also an issue in general with HTML–all areas are rectilinear. However, it seems like you could provide this functionality via javascript injection (you can search that term on this forum for various methods) if you have or can derive the coordinates of your shapes. See this brief description for a start and Google further if needed.

Creating a polygonal hotspot