我需要画一条直线(用于内容分离),然后在它的末尾,开始一条连接到指定终点的曲线。
我的问题是在完成直线后开始绘制弧线时的急转弯。我怎样才能消除这个尖角?
作为一种解决方案,可以延长直线以平滑其过渡到曲线。我只是不确定如何以编程方式进行,因为终点会定期更改,并且必须适用于所有用例。
小提琴:(1/5比例)
http://jsfiddle.net/7k2neef2/1/
SVG路径:
M 56 494 l 324 0 A 100 100 0 0 0 231 275
我应该注意到我正在使用一个函数来导出弧然后将它附加到直线上。这是功能:
function describeArc(x, y, radius, startAngle, endAngle){
var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"A", radius, radius, 0, arcSweep, 0, x, y
].join(" ");
d = 'M 56 494 l 324 0 ' + d;
return d;
}
答案 0 :(得分:1)
对于水平线段(x1,y1) - (x2,y1)和点(px,py),我们可以构建具有软连接的圆弧。 圆心坐标
cx = x2
cy = y1 + R
让我们
dx = px - x2
dy = py - y1
then
dx^2 + (R-dy)^2 = R^2
dx^2 + R^2 - 2 * R * dy + dy^2 = R^2
dx^2 + dy^2 = 2 * R * dy
R = (dx^2 + dy^2) / (2*dy)
现在我们有中心,弧的半径,起点和终点。
如果需要角度来构建弧,则起始角度为-Pi/2 (if py > y1)
,结束角度为atan2(py-cy, px-cx)