How to draw a full coordinate system with Easeljs?

问题

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 :)

回答1:

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

I have implemented an online plotter for Polynomial functions up to x^13 using this coordinate system on the canvas: https://www.matheretter.de/rechner/gfplot - Easeljs is a really handy tool for that.

来源：https://stackoverflow.com/questions/25769469/how-to-draw-a-full-coordinate-system-with-easeljs

标签

canvas

easeljs