座標系の位置ラベルEaseljs

Question

ちょっと、ライブラリを使用してキャンバスに次の画像を作成しようとしています：EaselJS。

マイピクチャ・コンポーネントは、次のとおり

1. 二つの円 - 黄色と赤色と緑色光の背景
2. 画像に表示されるすべての必要なラベルで0から1への座標系。

私は私の2つの目標に成功しました。 私はstackoverflowの議論に基づいて座標系を構築しています： How to draw a full coordinate system with Easeljs?。

私は私をたくさんかかわる2つの主要な問題が残っています：

1. 私は、長方形（または正方形）を描画するために必要な座標系に適合し、現在の矩形はただの背景です。
2. また、x軸に「Critical Index」、y軸に「Long-term Severity Index」、Long-termの見出しの3つのラベルを追加する必要があります。

私は幸せだろう誰かがこれで私を助けることができれば、私は、ソースコード追加してい を発行します。

$(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で四角形を作成するためにちょうど同じです円を描くように。違いは、graphicsチェーンでdrawCircleの代わりにdrawRectを呼び出すときです。

私は、任意の位置とサイズの値を持つ矩形をあなたの全体的なコードスタイルに合わせて追加しました。 CSSの背景色も削除しました。

各軸にラベルを追加する場合は、代わりにDOMを使用することを強くお勧めします。テキストのためのEaselJSのサポートはほとんど使えません。たとえEaselJSでもTextDisplayObjの代わりにDOMElementを使用することをお勧めします。 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>