所以我再次处理环形扇区,这不是我的强项。我可以在 Canvas 上很好地使用 .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高手几何思维的帮助!
更新 好的,所以我必须在这里做 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!
最佳答案
我最近发现自己对 arcTo() 方法感到失望(它实际上应该被称为 roundedCorner() )。我决定为那些也想使用 cx,cy,r,theta1,theta2 表达式的人想出一个通用的解决方法:
http://www.purplefrog.com/~thoth/art/paisley/arcTo.html
将重要的代码复制到这里:
/**
if code is "move" then we will do a moveTo x0,y0
if code is "line" then we will do a lineTo x0,y0
if code is anything else, we'll assume the cursor is already at x0,y0
*/
function otherArcTo(ctx, cx, cy, r, theta1, theta2, code)
{
console.log([cx,cy,r,theta1, theta2, code])
var x0 = cx + r*Math.cos(theta1)
var y0 = cy + r*Math.sin(theta1)
if (code=="move") {
ctx.moveTo(x0,y0)
} else if (code=="line") {
ctx.lineTo(x0,y0)
}
var dTheta = theta2-theta1
var nChunks = Math.ceil( Math.abs(dTheta) / (0.67*Math.PI) )
if (nChunks <=1) {
var theta3 = theta1 + dTheta/2
var r3 = r/Math.cos(dTheta/2)
var x1 = cx + r3*Math.cos(theta3)
var y1 = cy + r3*Math.sin(theta3)
var x2 = cx + r*Math.cos(theta2)
var y2 = cy + r*Math.sin(theta2)
ctx.arcTo(x1,y1,x2,y2, r)
} else {
for (var i=0; i<nChunks; i++) {
var code2 = null
if (i==0)
code2 = code
otherArcTo(ctx, cx, cy, r,
theta1 + dTheta*i/nChunks,
theta1 + dTheta*(i+1)/nChunks, code2)
}
}
}
关于javascript - Canvas ArcTo 困惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11623037/