如何用Easeljs绘制一个完整的坐标系？ [英] How to draw a full coordinate system with Easeljs?

问题描述

我想在画布上绘制一个完整的坐标系。

它应该看起来像这样：

我的问题是，使用Easeljs创建这个图像的代码是什么？ 请忽略标题Koordinatensystem和中间的红十字。

我在Flash中执行过一次，但使用了行工具，arrow工具，标签工具等。

现在将所有内容移植到HTML5，并尝试使用代码创建所有内容）

HTML：

 < canvas id =canvas2dwidth =750height =600>< / canvas> 
  

Javascript：

 code> var stage = new createjs.Stage（'canvas2d'）; 
 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 coordinate_yaxis_lines = new createjs.Shape（）; 
 stage.addChild（coord_yaxis_lines）; 
 
 var axis_center_x = $（'＃canvas2d'）。width（）/ 2 ;; 
 var axis_center_y = $（'＃canvas2d'）。height（）/ 2; 
 var xaxis_width = $（'＃canvas2d'）。width（） -  0.05 * $（'＃canvas2d'）。 
 var yaxis_width = $（'＃canvas2d'）。height（） -  0.05 * $（'＃canvas2d'）。 
 var axis_start_x =（$（'＃canvas2d'）。width（） -  xaxis_width）/ 2; 
 var axis_start_y =（$（'＃canvas2d'）。height（） -  yaxis_width）/ 2; 
 
 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）; 
 
 //绘制x轴的coordsys箭头
 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（）; 
 
 //绘制y轴的coordsys箭头
 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 label_x = new createjs.Text（'x'，'bold 16px Arial'，'＃333'）; 
 var label_y = new createjs.Text（'y'，'bold 16px Arial'，'＃333'）; 
 stage.addChild（label_x）; 
 stage.addChild（label_y）; 
 label_x.x = axis_start_x + xaxis_width-5; 
 label_x.y = axis_center_y + 10; 
 label_y.x = axis_center_x-20; 
 label_y.y = axis_start_y-5; 
 
 var stepdist = xaxis_width / 14; 
 var steplinew = 6; 
 // 10水平线
 var xlines = 10; 
 var labels_x = []; 
 for（var i = 0; i <= xlines; i ++）{
 //不覆盖x轴线
 if（i！= xlines / 2）{
 // long grey line 
 coord_yaxis_lines.graphics.setStrokeStyle（1，'round'）。beginStroke（'＃DDD'）; 
 coord_yaxis_lines.graphics.moveTo（axis_start_x，axis_center_y +（i-xlines / 2）* stepdist）.lineTo（axis_start_x + xaxis_width，axis_center_y +（i-xlines / 2）* stepdist）; 
 //小黑色标记
 coord_yaxis_lines.graphics.setStrokeStyle（1，'round'）。beginStroke（'＃000'）; 
 coord_yaxis_lines.graphics.moveTo（axis_center_x-steplinew，axis_center_y +（i-xlines / 2）* stepdist）.lineTo（axis_center_x + steplinew，axis_center_y +（i-xlines / 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-xlines / 2）* stepdist-6; // move up a bit 
 stage.addChild（labels_x [i]）; 
 labels_x [i] .text =  - （i-xlines / 2）; 
 labels_x [i] .textAlign ='right'; 
} 
} 
 // 12正交线
 var ylines = 12; 
 var labels_y = []; 
 for（var i = 0; i <= ylines; i ++）{
 //不覆盖y轴线
 if（i！= ylines / 2）{
 // long grey line 
 coord_xaxis_lines.graphics.setStrokeStyle（1，'round'）。beginStroke（'＃DDD'）; 
 coord_xaxis_lines.graphics.moveTo（axis_center_x +（i-ylines / 2）* stepdist，axis_start_y）.lineTo（axis_center_x +（i-ylines / 2）* stepdist，axis_start_y + yaxis_width）; 
 //小黑色标记
 coord_xaxis_lines.graphics.setStrokeStyle（1，'round'）。beginStroke（'＃000'）; 
 coord_xaxis_lines.graphics.moveTo（axis_center_x +（i-ylines / 2）* stepdist，axis_center_y-steplinew）.lineTo（axis_center_x +（i-ylines / 2）* stepdist，axis_center_y + steplinew）; 
 // labels 
 labels_y [i] = new createjs.Text（'x'，'14px Arial'，'＃333'）; 
 labels_y [i] .x = axis_center_x +（i-ylines / 2）* stepdist; //向上移动
 labels_y [i] .y = axis_center_y + 12; 
 stage.addChild（labels_y [i]）; 
 labels_y [i] .text =（i-ylines / 2）; 
 labels_y [i] .textAlign ='center'; 
} 
} 
 
 stage.update（）; 
  

