[SOLVED] Clip, Crop or Scale image in element component

Hey everyone!

I was wondering if there’s a way that you can scale,crop or clip 2D images in an element component. Essentially being able to scale your 2D texture in an element is what I want to achieve.


I’m not entirely sure what you are asking here? Sounds like you want to use Element Masking here?

Hey yaustar,

No i want to be able to zoom in and zoom out an image. I believe element masking is something else entirely?

In which case, it would be a case of resizing the element by changing the width and height directly https://developer.playcanvas.com/en/api/pc.ElementComponent.html#height

You mentioned clipping and cropping and that current is not possible hence the suggestion of using of using a mask that can give the same effect.

Thanks for the fast response! Resizing the element is not what I want to achieve however as I want to keep the same width / height.

How would using a mask be able to achieve this effect of zooming in and zooming out but keeping the width and height?

You have the mask at the fixed width and height and the image element as a child under it so that it can be resized etc without rendering past the area of the mask

Eg https://playcanvas.com/editor/scene/1425733

Ok thanks!

That’s indeed what I was looking for! Great