How to draw a gizmo on a Canvas ?

Questions & Answers
1

Hi everyone.
My problem is simple : I want to draw a line (using Gizmos.DrawLine()) on a Canvas. Do you know how to do that ?

Thanks for any answer :wink:

2

You need to change Gizmos.matrix to your Canvas’s space. To do this get a reference to the transform of your Canvas root object, and use Transform.localToWorldMatrix

The code would like something like this:

private void OnDrawGizmos()
{
     Gizmos.matrix = m_CanvasTransform.localToWorldMatrix;
     Gizmos.DrawLine(m_Vector3From, m_Vector3To);
}

This will draw a line in your Canvas’s space via Gizmos.

3

Based on the answer of @aFeesh , and for anyone who find this post, I made an extension method to make our lives easier. This method will compute a matrix for drawing Gizmos on interfaces, by placing the (0; 0) point in the bottom-left corner of the Canvas.

using UnityEngine;
public static class CanvasExtensions
{
    public static Matrix4x4 GetCanvasMatrix(this Canvas _Canvas)
    {
        RectTransform rectTr = _Canvas.transform as RectTransform;
        Matrix4x4 canvasMatrix = rectTr.localToWorldMatrix;
        canvasMatrix *= Matrix4x4.Translate(-rectTr.sizeDelta / 2);
        return canvasMatrix;
    }
}