如何用Easeljs绘制一个完整的坐标系？

Question

我想通过在画布上绘制它来创建一个完整的坐标系。

看起来应该类似于：

我的问题是，使用Easeljs创建此图像的代码是什么？ 请忽略标题“Koordinatensystem”和中心的红叉。

我在flash中执行了一次，但使用了线条工具，箭头工具，标签工具等。

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

Answer 1

好吧，我不知道这是否可以被称为优化代码，但它足以产生这个：

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(); 

我在画布上使用此坐标系实现了多达x ^ 13的多项式函数的在线绘图仪：https://www.matheretter.de/rechner/gfplot - Easeljs是一个非常方便的工具。