使用EaselJS在畫布周圍構建座標系

嘿，我正在嘗試使用庫在畫布中構建以下圖片：EaselJS。使用EaselJS在畫布周圍構建座標系

我的圖片組成部分是：

兩個圓 - 黃色和紅色和淺綠色背景
幾個黑色的小點
座標從0系統1所有圖片中出現的必要標籤。

我成功實現了第一個目標：創建2個圓圈並將它們放置在畫布的右上角。第二個目標，尤其是第三個目標（建築座標系）在我看來是不可能完成的任務。我有搜索的EaselJS API的任何線索如何創建這樣的結構，並沒有得到任何信息，可以幫助我實現我的第三個目標。我附上這已經建立至今的畫布代碼：

function init() { 
 
     var stage = new createjs.Stage("demoCanvas"); 
 
     var circle1 = new createjs.Shape(); 
 
     var circle2 = new createjs.Shape(); 
 
     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(); 
 
    }

#demoCanvas{ 
 
    background-color: #32CD32; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> 
 
<body onload="init();"> 
 
    <canvas id="demoCanvas" width="500" height="500"></canvas> 
 
    </body>

來源

2016-08-21 Brk

請幫忙:(（ – Brk

這裏是一個非常快速的樣品展示瞭如何繪製數據：http://jsfiddle.net/lannymcnie/g8cLkg8e/

我扔一個非常簡單的x/y「值」數據集：

var data = [ 
    [0,0.4], 
    [0.8, 0.8], 
    [0.9, 0.4], 
    [0.75, 0.25], 
    [0.95, 0.1] 
];

然後創建一個數據p每一個的軟件。定位是簡單的數學使用你的0-1範圍：

p.x = d[0] * GRAPH_WIDTH; 
// The y-position is subtracted from the height because 0 is at the bottom 
p.y = GRAPH_HEIGHT - d[1] * GRAPH_HEIGHT;

這是簡單的數學，因爲你的範圍只是0-1。如果你有一個更復雜的（或動態範圍），你可以把它的工作使用：

value = (MAX - VALUE)/(MAX - MIN) * GRAPH_WIDTH; 
// For example, to get an x-value of 1.5 in a range of 1-2 (instead of 0-1): 
xPosition = (2 - 1.5)/(2 - 1) * GRAPH_WIDTH 
// OR 
xPosition = 0.5/1 * 500 = 250px

處理實際圖軸&標籤，也無論是在畫布是一些可以使用的方法，和畫布外部（HTML DOM）。如果您對此有特定問題，請隨時發佈後續問題 - 但我建議您先嚐試構建一些內容，就像您對圖表所做的一樣。

需要注意的一件事情：使用圖形作爲容器將會更容易，因此您可以使用標準化位置（從0開始），然後移動容器，在特定大小內繪製它。

來源

2016-08-21 22:23:45 Lanny

我已經打開新的討論，更新後： http://stackoverflow.com/questions/39189081/how-to-build-a-rectangle-which-fits-a-coordinate -system-用的標籤，easeljs – Brk

使用EaselJS在畫布周圍構建座標系

回答

相關問題