Shape animation

[Ezgi]

I have a hexagon shape. I want to move (40,0) to (80,0), (0,0) to (40,0), (40,80) to (0,80), (80,80) to (40,80) and I want to move them back. What should be the condition? I gave a try but I couldn't see any move.

Here is my shape;

shape1.setPosition(111, 89, 80, 80);
    shape1.setOrigin(0.000f, 0.000f);
    shape1.setScale(1.000f, 1.000f);
    shape1.setAngle(0.000f);
    shape1Painter.setColor(touchgfx::Color::getColorFrom24BitRGB(122, 51, 51));
    shape1.setPainter(shape1Painter);
    const touchgfx::AbstractShape::ShapePoint<float> shape1Points[6] = { { 80.000f, 40.000f }, { 80.000f, 80.000f }, { 40.000f, 80.000f }, { 0.000f, 40.000f }, { 0.000f, 0.000f }, { 40.000f, 0.000f } };
    shape1.setShape(shape1Points);

and the animation in handleTickEvent ;

CWRUtil::Q5 currentX, currentY;
 
	shape1.invalidate();
	shape1.getCornerX(5) = currentX;
	shape1.getCornerY(5) = currentY;
 
	
	if (currentX < shape1.getCornerX(1))
	{
	    shapeXChangeFactor = CWRUtil::Q5(80);
	}
	else if (currentX == shape1.getCornerX(1))
	{
		shapeXChangeFactor = CWRUtil::Q5(-80);
	}
	currentX = currentX + shapeXChangeFactor;
	shape1.setCorner(4, currentX, currentY);
	shape1.invalidate();

[MM..1]

I mean Shapes not use invalidate for change. And you dont show code where you create shape1 and add to screen...

[Ezgi]

The shape is declared in Base and handleTickEvent is in View.cpp. When I was writing the handleTickEvent, I took a look at the Line and Circle example.

[Alexandre RENOUX · Accepted solution]

Hi Ezgi,

There are potentially 2 issues in your code.

• To update a shape, you first need to call updateAbstractShapeCache(). You can find this information in the description of the setCorner() function in AbstractShape.hpp. Here is a extract :

/**
     * Sets one of the points (a corner) of the shape in CWRUtil::Q5 format.
     *
     * @param  i Zero-based index of the corner.
     * @param  x The x coordinate in CWRUtil::Q5 format.
     * @param  y The y coordinate in CWRUtil::Q5 format.
     *
     * @see updateAbstractShapeCache
     *
     * @note Remember to call updateAbstractShapeCache() after calling setCorner one or more times,
     *       to make sure that the cached outline of the shape is correct.
     */
    virtual void setCorner(int i, CWRUtil::Q5 x, CWRUtil::Q5 y) = 0;

• The second point is that your shape is probably using floats so it will still not work even if the first point is correct. You need to use toQ5<float>.

So here is a code example you can base yourself on :

void Screen1View::changeShape()
{
    if(changed)
    {
        //go back to normal
        changed = false;
        shape1.setCorner(5, CWRUtil::toQ5<float>(40.000f), CWRUtil::toQ5<float>(0.000f));
    }
    else
    {
        //do the change
        shape1.setCorner(5, CWRUtil::toQ5<float>(80.000f), CWRUtil::toQ5<float>(0.000f));
        changed = true;
    }
    shape1.updateAbstractShapeCache();
    shape1.invalidate();
}

When your question is answered, please close this topic by choosing Select as Best.

/Alexandre