Question

这是我的第一个问题所以请保持温柔。我不是程序员，对这些事情知之甚少。

我一直在搞乱svg和raphael.js并且遇到了一个＆＃34;问题＆＃34;渲染弧线。

为简化事情，请忘记raphael并考虑以下代码：

<html>
<body>
    <svg width="600px" height="400px" viewBox="0 0 600 400">
        <circle cx="200" cy="200" r="180" style="stroke: red; fill: none;"/>
        <line x1="200" y1="220" x2="200" y2="180" style="stroke: black"/>
        <line x1="180" y1="200" x2="220" y2="200" style="stroke: black"/>
        <path d="M200,200 L20,208 A180,180 0 0,1 378,170 z" style="stroke: blue; fill:none"/>
        <path d="M200,200 L20,208 A180,180 0 0,0 378,170 z" style="stroke: green; fill:none"/>
    </svg>
</body>
</html>

假设圆圈已经正确渲染，我预计两个圆弧正好落在圆顶上，而不是它们出现偏移。（没有足够的代表发布图片。）

我已经在Chrome 43，Firefox 40和Opera 30中对此进行了测试。它们都产生了相同的结果。

我是否误解了弧规范的工作原理？我也注意到，如果我们更改＆＃34; A180,180＆＃34;到＆＃34; A100,100＆＃34;它不会影响我觉得奇怪的结果。

更新

我更新了问题，因为给出的信息不完整。这是拉斐尔的代码：

<html>
<head>
    <script type="text/javascript" src="raphael.js"></script>    
</head>
<body>
    <div id="pie" style="width:600px; height:400px;"></div>
    <script type="text/javascript">
        var colorArr = ["#468966", "#FFF0A5", "#FFB03B"];
        var sectorAngles = [87.513812, 173.038674, 99.447514];

        var paper = Raphael("pie");

        var startAngle = 0;
        var endAngle = 90;
        var pieX = 200;
        var pieY = 200;
        var pieRadius = 180;
        var x1, y1, x2, y2;
        var arcDir = 1; //clockwise

        for (var i = 0; i < sectorAngles.length; i++) {
            startAngle = endAngle;
            endAngle = startAngle + sectorAngles[i];
            var flag = (endAngle - startAngle) > 180.0;
            x1 = Math.round( pieX + pieRadius * Math.cos(Math.PI * startAngle / 180.0) );
            y1 = Math.round( pieY + pieRadius * Math.sin(Math.PI * startAngle / 180.0) );
            x2 = Math.round( pieX + pieRadius * Math.cos(Math.PI * endAngle / 180.0) );
            y2 = Math.round( pieY + pieRadius * Math.sin(Math.PI * endAngle / 180.0) );

            var d = "M" + pieX + "," + pieY + " L" + x1 + "," + y1 + " A" + pieRadius + "," + pieRadius + " 0 " + +flag + "," + arcDir + " " + x2 + "," + y2 + " z"; 

            var arc = paper.path(d);
            arc.attr("fill", colorArr[i]);
            arc.attr("stroke-width", 0.1);
        }

        paper.circle( pieX, pieY, pieRadius ).attr({
            stroke: "red", "stroke-width": 0.2
        });           

    </script>
</body>
</html>

Answer 1

红色圆圈的中心位于200,200，半径为180。

要使两个弧完美叠加，它们的端点（20,208和378,170）需要准确地位于该圆周上。

要检查，我们可以计算这两个点距圆心的距离。

Response.AddHeader("content-disposition", "attachment;filename=\FileName.xlsx\");

这些半径差异足以导致错位。如果在弧中使用更精确的坐标，则可以获得更好的叠加效果。

另请注意，绿色弧应设置“大弧标志”，因为它超过180度。

sqrt((20-200)^2 + (208-200)^2) = 180.177
sqrt((378-200)^2 + (170-200)^2) = 180.510

弧渲染错误？

1 个答案: