问题
Hey I am trying to build the following picture in canvas using the library:EaselJS.
My Picture components are:
- two circles - yellow and red and a light green background
- a coordinate system from 0 to 1 with all the necessary labels which appear in the picture.
I have succeeded in my two goals. I have build a Coordinate System based on stackoverflow discussion: How to draw a full coordinate system with Easeljs?.
I have left with 2 main problems which concern me a lot:
- I need to draw a rectangle(or square) which fits the coordinate system, the current rectangle is just a background.
- Also I need to add 3 labels: 'Critical Index' on the x axis, 'Long-term Severity Index' on the y axis and a headline of Long-term.
I would happy if someone could help me with this issues I am adding the source code:
$(function(){
var stage = new createjs.Stage('canvas2d');
var circle1 = new createjs.Shape();
var circle2 = new createjs.Shape();
var rect = new createjs.Rectangle(0, 0, 100, 100);
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.addChild(rect);
stage.update();
var coord_xaxis = new createjs.Shape();
stage.addChild(coord_xaxis);
var coord_yaxis = new createjs.Shape();
stage.addChild(coord_yaxis);
var coord_arrow_x = new createjs.Shape();
//stage.addChild(coord_arrow_x);
var coord_arrow_y = new createjs.Shape();
//stage.addChild(coord_arrow_y);
var coord_xaxis_lines = new createjs.Shape();
stage.addChild(coord_xaxis_lines);
var coord_yaxis_lines = new createjs.Shape();
stage.addChild(coord_yaxis_lines);
/**$('#canvas2d').width()/15**/
var axis_center_x = $('#canvas2d').width()/15;
var axis_center_y = $('#canvas2d').height()/1.10;
var xaxis_width = $('#canvas2d').width()-0.05*$('#canvas2d').width();
var yaxis_width = $('#canvas2d').height()-0.05*$('#canvas2d').height();
var axis_start_x = ($('#canvas2d').width()-xaxis_width)/2;
var axis_start_y = ($('#canvas2d').height()-yaxis_width)/6;
var axis_strokewidth = 2;
coord_xaxis.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_xaxis.graphics.moveTo(axis_start_x, axis_center_y).lineTo(axis_start_x+xaxis_width, axis_center_y);
coord_yaxis.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_yaxis.graphics.moveTo(axis_center_x, axis_start_y).lineTo(axis_center_x, axis_start_y+yaxis_width);
// draw coordsys arrow for x-axis
var arrwidth = 5;
var arrxtnd = 5;
coord_arrow_x.graphics.beginFill('#000');
coord_arrow_x.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_arrow_x.graphics.moveTo(axis_center_x, axis_start_y-arrwidth/2).lineTo(axis_center_x+arrwidth, axis_start_y+arrwidth+arrxtnd).lineTo(axis_center_x-arrwidth, axis_start_y+arrwidth+arrxtnd).lineTo(axis_center_x, axis_start_y-arrwidth/2);
coord_arrow_x.graphics.endFill();
// draw coordsys arrow for y-axis
coord_arrow_y.graphics.beginFill('#000');
coord_arrow_y.graphics.beginStroke('#000');
coord_arrow_y.graphics.moveTo(axis_start_x+xaxis_width+arrwidth/2, axis_center_y).lineTo(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y+arrwidth).lineTo(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y-arrwidth).lineTo(axis_start_x+xaxis_width+arrwidth/2, axis_center_y);
coord_arrow_y.graphics.endFill();
var stepdist = xaxis_width/5.25;
var steplinew = 6;
// 10 horizontal lines
var xlines = 10;
var labels_x = [];
for(var i=xlines;i>=0;i--) {
// little black marker
coord_yaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000');
coord_yaxis_lines.graphics.moveTo(axis_center_x-steplinew, axis_center_y+(-i/2)*stepdist).lineTo(axis_center_x+steplinew, axis_center_y+(-i/2)*stepdist);
// labels
labels_x[i] = new createjs.Text('x', '14px Arial', '#333');
labels_x[i].x = axis_center_x-12;
labels_x[i].y = axis_center_y+(-i/2)*stepdist-6; // move up a bit
stage.addChild(labels_x[i]);
labels_x[i].text = (i/10);
labels_x[i].textAlign = 'right';
}
// 12 orthogonal lines
var stepdist2 = xaxis_width/6.5;
var steplinew2 = 6;
var ylines = 10;
var labels_y = [];
for(var i=ylines;i>=1;i--) {
// dont overdraw y-axis-line
// little black marker
coord_xaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000');
coord_xaxis_lines.graphics.moveTo(axis_center_x+(i/1.6)*stepdist2, axis_center_y-steplinew2).lineTo(axis_center_x+(i/1.6)*stepdist2, axis_center_y+steplinew2);
// labels
labels_y[i] = new createjs.Text('x', '14px Arial', '#333');
labels_y[i].x = axis_center_x+(i/1.6)*stepdist2; // move up a bit
labels_y[i].y = axis_center_y+12;
stage.addChild(labels_y[i]);
labels_y[i].text = (i/10);
labels_y[i].textAlign = 'center';
}
stage.update();
})#canvas2d{
background-color: #32CD32;
}<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas2d" width="500" height="500"></canvas>回答1:
The syntax for creating a rectangle in EaselJS is just the same as making a circle. The difference lies when calling drawRect instead of drawCircle in the graphics chain.
I've added a rectangle with arbitrary position and size values to match your overall code style, and because I couldn't find any criteria quickly. I also removed the background color on the CSS.
As for the addition of labels on each axis, I highly recommend you to use DOM instead. EaselJS support for text is almost unusable. Even EaselJS itself recommends you to use a DOMElement instead of the Text DisplayObj. More on DOMElement here.
Personally, I think it would be a lot easier to get to your desired result by using pure DOM instead of canvas work, unless you're doing some heavy user-interaction-based animation stuff.
$(function(){
var stage = new createjs.Stage('canvas2d');
var circle1 = new createjs.Shape();
var circle2 = new createjs.Shape();
var rect = new createjs.Shape();
rect.graphics.f("green").drawRect(33, 0, 500, 455);
stage.addChild(rect);
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();
var coord_xaxis = new createjs.Shape();
stage.addChild(coord_xaxis);
var coord_yaxis = new createjs.Shape();
stage.addChild(coord_yaxis);
var coord_arrow_x = new createjs.Shape();
//stage.addChild(coord_arrow_x);
var coord_arrow_y = new createjs.Shape();
//stage.addChild(coord_arrow_y);
var coord_xaxis_lines = new createjs.Shape();
stage.addChild(coord_xaxis_lines);
var coord_yaxis_lines = new createjs.Shape();
stage.addChild(coord_yaxis_lines);
/**$('#canvas2d').width()/15**/
var axis_center_x = $('#canvas2d').width()/15;
var axis_center_y = $('#canvas2d').height()/1.10;
var xaxis_width = $('#canvas2d').width()-0.05*$('#canvas2d').width();
var yaxis_width = $('#canvas2d').height()-0.05*$('#canvas2d').height();
var axis_start_x = ($('#canvas2d').width()-xaxis_width)/2;
var axis_start_y = ($('#canvas2d').height()-yaxis_width)/6;
var axis_strokewidth = 2;
coord_xaxis.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_xaxis.graphics.moveTo(axis_start_x, axis_center_y).lineTo(axis_start_x+xaxis_width, axis_center_y);
coord_yaxis.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_yaxis.graphics.moveTo(axis_center_x, axis_start_y).lineTo(axis_center_x, axis_start_y+yaxis_width);
// draw coordsys arrow for x-axis
var arrwidth = 5;
var arrxtnd = 5;
coord_arrow_x.graphics.beginFill('#000');
coord_arrow_x.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_arrow_x.graphics.moveTo(axis_center_x, axis_start_y-arrwidth/2).lineTo(axis_center_x+arrwidth, axis_start_y+arrwidth+arrxtnd).lineTo(axis_center_x-arrwidth, axis_start_y+arrwidth+arrxtnd).lineTo(axis_center_x, axis_start_y-arrwidth/2);
coord_arrow_x.graphics.endFill();
// draw coordsys arrow for y-axis
coord_arrow_y.graphics.beginFill('#000');
coord_arrow_y.graphics.beginStroke('#000');
coord_arrow_y.graphics.moveTo(axis_start_x+xaxis_width+arrwidth/2, axis_center_y).lineTo(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y+arrwidth).lineTo(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y-arrwidth).lineTo(axis_start_x+xaxis_width+arrwidth/2, axis_center_y);
coord_arrow_y.graphics.endFill();
var stepdist = xaxis_width/5.25;
var steplinew = 6;
// 10 horizontal lines
var xlines = 10;
var labels_x = [];
for(var i=xlines;i>=0;i--) {
// little black marker
coord_yaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000');
coord_yaxis_lines.graphics.moveTo(axis_center_x-steplinew, axis_center_y+(-i/2)*stepdist).lineTo(axis_center_x+steplinew, axis_center_y+(-i/2)*stepdist);
// labels
labels_x[i] = new createjs.Text('x', '14px Arial', '#333');
labels_x[i].x = axis_center_x-12;
labels_x[i].y = axis_center_y+(-i/2)*stepdist-6; // move up a bit
stage.addChild(labels_x[i]);
labels_x[i].text = (i/10);
labels_x[i].textAlign = 'right';
}
// 12 orthogonal lines
var stepdist2 = xaxis_width/6.5;
var steplinew2 = 6;
var ylines = 10;
var labels_y = [];
for(var i=ylines;i>=1;i--) {
// dont overdraw y-axis-line
// little black marker
coord_xaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000');
coord_xaxis_lines.graphics.moveTo(axis_center_x+(i/1.6)*stepdist2, axis_center_y-steplinew2).lineTo(axis_center_x+(i/1.6)*stepdist2, axis_center_y+steplinew2);
// labels
labels_y[i] = new createjs.Text('x', '14px Arial', '#333');
labels_y[i].x = axis_center_x+(i/1.6)*stepdist2; // move up a bit
labels_y[i].y = axis_center_y+12;
stage.addChild(labels_y[i]);
labels_y[i].text = (i/10);
labels_y[i].textAlign = 'center';
}
stage.update();
})<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas2d" width="500" height="500"></canvas>来源：https://stackoverflow.com/questions/39189081/position-labels-on-a-coordinate-system-easeljs