I have created a custom UI element (that use CanvasRenderer).

Here is code :

Mesh mesh = new Mesh();

Rect drawArea = GetComponent<RectTransform>().rect;

using (VertexHelper helper = new VertexHelper())
    helper.AddVert(new Vector3(drawArea.xMin, drawArea.yMin), Color.white, Vector2.zero);
    helper.AddVert(new Vector3(drawArea.xMin, drawArea.yMax), Color.white, Vector2.zero);
    helper.AddVert(new Vector3(drawArea.xMax, drawArea.yMax), Color.white, Vector2.zero);
    helper.AddVert(new Vector3(drawArea.xMax, drawArea.yMin), Color.white, Vector2.zero);
    helper.AddTriangle(0, 1, 2);
    helper.AddTriangle(2, 3, 0);


var canvas = GetComponent<CanvasRenderer>();
canvas.SetMaterial(Material, null);

It creates a simple rectangle that is same size as rect transform.

It works great. However if I put this inside a scroll view, everything that is outside scroll area / viewport is rendered (while it should be clipped).

The scrolling works as it should (rectangle get scrolled by changing position when scrollbar is used).

I have tried to call canvas.EnableRectClipping(...); but without success.

enter image description here


I answer my own question :

Custom UI component should inherit from MaskableGraphic and method OnPopulateMesh() need to be overridden, like in this example.


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.