2 차 베 지어 곡선 : 점 계산

2 차 베 지어 곡선 : 점 계산

---

2 차 곡선의 점을 계산하고 싶습니다. HTML5의 캔버스 요소와 함께 사용합니다.

quadraticCurveTo()JavaScript 에서 함수를 사용할 때 소스 지점, 대상 지점 및 제어 지점이 있습니다.

t=0.5이 세 점을 "만"알고있는 상태 에서 생성 된 2 차 곡선에서 점을 어떻게 계산할 수 있습니까?

---

예를 들어 베 지어 곡선 에 대한 Wikipedia 페이지에있는 2 차 베 지어 공식을 사용합니다 .

의사 코드에서는

t = 0.5; // given example value
x = (1 - t) * (1 - t) * p[0].x + 2 * (1 - t) * t * p[1].x + t * t * p[2].x;
y = (1 - t) * (1 - t) * p[0].y + 2 * (1 - t) * t * p[1].y + t * t * p[2].y;

p[0]시작점, p[1]제어점, p[2]끝점입니다. t0에서 1까지의 매개 변수입니다.

---

누군가 큐빅 형식이 필요한 경우 :

        //B(t) = (1-t)**3 p0 + 3(1 - t)**2 t P1 + 3(1-t)t**2 P2 + t**3 P3

        x = (1-t)*(1-t)*(1-t)*p0x + 3*(1-t)*(1-t)*t*p1x + 3*(1-t)*t*t*p2x + t*t*t*p3x;
        y = (1-t)*(1-t)*(1-t)*p0y + 3*(1-t)*(1-t)*t*p1y + 3*(1-t)*t*t*p2y + t*t*t*p3y;

---

이 데모를 만들었습니다.

// x = a * (1-t)³ + b * 3 * (1-t)²t + c * 3 * (1-t)t² + d * t³
//------------------------------------------------------------
// x = a - 3at + 3at² - at³ 
//       + 3bt - 6bt² + 3bt³
//             + 3ct² - 3ct³
//                    + dt³
//--------------------------------
// x = - at³  + 3bt³ - 3ct³ + dt³
//     + 3at² - 6bt² + 3ct²
//     - 3at + 3bt
//     + a
//--------------------------------
// 0 = t³ (-a+3b-3c+d) +  => A
//     t² (3a-6b+3c)   +  => B
//     t  (-3a+3b)     +  => c
//     a - x              => D
//--------------------------------

var A = d - 3*c + 3*b - a,
    B = 3*c - 6*b + 3*a,
    C = 3*b - 3*a,
    D = a-x;

// So we need to solve At³ + Bt² + Ct + D = 0 

여기에 전체 예

누군가를 도울 수 있습니다.

---

나는 talkhabis answer (입방체 곡선)을 편집하여 곡선이 올바른 좌표로 표시되도록했습니다. (주석 불가) Y 좌표를 변경해야했습니다 (-p []. y + 150). (이에 대한 새로운 변수가 더 좋고 효율적인 솔루션이 될 수 있지만 아이디어를 얻습니다)

// Apply points to SVG and create the curve and controllers :

var path  =  document.getElementById('path'),
    ctrl1 =  document.getElementById('ctrl1'),
    ctrl2 =  document.getElementById('ctrl2'),
    D = 'M ' + p0.x + ' ' + (-p0.y+150) +
    'C ' + c0.x + ' ' + (-c0.y+150) +', ' + c1.x + ' ' + (-c1.y+150) + ', ' + p1.x + ' ' + (-p1.y+150);

path.setAttribute('d',D);
ctrl1.setAttribute('d','M'+p0.x+','+(-p0.y+150)+'L'+c0.x+','+(-c0.y+150));
ctrl2.setAttribute('d','M'+p1.x+','+(-p1.y+150)+'L'+c1.x+','+(-c1.y+150));

// Lets test the "Bezier Function" 

var t = 0, point = document.getElementById('point');

setInterval(function(){

  var p = Bezier(p0,c0,c1,p1,t);
  point.setAttribute('cx',p.x);
  point.setAttribute('cy',-p.y+150);

  t += 0.01;
  if(t>=1) t=0;

},50);


// OK ... Now tring to get "y" on cruve based on mouse "x" : 

var svg = document.getElementById('svg'),
    point2 = document.getElementById('point2');

svg.onmousemove = function(e){

    var x = (e.pageX - 50)/2,  
        y = (e.pageY - 50)/2;
   // "-50" because of "50px margin" on the left side 
   // and "/2" because the svg width is 300 units and 600 px => 300 = 600/2    

  // Get the x,y by mouse x
  var p = YBX(p0,c0,c1,p1,x); 

  point2.setAttribute('cx',p.x);
  point2.setAttribute('cy',-p.y+150);  
} 

http://jsfiddle.net/u214gco8/1/

또한 3 차 곡선에 대한 결과를 테스트하기 위해 C-Code를 만들었습니다. 주 기능에 X 및 Y 좌표를 입력하기 만하면됩니다.

#include <stdio.h>
#include <stdlib.h> 
#include <math.h> 

void bezierCurve(int x[] , int y[]) 
{ 
    double xu = 0.0 , yu = 0.0 , u = 0.0 ; 
    int i = 0 ; 
    for(u = 0.0 ; u <= 1.0 ; u += 0.05) 
    { 
        xu = pow(1-u,3)*x[0]+3*u*pow(1-u,2)*x[1]+3*pow(u,2)*(1-u)*x[2] 
             +pow(u,3)*x[3]; 
        yu = pow(1-u,3)*y[0]+3*u*pow(1-u,2)*y[1]+3*pow(u,2)*(1-u)*y[2] 
            +pow(u,3)*y[3]; 
        printf("X: %i   Y: %i \n" , (int)xu , (int)yu) ; 
    } 
} 

int main(void) {
    int x[] = {0,75,50,300};
    int y[] = {0,2,140,100};
    bezierCurve(x,y);
    return 0;
}

https://ideone.com/glLXcB

---

참고 : 여기에 제시된 일반적인 공식을 사용하는 경우 t = 0.5가 곡선 길이의 절반 지점을 반환 할 것이라고 기대하지 마십시오. 대부분의 경우 그렇지 않습니다.

보기에 여기 하에서 "§23 - 고정 된 거리 간격으로 곡선 추적" 하고 여기 .

참조 URL : https://stackoverflow.com/questions/5634460/quadratic-b%c3%a9zier-curve-calculate-points