CODEWITHSUNDEEP
javascriptcsshtmlcanvaseaseljs
Brk
Brk

Reputation: 1297

Build a Coordinate System around Canvas Using EaselJS

Hey I am trying to build the following picture in canvas using the library:EaselJS.

enter image description here

My Picture components are:

  1. two circles - yellow and red and a light green background
  2. several small black points
  3. a coordinate system from 0 to 1 with all the necessary labels which appear in the picture.

I have succeeded in first goal: creating 2 circles and position them in the top right corner of my canvas. The second goal and especially the third goal(building coordinate system) looks to me like impossible task. I have search the API of EaselJS for any clue for how creating such structure and didn't got any info which can help me in achieving my third goal. I am attaching the code of the canvas which has been build so far:

 function init() {
        var stage = new createjs.Stage("demoCanvas");
        var circle1 = new createjs.Shape();
        var circle2 = new createjs.Shape();
        circle2.graphics.beginFill("yellow").drawCircle(0, 0, 300);
        circle2.x = 500;
        circle2.y = 0;
        stage.addChild(circle2);
        circle1.graphics.beginFill("red").drawCircle(0, 0, 150);
        circle1.x = 500;
        circle1.y = 0;
        stage.addChild(circle1);
        stage.update();
   }
#demoCanvas{
  background-color: #32CD32;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<body onload="init();">
    <canvas id="demoCanvas" width="500" height="500"></canvas>
  </body>

Upvotes: 3

Views: 875

Answers (1)

Lanny
Lanny

Reputation: 11294

Here is a really quick sample showing how to plot the data: http://jsfiddle.net/lannymcnie/g8cLkg8e/

I threw in a really simple data set of x/y "values":

var data = [
  [0,0.4],
  [0.8, 0.8],
  [0.9, 0.4],
  [0.75, 0.25],
  [0.95, 0.1]
];

Then created a data point for each one. The positioning is simple math using your 0-1 range:

p.x = d[0] * GRAPH_WIDTH;
// The y-position is subtracted from the height because 0 is at the bottom
p.y = GRAPH_HEIGHT - d[1] * GRAPH_HEIGHT;

This is simple math because your range is just 0-1. If you had a more complex (or dynamic range), you can make it work using:

value = (MAX - VALUE) / (MAX - MIN) * GRAPH_WIDTH;
// For example, to get an x-value of 1.5 in a range of 1-2 (instead of 0-1):
xPosition = (2 - 1.5) / (2 - 1) * GRAPH_WIDTH
// OR
xPosition = 0.5 / 1 * 500 = 250px

To handle the actual graph axis & labels, there are a number of approaches you can use, both in-canvas, and outside of canvas (HTML DOM). If you have specific questions about that, feel free to post a follow-up questions - but I recommend you try to build something first, like you did with your graph.

One thing to note: It will be easier to work with the graph as a Container, so you can draw it within a certain size, using normalized positions (from 0), and then moving the container.

Upvotes: 2

Related Questions