캔버스로 radarplot의 화살촉 회전

Question

캔버스에 코딩 된 레이더/스파이더 플롯에 화살촉을 추가하려고합니다. PHP/SQL을 사용하여 일부 데이터베이스 값을 검색하기 때문에 필요한 JS를 Canvas에 그려줍니다. 지금까지 나는 축 (7)과 지침 (5 개 값)을 그렸다.

화살촉이 올바르게 표시되도록하려면 어떻게 할 수 있습니까? 각도로 그리고 7 축 끝에서?

function drawArrows(context){ 
    context.beginPath(); 
    context.strokeStyle = "#ccc"; 
    context.lineWidth = 2; 
    context.save(); 
<?php 
$arrowHoek = 35; 
$cHoek = (360/7); 
$arrowLength = 10; 

for ($i = 1 ; $i < 8 ; $i++) { 
    $arrow_xleft = round((getCoordinates($i,6,x))-(sin(deg2rad($arrowHoek))*$arrowLength),2); 
    $arrow_yleft = round((getCoordinates($i,6,y))+(cos(deg2rad($arrowHoek))*$arrowLength),2); 
    $arrow_xright = round((getCoordinates($i,6,x))+(sin(deg2rad($arrowHoek))*$arrowLength),2); 
    $arrow_yright = $arrow_yleft; 
    $arrow_rotation = deg2rad(($cHoek*$i)-$cHoek);  

    echo "\tcontext.moveTo("; 
    getCoordinates($i,6,null); 
    echo ");\n"; 
    echo "\tcontext.lineTo($arrow_xleft, $arrow_yleft);"; 
    echo "\n\tcontext.moveTo("; 
    getCoordinates($i,6,null); 
    echo ");\n"; 
    echo "\tcontext.lineTo($arrow_xright, $arrow_yright);\n"; 
    echo "\tcontext.rotate($arrow_rotation);\n"; 
    echo "\tcontext.restore();\n"; 
    echo "\tcontext.save();\n"; 

} 
?> 
context.stroke(); 
} 

Answer 1

나는 그것을 해결했습니다. 다른 주제에서 보았 듯이 save(), translate(), rotate() 및 restore() 함수를 사용합니다. 이것을 별도의 Javascript 함수에 넣으면 다른 도면을 엉망으로 만들지 않고 개별 Canvas 부품으로 변환 할 수 있습니다.

다음은 해결책입니다 (이 기능은 PHP를 사용하여 자바 스크립트 기능을 표시 함).

function drawArrows(context){ 
context.beginPath(); 
context.strokeStyle = "#ccc"; 
context.lineWidth = 2; 
<?php 
$arrowHoek = 35; 
$cHoek = (360/7); 
$arrowLength = 10; 

for ($i = 1 ; $i < 8 ; $i++) { 
    $arrow_xleft = -(sin(deg2rad($arrowHoek))*$arrowLength); 
    $arrow_yleft = (cos(deg2rad($arrowHoek))*$arrowLength); 
    $arrow_xright = (sin(deg2rad($arrowHoek))*$arrowLength); 
    $arrow_yright = $arrow_yleft; 
    $arrow_rotation = deg2rad(($cHoek*$i)-$cHoek); 

    echo "\tcontext.save();\n"; 
    echo "\tcontext.translate(";  
    getCoordinates($i,6,null); 
    echo ");\n"; 
    echo "\tcontext.rotate($arrow_rotation);\n"; 
    echo "\tcontext.moveTo($arrow_xleft, $arrow_yleft);"; 
    echo "\n\tcontext.lineTo(0,0);\n"; 
    echo "\tcontext.lineTo($arrow_xright, $arrow_yright);\n"; 
    echo "\tcontext.restore();\n"; 
} 
?> 
context.stroke(); 
} 

• 참고 컨텍스트 캔버스 요소의 선언은 컨테이너 함수이다.