# How to draw a rectangle or curve between two co-ordinates in libGDX

I am new to libGDX.I just want a Rectangle or a small curve drawn between the object and the clicked position .I know libGDX has RECTANGLE class.

I just want to draw a rectangle or a curved line to be drawn between the object and the clicked position like this >>>

1. click can occur anywhere inside the circle region(above red object or below the red object).
2. green cross represents the click position.
3. red one represents the object.

Problem is if i use shapeRenderer.rect(x, y, width, height); it will give me straight horizontal rectangle like the gray rectangle shown in the image. Therefore i will have to use shapeRenderer.rect(x, y, width, height, originX, originY, rotation); . I gave 0 for both originX and originY but what will be the rotation value ? I am stuck up in calculating the rotation value .

Currently i can think of two ways to do it :-

1. By using Rectangle >>> shapeRenderer.rect(x, y, width, height, originX, originY, rotation);
2. By using sprite image >>> batcher.draw(region, x, y, originX, originY, width, height, scaleX, scaleY, rotation, clockwise);

But in both the cases as u see i need the rotation value .How to calculate that ?
Or is there any other way we can achieve the same results maybe by using some sprite image or something ?

• It is for debugging or you need it for the official version ? – Ion Farima Mar 27 '14 at 18:37

I finally got it !!

package com.Main;

public class vectorTest implements Screen {

MainClass main;

public vectorTest(MainClass main) {
this.main = main;
}

Vector2 touchPos = new Vector2(); //touch position
Vector2 pos = new Vector2(); // position

Sprite sprite, touchPosDot;
Texture txt;

SpriteBatch batch;
OrthographicCamera cam; // a camera

float width;
float angle;

@Override
public void show() {
cam = new OrthographicCamera(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
cam.position.set(Gdx.graphics.getWidth()/2, Gdx.graphics.getHeight()/2, 0);
batch = new SpriteBatch();
touchPos = new Vector2();
pos = new Vector2(0, 0);
touchPos.set(211,312); // I took casual coordinates

txt = new Texture ("img/UI/square.png");
sprite = new Sprite (txt);   // our "rectangular"
sprite.setPosition(pos.x, pos.y);
sprite.setColor(Color.RED);

touchPosDot = new Sprite (txt); // green point
touchPosDot.setColor(Color.GREEN);
touchPosDot.setSize(10, 10);
touchPosDot.setPosition(touchPos.x - touchPosDot.getWidth()/2, touchPos.y - touchPosDot.getHeight()/2);

width = (float) Math.sqrt(Math.pow(touchPos.y - pos.y, 2) + Math.pow(touchPos.x - pos.x, 2)); // find the distance between the two points using Pythagorean theorem
angle = (float) Math.asin((touchPos.y - pos.y)/width); // fint the angle in radians
angle = (float) Math.toDegrees(angle); // convert to degrees
sprite.setSize(width, 2);
sprite.setOrigin(pos.x, pos.y); // IMPORTANT set the origins
sprite.rotate(angle); // and finally, rotates the sprite to the right angle

}

@Override
public void render(float delta) {
GLCommon gl = Gdx.gl;   // clear the screen
gl.glClearColor(1, 1, 1, 1);
gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

cam.update();
batch.setProjectionMatrix(cam.combined);
batch.begin();
sprite.draw(batch);
touchPosDot.draw(batch);
batch.end();

}
( ... )
}

• great I used the rotation angle in batcher = new SpriteBatch(); batcher.setProjectionMatrix(cam.combined); batcher.draw(textureregion, x, y, originX, originY, width, height, scaleX, scaleY, rotation, clockwise); but I had to increase the angle a little bit to make it rotate to exact touch position.Thank You . – Vishal Nair Mar 29 '14 at 7:06

Actually it's already present in Vector2 class.

You can use something like this:

    Vector2 touchPoint = new Vector2(211,312); // random touch position
Vector2 center = new Vector2(world.getWorldWidth() / 2, world.getWorldHeight() / 2); // center of the world
float width = touchPoint.sub(center).len(); // length of resultant vector
float angle = touchPoint.angle(); // and angle what you are looking for


This code makes you draw a shape (line) whenever a touch-event is registred.

 package com.Main;

public class vectorTest implements Screen {

MainClass main;

public vectorTest(MainClass main) {
this.main = main;
}

Vector3 touchPos; //touch position
Vector2 position; // object A position

SpriteBatch batch;
ShapeRenderer renderer; // it's required for drawing the shape (line)
OrthographicCamera cam; // a camera

@Override
public void show() {
renderer = new ShapeRenderer();
cam = new OrthographicCamera(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
cam.position.set(Gdx.graphics.getWidth()/2, Gdx.graphics.getHeight()/2, 0);
batch = new SpriteBatch();
touchPos = new Vector3();
position = new Vector2(1, 1);

}

@Override
public void render(float delta) {
GLCommon gl = Gdx.gl;   // clear the screen
gl.glClearColor(1, 1, 1, 1);
gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

cam.update();
batch.setProjectionMatrix(cam.combined);

batch.begin();
cam.update();
renderer.setProjectionMatrix(cam.combined);

if (Gdx.input.isTouched()) {
touchPos.set(Gdx.input.getX(), Gdx.input.getY(), 0);
cam.unproject(touchPos);
renderer.begin(ShapeType.Line); // shape type
renderer.setColor(1, 0.5F, 0.5F, 1); // line's color
renderer.line(position.x, position.y, touchPos.x, touchPos.y);  // shape's set of coordinates (x1,y1,x2,y2)
renderer.end();
}
batch.end();
}

(...)
}

Make me know if this method is ok ;)

• I don't want to to draw a line. I want a rectangle or curve .. i know how to draw a rectangle but i dont know how should i compute the angle of rotation to rotate the horizontal rectangle to the clicked position from 0,0 origin so that it will look like the image i have given . – Vishal Nair Mar 28 '14 at 17:02
• Can you make an image-example ? – Ion Farima Mar 28 '14 at 18:06
• Check i have edited the question in more detail – Vishal Nair Mar 28 '14 at 19:21