Drawing Lines on Display with TouchGFX - Seeking Optimization and Canvas Enhancement

[TerZer]

Hello!

I’ve been working on a project where I need to draw lines on the display using TouchGFX. I’ve managed to get a working solution with the help of TouchGFX's Graph code, but I wanted to share the code with you all to see if anyone has any suggestions for optimization.

Here’s the current code I’m using:

bool TestWidget::drawCanvasWidget(const touchgfx::Rect& invalidatedArea) const
{
    if (numPoints < 2)
    {
        return true; // Not enough points to draw anything
    }

    touchgfx::Canvas canvas(getPainter(), getAbsoluteRect(), invalidatedArea, 255);

    for (int i = 0; i < numPoints - 1; ++i)
    {
        drawSegment(canvas, points[i], points[i + 1]);
    }

    return canvas.render();
}

void TestWidget::drawSegment(touchgfx::Canvas& canvas, const Point& start, const Point& end) const
{
    // Points for the current segment
    float x0 = static_cast<float>(start.x);
    float y0 = static_cast<float>(start.y);
    float x1 = static_cast<float>(end.x);
    float y1 = static_cast<float>(end.y);

    // Calculate slope and perpendicular offsets for thickness
    float dx = x1 - x0;
    float dy = y1 - y0;
    float length = std::sqrt(dx * dx + dy * dy);

    float offsetX = 0.0f, offsetY = 0.0f;
    if (length > 0.1f) // Avoid division by zero and handle very short lines
    {
        float scale = (lineWidth / 2.0f) / length;
        offsetX = -scale * dy; // Perpendicular x offset
        offsetY = scale * dx;  // Perpendicular y offset
    }

    // Draw trapezoid for the current line segment
    canvas.moveTo(x0 + offsetX, y0 + offsetY); // Top-left of the segment
    canvas.lineTo(x1 + offsetX, y1 + offsetY); // Top-right of the segment
    canvas.lineTo(x1 - offsetX, y1 - offsetY); // Bottom-right of the segment
    canvas.lineTo(x0 - offsetX, y0 - offsetY); // Bottom-left of the segment
    canvas.lineTo(x0 + offsetX, y0 + offsetY); // Close the shape
}

Additionally, it would be great if TouchGFX could enhance the canvas to include a function like drawLine. If there’s any way to achieve this with the current functionality, or if anyone has a more efficient approach to line drawing, I’d love to hear your thoughts!

P.S.: I'm currently performing calculations within the drawCanvasWidget function because, in the long run, I want to draw up to ~150,000 points. Any tips on optimizing performance for this scale would be greatly appreciated.

Thanks in advance for your help and suggestions!