Позиции Ярлыки на координатной системе Easeljs

Question

Привет, Я пытаюсь создать следующую картинку в холсте с помощью библиотеки: EaselJS.

Мои компоненты изображения являются:

1. два круга - желтый и красный и светло-зеленый фон
2. система координат от 0 до 1 со всеми необходимыми этикетками, которые появляются на картинке.

Я преуспел в своих двух целях. Я построил систему координат, основанную на обсуждении stackoverflow: How to draw a full coordinate system with Easeljs?.

я ушел с 2-х основными проблемами, которые волнуют меня много:

1. мне нужно нарисовать прямоугольник (или квадрат), который приспосабливает систему координат, текущий прямоугольник просто фон.
2. Также мне нужно добавить 3 метки: «Критический индекс» по оси x, «Долгосрочный индекс серьезности» на оси y и заголовок долгосрочного.

Я бы рад, если кто-то может помочь мне с этим вопросы Я добавляю исходный код:

$(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>

Answer 1

Синтаксис для создания прямоугольника в EaselJS точно такой же как создание круга. Разница заключается в вызове drawRect вместо drawCircle в цепи graphics.

Я добавил прямоугольник с произвольными значениями позиции и размера в соответствии с вашим общим стилем кода и потому, что не мог найти никаких критериев быстро. Я также удалил цвет фона в CSS.

Что касается добавления меток на каждую ось, я настоятельно рекомендую вам вместо этого использовать DOM. Поддержка EaselJS для текста почти непригодна. Даже сам EaselJS рекомендует использовать DOMElement вместо TextDisplayObj. Подробнее о DOMElementhere.

Лично я думаю, что было бы намного легче достичь желаемого результата, используя чистую DOM вместо работы с холстом, если вы не делаете тяжелую работу с анимацией на основе взаимодействия с пользователем.

$(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>