학위 텍스트는 자바 스크립트로 정렬되어야합니다

이 바이올린에서 네 개의 분홍색 점이 움직일 수 있습니다. 모든 다각형 모양을 형성합니다. 그리기 버튼을 클릭하면 각 모퉁이 각도가 그려집니다. 괜찮을거야. 하지만 호의 infront 정보를 텍스트가 필요합니다.학위 텍스트는 자바 스크립트로 정렬되어야합니다

하나를 기존 :

enter image description here

내가 이렇게해야

enter image description here

ctx.save(); 
    ctx.beginPath(); 
    ctx.moveTo(b1, b2); 

    ctx.arc(b1, b2, 20, ax1, ax2, !isInside); 
    console.log(ax1, ax2); 
    ctx.closePath(); 
    ctx.fillStyle = "red"; 
    ctx.globalAlpha = 0.25; 
    ctx.fill(); 
    ctx.restore(); 

    ctx.fillStyle = "black"; 
    ctx.fillText((isInside ? a : 360 - a) + '°', b1 + 15, b2);

그것 가능합니다. 미리 감사드립니다.

이 바이올린을 참조하십시오 http://jsfiddle.net/yn4yg/1/

출처

2014-02-11 Arunkumar

이것은 당신이 원하는 일을해야합니다 http://jsfiddle.net/natalieperna/6F3p7/1/

ax1의 양분 및 ax2
확인을 찾기는 (기존 isInside VAR 다른) 다각형 내부 가리키는 않다면, 그리고 PI
텍스트 위치 설정 30 이등분 각도
레이블 길이를 고려하여 텍스트 위치 5를 왼쪽으로 이동

출처

2014-02-23 00:29:45

귀하의 코드가 귀하의 질문에 대답하기 위해 같은 수학이 필요 포함 ???!

ctx.arc(b1, b2, 20, ax1, ax2, !isInside);

이등분 각도 AX2, AX1.
스위프가 반 시계 방향 인 경우 PI를 추가합니다 (필요한 경우 2 * PI 내에서 정규화).
선택적으로 작은 텍스트 길이를 고려하여 양분 된 각도에서 비트를 빼십시오.
이등분 된 각도에서 최소 20 픽셀을 확장하는 점 b1/b2를 계산하십시오.

출처

2014-02-11 15:23:07 markE

이것을 위해 피들을 제공하십시오. – Arunkumar

필요한 답은 제 대답에 설명되어 있습니다. – markE

나는 그것이 나를 위해 작동하지 않습니다보십시오. pls이 피들 참조 http://jsfiddle.net/yn4yg/5/ – Arunkumar

이 당신이 원하는 무엇을 당신이 가까이해야합니다

// Get the starting and ending points of the arc 
var angle = (isInside ? a : 360 - a); 
var s_x = b1+20*Math.cos(ax1); 
var s_y = b2+20*Math.sin(ax1); 
var e_x = b1+20*Math.cos(ax2); 
var e_y = b2+20*Math.sin(ax2); 

ctx.fillText(angle + '°', ((s_x+e_x)/2), ((s_y+e_y)/2));

여기에 작업 jsFiddle입니다.

출처

2014-02-21 23:55:27

학위 텍스트는 자바 스크립트로 정렬되어야합니다

답변

관련 문제