I have this feature on a webapp where I place an overlay over an entire page. In this overlay is a hole, revealing the underlying page.


quick wireframe

Originally the hole was a square so no problem there for the resize handlers. Now the hole has to be a circle...

I want to avoid using the 'circle in rectangle' approach (like its used en PS, Affinity,...)

Any suggestions on how/where to place the resize handlers?

  • 3
    "I want to avoid using the 'circle in rectangle' approach" - Is there a reason not to use this? As you point out, it's a pattern used in several applications already, so one could presume it's what users are expecting. – JonW Mar 21 '18 at 12:28
  • It's a tool for teachers to highlight an exercise. I want to avoid all 'visual clutter'. – Sfen Mar 21 '18 at 13:28

It seems pretty simple to me since you are mentioning "circle" (and not an ellipse) and "square" (and not a rectangle). This indicates that the aspect ratio of the shape is fixed to 1:1.

I'd say that wherever the circle gets grabbed (along its perimeter), it resizes.

However, the resize reference point depends on where the circle was grabbed. See the following picture to understand what I mean (red is initial, black is resized/being resized):


download bmml source – Wireframes created with Balsamiq Mockups

  • Nice one. I wanted to use the border for dragging but I can combine both if I make the border wide enough and use resize handlers in the 4 wind directions – Sfen Mar 21 '18 at 13:30
  • @Sfen - can you make the border as octagonal shape, thus approximate the circle? Then it's just a matter of assigning certain movement to a particular face of the octagon. – Mike Mar 21 '18 at 13:39
  • Yeah I like the idea but has to be a circle. – Sfen Mar 21 '18 at 13:52
  • What I meant is to keep the border as a circle, but make an envelope reacting to resize in the shape of an octagon. In fact you need to differentiate between 8 different directions: up, down, left, right and 4 corners. Unless you chose only 4 of those. – Mike Mar 21 '18 at 13:59
  • Ah I see. The original requirement was that it only needed to be resizable in the bottom-right corner but I can take this with me. Thanks! – Sfen Mar 21 '18 at 14:06

I would guess that when the user first places the circle, the point of interest will be in the center of the circle, so resizing in any dimension might not be efficient since afterwards the user would have to move the circle to realign it with the point of interest.

I would suggest having one resize handler on the bottom right of the circle that scales the circle in relation to it's center.

The same way when the user is placing the circle, it is more efficient to click/tap at the point of interest and then drag until you have the desired size.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.