I would like to create a complete coordinate system by drawing it on the canvas.

It should look similar to this:

My question is, what is the code to create this image with Easeljs? Please ignore the headline "Koordinatensystem" and the red cross in the center.

I did this once in flash but used the line tool, arrow tool, label tool, etc.

Now porting everything to HTML5 and trying to create everything only using code :)

解决方案

Well, I do not know if this can be called optimized code, but it is good enough to produce this:

HTML:

<canvas id="canvas2d" width="750" height="600"></canvas>

Javascript:

var stage = new createjs.Stage('canvas2d');
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);

var axis_center_x = $('#canvas2d').width()/2;;
var axis_center_y = $('#canvas2d').height()/2;
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)/2;

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 label_x = new createjs.Text('x', 'bold 16px Arial', '#333');
var label_y = new createjs.Text('y', 'bold 16px Arial', '#333');
stage.addChild(label_x);
stage.addChild(label_y);
label_x.x = axis_start_x+xaxis_width-5;
label_x.y = axis_center_y+10;
label_y.x = axis_center_x-20;
label_y.y = axis_start_y-5;

var stepdist = xaxis_width/14;
var steplinew = 6;
// 10 horizontal lines
var xlines = 10;
var labels_x = [];
for(var i=0;i<=xlines;i++) {
    // dont overdraw x-axis-line
    if(i!=xlines/2) {
        // long gray line
        coord_yaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#DDD');
        coord_yaxis_lines.graphics.moveTo(axis_start_x, axis_center_y+(i-xlines/2)*stepdist).lineTo(axis_start_x+xaxis_width, axis_center_y+(i-xlines/2)*stepdist);         
        // 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-xlines/2)*stepdist).lineTo(axis_center_x+steplinew, axis_center_y+(i-xlines/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-xlines/2)*stepdist-6; // move up a bit
        stage.addChild(labels_x[i]);
        labels_x[i].text = -(i-xlines/2);
        labels_x[i].textAlign = 'right';
    }
}
// 12 orthogonal lines
var ylines = 12;
var labels_y = [];
for(var i=0;i<=ylines;i++) {
    // dont overdraw y-axis-line
    if(i!=ylines/2) {
        // long gray line
        coord_xaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#DDD');
        coord_xaxis_lines.graphics.moveTo(axis_center_x+(i-ylines/2)*stepdist, axis_start_y).lineTo(axis_center_x+(i-ylines/2)*stepdist, axis_start_y+yaxis_width);         
        // little black marker
        coord_xaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000');
        coord_xaxis_lines.graphics.moveTo(axis_center_x+(i-ylines/2)*stepdist, axis_center_y-steplinew).lineTo(axis_center_x+(i-ylines/2)*stepdist, axis_center_y+steplinew);           
        // labels
        labels_y[i] = new createjs.Text('x', '14px Arial', '#333');
        labels_y[i].x = axis_center_x+(i-ylines/2)*stepdist; // move up a bit
        labels_y[i].y = axis_center_y+12;
        stage.addChild(labels_y[i]);
        labels_y[i].text = (i-ylines/2);
        labels_y[i].textAlign = 'center';
    }
}

stage.update(); 

这篇关于如何用Easeljs绘制一个完整的坐标系？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！