画布ArcTo混乱

Question

所以我再一次处理环形部门,这不是我的强项.我可以.arc在画布上使用该方法就好了,问题来自于需要我的弧成为路径的一部分.

例如:

 ctx.save();
 ctx.arc(centerX, centerY, radius, startAngle, endAngle, true);
 ctx.stroke();
 ctx.restore();

工作良好.但现在我需要它作为路径的一部分,所以我有这样的事情:

 var pointArray = [...]; //this contains all four corner points of the annular sector
 ctx.save();
 ctx.moveTo(pointArray[0].x, pointArray[0].y);
 ctx.lineTo(pointArray[1].x, pointArray[1].y); //so that draws one of the flat ends
 ctx.arcTo(?, ?, pointArray[2].x pointArray[2].y, radius);

切线坐标的切线让我很生气.另外我有一个严重的问题: http: //www.dbp-consulting.com/tutorials/canvas/CanvasArcTo.html让它听起来像是用arcTo绘制的圆弧,它永远不会覆盖180度或更多的圆圈,并且有时候会我的环形扇区将超过180度.

感谢stackoverflow的优秀几何思想的帮助!

UPDATE 好的,所以我不得不在这里做svg canvas inter-polarity,并使用coffee-script,实际的生产代码如下!

 annularSector : (startAngle,endAngle,innerRadius,outerRadius) ->

    startAngle  = degreesToRadians startAngle+180
    endAngle    = degreesToRadians endAngle+180
    p           = [ 
        [ @centerX+innerRadius*Math.cos(startAngle),    @centerY+innerRadius*Math.sin(startAngle) ]
        [ @centerX+outerRadius*Math.cos(startAngle),    @centerY+outerRadius*Math.sin(startAngle) ]
        [ @centerX+outerRadius*Math.cos(endAngle),      @centerY+outerRadius*Math.sin(endAngle) ]
        [ @centerX+innerRadius*Math.cos(endAngle),      @centerY+innerRadius*Math.sin(endAngle) ] 
    ]
    angleDiff   = endAngle - startAngle
    largeArc    = (if (angleDiff % (Math.PI * 2)) > Math.PI then 1 else 0)

    if @isSVG

        commands    = []

        commands.push "M" + p[0].join()
        commands.push "L" + p[1].join()
        commands.push "A" + [ outerRadius, outerRadius ].join() + " 0 " + largeArc + " 1 " + p[2].join()
        commands.push "L" + p[3].join()
        commands.push "A" + [ innerRadius, innerRadius ].join() + " 0 " + largeArc + " 0 " + p[0].join()
        commands.push "z"

        return commands.join(" ")

    else

        @gaugeCTX.moveTo p[0][0], p[0][1]
        @gaugeCTX.lineTo p[1][0], p[1][1]
        #@gaugeCTX.arcTo 
        @gaugeCTX.arc @centerX, @centerY, outerRadius, startAngle, endAngle, false
        #@gaugeCTX.moveTo p[2][0], p[2][1]
        @gaugeCTX.lineTo p[3][0], p[3][1]
        @gaugeCTX.arc @centerX, @centerY, innerRadius, startAngle, endAngle, false          

解决方案

        @gaugeCTX.moveTo p[0][0], p[0][1]
        @gaugeCTX.lineTo p[1][0], p[1][1]
        @gaugeCTX.arc @centerX, @centerY, outerRadius, startAngle, endAngle, false
        @gaugeCTX.lineTo p[3][0], p[3][1]
        @gaugeCTX.arc @centerX, @centerY, innerRadius, endAngle, startAngle, true #note that this arc is set to true and endAngle and startAngle are reversed!

Answer 1

虽然你的问题/代码对我来说并不是 100% 清楚，

\n\n

arcTo() 仍然存在浏览器/渲染问题，因此现在使用 arc() 。
\n（请原谅我，我现在无法提供详细的链接，因为我成为了新的强制 Firefox 12 垃圾的受害者，并且在我的 ff3.6 驱动的系统中丢失了多年的笔记，它在未经批准的更新期间被简单地删除了） 。

\n\n

arc() 使用弧度，因此请在 wiki 上快速阅读一下 Math.PI 与弧度的关系，然后编写一些公式将您的度数（或您可能希望的任何值）转换为弧度。
\n你会做类似的事情： (((2 * Math.PI) / 360) * 270)\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0 (=3/4 圆)
\n通过方式：我没有遇到弧度/单位转换和 ECMAscript 浮点行为的明显绘图问题！

\n\n

另外，不要忘记 beginPath() 和 closePath() （以及需要的描边（））：不要让画布猜测！这通常是绘制（闭合）路径的关键！

\n\n

您可能还想查看 bezierCurveTo()。

\n\n

更新（关于 TS 的更新）：\n看着你的图片（我猜这是你的问题的呈现），我想我看到了你想要的：饼图。

\n\n

这很简单，它们是 beginPath() 和 closePath() （以及填充颜色）之间的 2 条弧和两条线。
\n你想要做的是将你的原点（点0,0）用translate()居中。在执行此操作之前，请阅读有关获得清晰线条的信息：技巧是转换为半像素：(x.5,y.5)。

\n\n

然后制作一张“主画布”和一张“临时画布”。对于每个馅饼，在干净的临时画布上绘制一个（只需设置它的宽度和高度，而不是一些清晰的胡言乱语）并将此临时画布放在主画布上。最后渲染/输出您的主画布。完毕。

\n\n

你的脚本中的“魔法”（简单的数学）可以在你现有的 svg-path 之间进行转换，我无法帮助你，因为我（羞于承认）无法识别你更新的源代码中的任何 JavaScript。

\n\n

希望这可以帮助！

\n\n

更新2：实际上..如果你能告诉我们你的点/坐标数组的格式..那真的会有帮助！然后我们就会知道你从哪里画到哪里。
\n最好的解决方案可能确实是启动一个接受点数组的 JavaScript 函数。
\n这样你的咖啡脚本就可以简单地将你的已知值（数据格式）吐出到渲染画布所需的 JavaScript 中（在 html 中）。

\n\n

这让我想.. 必须有现有的 svg-canvas 翻译脚本路径.. 对吧？也许有人知道经过尝试和测试的一个，可以在此处链接/复制它（以供将来参考）。

\n\n

更新 3： \n提示：不要忘记：您可以在绘图模式下旋转画布，也可以在分层画布时旋转画布。
\n当你旋转时（与上面提到的相同的弧度原理），画布将围绕它的原点（0,0）旋转，这就是为什么平移（到画布中心+ 0.5px）对于绘图如此有用这些基于圆形的形状！！！

\n