Drawing a rectangle by combining 4 plotted points from a blank graph

[Irshad Mujawar]

Hello everyone,

I can create a polygon with four already deifned points can put 4 points whihc makes a rectangle. 

However how to start from the blank graph. put 4 points on (x,y) coordinates , which will automatically combine to a square.

And later we should be able to access the coordinates of these points so that you can calculate area/perimeter.

Pictorially it should somewhat look like this:

Figure1 : Plot four points on the blank graph.

Figure 2: combine them to to for a rectangle/square like this:

Thanks and Regards,

Irshad

[Eric Peters]

Hi Irshad,

The simplest way is to group these four points.

var p1 = board.create('point', [1, 1], pointAttributes);

var p2 = board.create('point', [4, 1], pointAttributes);

var p3 = board.create('point', [4, 4], pointAttributes);

var p4 = board.create('point', [1, 4], pointAttributes);

var group = board.create('group', [p1, p2, p3, p4]);

And you canwrite your own rectangle element where this is done "automatically". See the source code for file polygon.js. There is a polygon defined and a regular polygon, which is a special polygon. Your rectangle will also be a special polygon :-)

Best regards

Eric

[Irshad Mujawar]

Thank you for the response Eric.
I know this part. The scenario I am describing,in that points will be placed on the blank graph.
I don't know those points coordinates in advance. I am finding it challenging to retreive those coordinates from the graph and use it in the code to further calculation like area.

[Eric Peters]

Hi Irshad,

if you have only these four points in your board, you can use board.objectsLists to have access to all objects in the board. But pay attention, there are also some internal points and the lines for the coordinate system included. If you have a point you can access the coordinates by the getter functions X() and Y().

Is this a solution for your problem?

Best regards

Eric

[Irshad Mujawar]

Hello Eric,


Thank you for the response. I am confused about once I run the code for creating point in the fiddle, I place my points on the coordinates. How can I access the points in the code which are going get plotted once I run the code.

I dont know how to proceed after this?

http://jsfiddle.net/aRrdk/4/

Regards,
Irshad

[Alfred Wassermann]

Why don't you initialize an empty array at the beginning

var points = [];

and push the newly created points to that array?

        if (canCreate) {
            points.push(board.create('point', [coords.usrCoords[1], coords.usrCoords[2]], {snapToGrid:true}));
        }

Then you can access the points via points[0], points[1], ...

Best wishes,
Alfred

[Irshad Mujawar]

That was really clever suggestion Alfred. It worked. Thank you so much. :)

http://jsfiddle.net/aRrdk/7/