[SOLVED] Best Way To Do An Image Resizing With Handles?

Hey guys,

I wanted to create a simple demo in PlayCanvas where an image can be resized using handles on each corner, something like this. What would be the best way to do this in PC?

Use the UI elements or you can do it straight up in world space.

Edit, you can then scale the image based on the distance between 2 of the anchor points.

OK, thanks for the reply. So are you suggesting I have separate images as the resize handles?

Separate UI elements/entities, yes. I think it would be easiest.

OK. In the script, I would basically need to be checking the deviation of the handle from it’s initial position, and update the scale based on that correct? Or is there a better way to do the same?

I would just calculate it based on the xy distance from one corner handle to the opposite.

Sure, I’ll try that @yaustar. Last thing. How would I allow the handle to be dragged?

That’s the tough part. There’s some code floating around on the forums that does display screen to UI screen. Getting the handle to be in the right place is also going to be interesting if they are using different screen anchors.

In your opinion, would it be easier to just use HTML components and use the example I’ve linked in my first post?

Depends on what you are looking to achieve. Is any of your UI in HTML already? Are you looking to do this within the WebGL context?

Some part of the UI is in HTML, yes.

Not exactly sure what you mean here.

HTML is separate to what is rendered on the canvas. Whereas using UI elements will rendered in WebGL in the canvas. Depending on your needs, this might be important.

I don’t think that’ll be an issue for us. Thanks. If we can’t get it to work w/ HTML, we’ll try the alternative approach with UI elements.