캔버스로 요소 번역

Question

저는 파이 차트를 구현하여 캔버스를 배우려고합니다. 필자는 데이터를 파싱하고 슬라이스를 그린 다음 검은 원으로 표시된대로 각 호의 중심을 계산했습니다. 하지만 지금은 슬라이스 중 하나를 "미끄러지 듯"그려려고합니다. 움직이지 않고 (아직) 슬라이딩 아웃 한 것처럼 슬라이스를 그립니다.

가장 쉬운 방법은 조각의 새 구석이 있어야한다는 점입니다. (빨간색 손으로 그려진 자유 손), 거기에서 번역하고, 조각을 그린 다음 원래를 다시 번역합니다. 원형 차트의 중심과 호의 중심점 (베이지 색 조각에 자유 손의 검은 색 선으로 연결됨)을 알고 있기 때문에 이것을 쉽게 계산할 수 있다고 생각했습니다. 그러나 this question을 묻는다면, 이것은 방정식 시스템 중 하나가 2 차 방정식을 푸는 것을 포함 할 것 같습니다. 그것은 JavaScript로 어렵지 만 펜과 종이로는 쉽습니다.

더 간단한 방법이 있습니까? 다시 한 걸음 물러나서 XYZ를하는 것과 실제로 똑같은 것을 깨달아야합니까?

나는 어떤 코드도 제공하지 않았지만 아이디어/의사 코드를 찾고 있습니다.

Answer 1

x 및 y이 번역하기가 쉽습니다.

// cx and cy are the coordinates of the centre of your pie 
// px and py are the coordinates of the black circle on your diagram 
// off is the amount (range 0-1) by which to offset the arc 
//  adjust off as needed. 
// rx and ry will be the amount to translate by 

var dx = px-cx, dy = py-cy, 
    angle = Math.atan2(dy,dx), 
    dist = Math.sqrt(dx*dx+dy*dy); 
rx = Math.cos(angle)*off*dist; 
ry = Math.sin(angle)*off*dist; 

Simon Sarris가 준 코드에 입력하면 완성됩니다. off 값을 0.25로 제안합니다.

Answer 2

은 단순히 캔버스에 요소를 번역하는 것은 매우 쉽게 여기에 어떤 복잡한 방정식이 안 (jQuery를 어떻게 든 이러한 노력에 도움이 될 것입니다 플러그인이있다 오프 기회에 태그됩니다). 가장 기본적인 의미에서입니다

http://jsfiddle.net/XqwY2/

이 파이를 만들려면 : 여기

ctx.save(); 
ctx.translate(x, y); 
// Draw the things you want offset by x, y 
ctx.restore(); 

이 사각형 파이의 기초적인 예 번역 네 "조각"의 하나 같은 파이입니다 당신이 계산할 필요가있는 유일한 것은 당신이 얼마나 원하고 싶은지입니다. 간단한 예제에서 파란색 블록은 미끄러졌습니다. 10, -10.

처음에 원하는 X와 Y를 얻는 방법을 궁금하게 생각하는 경우에는 자바 스크립트/캔버스 관련 질문이 아닙니다. 거리에게이 질문을 주어진 라인에 포인트를 들면 : Finding points on a line with a given distance 가장 명확

편집 보인다, 여기에 있습니다 (주석에서)입니다

// Center point of pie 
    var x1 = 100; 
    var y1 = 100; 

    // End of pie slice (your black dot) 
    var x2 = 200; 
    var y2 = 0; 

    // The distance you want 
    var distance = 3; 

    var vx = x2 - x1; // x vector 
    var vy = y2 - y1; // y vector 
    var mag = Math.sqrt(vx*vx + vy*vy); // length 
    vx = mag/vx; 
    vy = mag/vy; 

    // The red X location that you want: 
    var px = x1 + vx * (distance); 
    var py = y1 + vy * (distance); 

이가 당신에게 (104.24, 95.76)의 평을 픽셀을 줄 것이다 내 만든 입력.