如何用Easeljs繪製完整的座標系？

Question

我想在畫布上繪製一個完整的座標系。

應該類似於此：

我的問題是，什麼是創建Easeljs此圖像的代碼？ 請忽略標題「Koordinatensystem」和中心的紅色十字。

我這樣做一次閃光燈，但使用直線工具，箭頭工具，標籤工具等

現在移植一切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是一個非常方便的工具。