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

Question

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 ?

Answer 1

I finally got it !!

package com.Main;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.GLCommon;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.math.Vector2;
import com.badlogic.gdx.math.Vector3;

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

    }
      ( ... )
}

Answer 2

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

Answer 3

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

 package com.Main;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.GLCommon;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer.ShapeType;
import com.badlogic.gdx.math.Vector2;
import com.badlogic.gdx.math.Vector3;

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