EaselJS를 사용하여 캔버스 주위에 좌표계 빌드

안녕하세요, 라이브러리를 사용하여 캔버스에 다음 그림을 빌드하려고합니다 : EaselJS.EaselJS를 사용하여 캔버스 주위에 좌표계 빌드

내 사진의 구성 요소는 다음과 같습니다

두 개의 원 - 노란색과 빨간색과 빛 녹색 배경
여러 개의 작은 검은 점
모두와 함께 0에서 1로 좌표계 그림에 나타나는 필수 레이블.

첫 번째 목표는 두 개의 원을 만들어 내 캔버스의 오른쪽 상단에 배치하는 것입니다. 두 번째 목표와 특히 세 번째 목표 (좌표 시스템 구축)는 나에게 불가능한 작업처럼 보입니다. 내가 구조체를 만드는 방법에 대한 어떤 단서를 위해 EaselJS의 API를 검색했다. 제 3 목표 달성에 도움이되는 정보가 없습니다. 내가 던졌다 http://jsfiddle.net/lannymcnie/g8cLkg8e/

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

정말 빠른 샘플 데이터를 플롯하는 방법을 보여주고있다 : 는 지금까지 구축 된 캔버스의 코드를 부착하고 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-with-labels-easeljs – Brk

EaselJS를 사용하여 캔버스 주위에 좌표계 빌드

답변

관련 문제