使用 Canvas 旋转雷达图中的箭头答案

【问题标题】：Rotate arrowheads in radarplot with Canvas使用 Canvas 旋转雷达图中的箭头
【发布时间】：2011-10-14 09:23:35
【问题描述】：

我正在尝试将箭头添加到用 Canvas 编码的雷达/蜘蛛图中。因为我使用 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();
}

【问题讨论】：

标签： php html canvas html5-canvas

【解决方案1】：

看来我解决了！正如在其他主题中发现的那样，它使用了 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();
}

注意：上下文和画布元素的声明位于容器函数中。

【讨论】：