在坐标系 Easeljs 上定位标签

Question

嘿，我正在尝试使用库在 canvas 中构建以下图片：EaselJS。

我的图片组件是：

两个圆圈 - 黄色和红色以及浅绿色背景
一个从 0 到 1 的坐标系，带有图片中出现的所有必要标签。

我已经实现了我的两个目标。我已经建立了一个基于 Whosebug 讨论的坐标系： How to draw a full coordinate system with Easeljs?.

我留下了 2 个我很关心的主要问题：

我需要绘制一个符合坐标系的矩形（或正方形），当前矩形只是背景。
我还需要添加 3 个标签：x 轴上的 'Critical Index'，y 轴上的 'Long-term Severity Index' 和 Long-term 的标题。

如果有人能帮我解决这个问题，我会很高兴我正在添加源代码：

$(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 链中调用 drawRect 而不是 drawCircle 时。

我已经添加了一个具有任意位置和大小值的矩形来匹配您的整体代码风格，因为我无法快速找到任何条件。我还删除了 CSS.

上的背景颜色

至于在每个轴上添加标签，我强烈建议您改用DOM。 EaselJS 对文本的支持几乎无法使用。甚至 EaselJS 本身也建议您使用 DOMElement 而不是 Text DisplayObj。更多关于 DOMElement here.

就个人而言，我认为使用纯 DOM 而不是 canvas 工作会更容易获得您想要的结果，除非您正在做一些基于用户交互的繁重工作动画的东西。

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

在坐标系 Easeljs 上定位标签

Position Labels on a coordinate System Easeljs

html

javascript

css

easeljs