Skip to main content
Ezgi
Associate III
March 22, 2021
Solved

Shape animation

  • March 22, 2021
  • 3 replies
  • 1059 views

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();

This topic has been closed for replies.
Best answer by Alexandre RENOUX

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

3 replies

MM..1
Super User
March 22, 2021

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

Ezgi
EzgiAuthor
Associate III
March 23, 2021

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
Alexandre RENOUXBest answer
Visitor II
March 24, 2021

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