시작점 (x, y)과 원 반경이 있습니다. 베 지어 곡선 점에서 경로를 생성 할 수있는 엔진도 있습니다.
베 지어 곡선을 사용하여 원을 어떻게 만들 수 있습니까?
답변
이미 말했듯이, Bezier 곡선을 사용한 원의 정확한 표현은 없습니다.
다른 답을 완성하려면 : n세그먼트가있는 베 지어 곡선 의 경우 곡선의 중간이 원 자체에 있다는 의미에서 제어점까지 의 최적 거리는입니다 (4/3)*tan(pi/(2n)).
따라서 4 점의 경우 (4/3)*tan(pi/8) = 4*(sqrt(2)-1)/3 = 0.552284749831.
답변
comp.graphics.faq에 포함됨
발췌 :
주제 4.04 : 원에 베 지어 곡선을 맞추는 방법은 무엇입니까?
흥미롭게도 Bezier 곡선은 원에 가깝지만 원에 완벽하게 맞지는 않습니다. 일반적인 근사치는 4 개의 베 지어를 사용하여 원을 모델링하는 것입니다. 각각은 제어점이 끝점에서 d = r * 4 * (sqrt (2) -1) / 3 거리에 있고 (여기서 r은 원 반경) 끝점에서 원에 접하는 방향. 이렇게하면 베 지어의 중간 점이 원 위에 있고 1 차 도함수가 연속적임을 확인할 수 있습니다.
이 근사치의 반경 오차는 원 반경의 약 0.0273 %입니다.
Michael Goldapp, “입방 다항식에 의한 원호 근사”Computer Aided Geometric Design (# 8 1991 pp.227-238)
Tor Dokken 및 Morten Daehlen, “곡률 연속 베 지어 곡선에 의한 원의 근사치”Computer Aided Geometric Design (# 7 1990 pp. 33-41). http://www.sciencedirect.com/science/article/pii/016783969090019N (비 무료 기사)
또한 http://spencermortensen.com/articles/bezier-circle/ 에서 유료화되지 않은 기사를 참조하십시오.
브라우저 및 캔버스 요소.
일부 브라우저는 캔버스 그리기 아크에 베 지어 곡선을 사용하고, Chrome은 (현재) 4 섹터 접근 방식을 사용하고 Safari는 8 섹터 접근 방식을 사용하며, 그 차이는 0.0273 %로 인해 고해상도에서만 눈에 띄며, 호가 평행하고 위상이 맞지 않을 때만 실제로 볼 수 있으며 호가 실제 원에서 진동하는 것을 알 수 있습니다. 이 효과는 곡선이 방사형 중심을 중심으로 움직일 때 더 두드러집니다. 600px 반경은 일반적으로 차이를 만드는 크기입니다.
특정 드로잉 API에는 실제 아크 렌더링이 없으므로 Bezier 곡선도 사용합니다. 예를 들어 Flash 플랫폼에는 아크 드로잉 API가 없으므로 아크를 제공하는 모든 프레임 워크는 일반적으로 동일한 Bezier 곡선 접근 방식을 사용합니다.
브라우저 내의 SVG 엔진은 다른 그리기 방법을 사용할 수 있습니다.
기타 플랫폼
사용하려는 플랫폼이 무엇이든 아크 드로잉이 어떻게 수행되는지 확인하는 것이 가치가 있으므로 이와 같은 시각적 오류를 예측하고 적응할 수 있습니다.
답변
질문에 대한 답이 매우 좋으므로 추가 할 사항이 거의 없습니다. 그것에 영감을 받아 저는 4 개의 베 지어 곡선으로 시작하여 곡선의 수를 1 개로 줄이면서 솔루션 을 시각적으로 확인 하는 실험을 시작했습니다. 놀랍게도 3 개의 베 지어 곡선을 사용하면 원이 나에게 충분 해 보이지만 구성이 약간 까다 롭다는 것을 알았습니다 . 실제로 Inkscape를 사용하여 빨간색 3 픽셀 너비의 원 위에 검정색 1 픽셀 너비의 베 지어 근사치를 배치했습니다 (잉크 스케이프에서 생성 한대로). 명확하게하기 위해 Bézier 곡선의 경계 상자를 보여주는 파란색 선과 표면을 추가했습니다.
자신을보기 위해 내 결과를 제시합니다.
1- 커브 그래프 (완전 함을 위해 모서리에 눌린 방울 모양) :
2- 곡선 그래프 :
3 곡선 그래프 :
4 곡선 그래프 : 
(SVG 또는 PDF를 여기에 넣고 싶었지만 지원되지 않습니다)
답변
이미 많은 답변을 받았지만 원의 입방 베 지어 근사치가 매우 좋은 작은 온라인 기사를 찾았습니다. 단위 원의 관점에서 c = 0.55191502449 여기서 c는 접선을 따라 제어점까지의 축 교차점에서 거리입니다.
두 개의 중간 좌표가 제어점 인 단위 원에 대한 단일 사분면으로. (0,1),(c,1),(1,c),(1,0)
방사형 오류는 0.019608 %에 불과하므로이 답변 목록에 추가해야했습니다.
이 기사는 여기에서 찾을 수 있습니다. 3 차 베 지어 곡선이있는 대략적인 원
답변
불가능합니다. 베 지어는 입방체입니다 (적어도 … 가장 일반적으로 사용되는 것은). 원은 방정식에 제곱근을 포함하기 때문에 3 차로 정확하게 표현할 수 없습니다. 결과적으로 근사치가 필요합니다.
이렇게하려면 원을 n-tant (egquadrants, octants)로 나누어야합니다. 각 n-tant에 대해 첫 번째와 마지막 점을 베 지어 곡선의 첫 번째와 마지막 점으로 사용합니다. 베 지어 다각형에는 두 개의 추가 점이 필요합니다. 빠르게하기 위해, 저는 n-tant의 각 극단 점에 대한 원의 접선을 취하고 두 점을 두 접선의 교차점으로 선택합니다 (기본적으로 Bezier 다각형이 삼각형이되도록). 정밀도에 맞게 n-tant 수를 늘리십시오.
답변
다른 답변은 진정한 원이 불가능하다는 사실을 다루었습니다. 이 SVG 파일은 2 차 베 지어 곡선을 사용한 근사치이며 얻을 수있는 가장 가까운 파일입니다. http://en.wikipedia.org/wiki/File:Circle_and_quadratic_bezier.svg
다음은 큐빅 베 지어 곡선이있는 것입니다. http://en.wikipedia.org/wiki/File:Circle_and_cubic_bezier.svg
답변
코드를 찾는 사람들에게 :
https://jsfiddle.net/nooorz24/2u9forep/12/
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function drawBezierOvalQuarter(centerX, centerY, sizeX, sizeY) {
ctx.beginPath();
ctx.moveTo(
centerX - (sizeX),
centerY - (0)
);
ctx.bezierCurveTo(
centerX - (sizeX),
centerY - (0.552 * sizeY),
centerX - (0.552 * sizeX),
centerY - (sizeY),
centerX - (0),
centerY - (sizeY)
);
ctx.stroke();
}
function drawBezierOval(centerX, centerY, sizeX, sizeY) {
drawBezierOvalQuarter(centerX, centerY, -sizeX, sizeY);
drawBezierOvalQuarter(centerX, centerY, sizeX, sizeY);
drawBezierOvalQuarter(centerX, centerY, sizeX, -sizeY);
drawBezierOvalQuarter(centerX, centerY, -sizeX, -sizeY);
}
function drawBezierCircle(centerX, centerY, size) {
drawBezierOval(centerX, centerY, size, size)
}
drawBezierCircle(200, 200, 64)<canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>이를 통해 4 개의 베 지어 곡선으로 만들어진 원을 그릴 수 있습니다. JS로 작성되었지만 다른 언어로 쉽게 번역 가능
노트
꼭 필요한 경우가 아니라면 SVG 경로를 사용하여 원을 그려야하는 경우 베 지어 곡선을 사용하지 마십시오. 경로에서 Arc2 개의 반원을 만드는 데 사용할 수 있습니다 .
