0

Canvas でコーディングされたレーダー/スパイダー プロットに矢じりを追加しようとしています。PHP/SQL を使用していくつかのデータベース値を取得するため、キャンバスにプロットするために必要な JS のほとんどをエコーし​​ます。これまでのところ、軸 (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();
}
4

1 に答える 1

0

私はそれを解決したようです!他のトピックで見られるように、これは save()、translate()、rotate()、restore() 関数を使用します。これを別の Javascript 関数に入れると、他の描画を台無しにすることなく、個々の Canvas パーツに変換を行うことができます。

以下は解決策です (これは PHP を使用して Javascript 関数をエコーすることに注意してください)。

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();
}
  • 注: context 要素と canvas 要素の宣言は、コンテナー関数内にあります。
于 2011-07-27T23:33:08.440 に答える