기본 캔버스는 최대 3차 베지어 곡선까지만 지원하므로 여러 제어점을 추가하려면 어떻게 해야 합니까? (심지어 가장 복잡한 곡선도 3차 베지어로 시뮬레이션할 수 있습니다.) 동시에, 곡선을 형성하기 위해 제어점을 얼마나 직관적으로 설정할 수 있는지는 베지어 제어점의 위치를 명확하게 이해하기 어렵습니다. 우리는? 위의 두 가지 문제점을 해결하기 위해 커뮤니티에 N레벨 솔루션(js 버전)이 없는 것 같아서, 이번에는 저자가 오픈소스 bezierMaker.js에 대해 매우 진지하게 생각하고 있습니다!
bezierMaker.js는 이론적으로 N차 베지어 곡선 생성을 지원하며 개발자가 제어점을 추가하고 드래그하여 궁극적으로 일련의 드로잉 애니메이션을 생성할 수 있는 테스트 기반을 제공합니다. 개발자가 다양한 위치의 제어점에 해당하는 다양한 생성 곡선을 아는 것은 매우 직관적입니다.
이 작품이 마음에 든다면 출연을 환영합니다. 결국 별은 힘들게 얻은 것입니다. .
프로젝트 주소: 여기✨✨✨
시험장이 필요한 이유는 무엇입니까?복잡한 고차 베지어 곡선을 그릴 때 필요한 곡선의 제어점의 정확한 위치를 알 수 없습니다. 테스트 필드에서 시뮬레이션할 때 제어점의 좌표 값을 실시간으로 얻을 수 있습니다. 획득한 점 좌표를 객체 배열로 변환하고 BezierMaker 클래스에 전달하여 대상 곡선을 생성할 수 있습니다.
렌더링
기능<script src=./bezierMaker.js></script>그리다
위 렌더링은 테스트 사이트의 사용법을 보여줍니다. 테스트 사이트를 통해 제어점의 정확한 좌표를 얻은 후 bezierMaker.js를 호출하여 곡선을 직접 그릴 수 있습니다.
/** * 캔버스 캔버스의 DOM 객체 * x, y 좌표를 포함한 bezierCtrlNodesArr 제어점 배열 * 색상 곡선 색상 */var canvas = document.getElementById('canvas')//레벨 3 이전에 구현하려면 기본 메서드 사용 var arr0 = [ {x:70,y:25},{x:24,y:51}]var arr1 = [{x:233,y:225},{x:170,y:279},{x:240,y:51}]var arr2 = [{x:23,y:225},{x:70, y:79},{x:40,y:51},{x:300, y:44}]var arr3 = [{x:333,y:15},{x:70,y:79},{x:40,y:551},{x:170,y:279},{x:17,y:239} ]var arr4 = [{x:53,y:85},{x:170,y:279},{x:240,y:551},{x:70,y:79},{x:40,y:551} ,{x:170,y:279}]var bezier0 = 새로운 BezierMaker(canvas, arr0, 'black')var bezier1 = 새로운 BezierMaker(canvas, arr1, 'red')var bezier2 = new BezierMaker(canvas, arr2, 'blue')var bezier3 = new BezierMaker(canvas, arr3, 'yellow')var bezier4 = new BezierMaker(canvas, arr4, '녹색')bezier0.drawBezier()bezier1.drawBezier()bezier2.drawBezier()bezier3.drawBezier()bezier4.drawBezier()결과 플롯
제어 지점이 3개 미만인 경우 기본 API 인터페이스가 사용됩니다. 제어점이 2개 이상인 경우 우리가 구현하는 함수를 사용하여 점을 그립니다.
핵심 원칙베지어 곡선 그리기
베지어 곡선 그리기의 핵심은 베지어 공식을 적용하는 것입니다.
이 수식에서 P0-Pn은 각 지점의 다양한 거듭제곱 연산과 시작점에서 각 제어점, 끝점까지의 비율 t를 나타냅니다.
BezierMaker.prototype.bezier = function(t) { //베지어 공식 호출 var x = 0, y = 0, bezierCtrlNodesArr = this.bezierCtrlNodesArr, //제어점 배열 n = bezierCtrlNodesArr.length - 1, self = this bezierCtrlNodesArr .forEach (함수(항목, 색인) { if(!index) { x += item.x * Math.pow(( 1 - t ), n - 인덱스) * Math.pow(t, 인덱스) y += item.y * Math.pow(( 1 - t ), n - 인덱스) * Math.pow(t, index) } else { //factorial은 계승 함수입니다. x += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.x * Math .파우(( 1 - t ), n - index) * Math.pow(t, index) y += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.y * 수학. pow(( 1 - t ), n - 인덱스) * Math.pow(t, index) } }) return { x: x, y: y }}모든 점을 탐색하고 현재 비율 t(0<=t<=1) 값을 기준으로 베지어 곡선의 현재 점 좌표 x, y를 계산합니다. 저자는 t의 값을 1000개의 부분으로 나눕니다. 즉, 각 연산마다 t+=0.01입니다. 이때 계산된 x, y는 베지어 곡선을 1000개 부분으로 나눈 후의 지점이다. t 값이 0에서 1,1000번까지 횡단하면 1000개의 x, y 대응 좌표가 생성되고 점과 선을 순차적으로 그려서 고차 베지어 곡선을 시뮬레이션할 수 있습니다.
저자는 이후 글에서 베지어 공식의 유도에 대해 구체적으로 설명할 예정이다. 이제 실제 베지어 곡선을 1000개의 점으로 나누어 계산하고 그 점들을 직선으로 연결한다는 점만 알아두면 된다. 클래스 곡선을 시뮬레이션할 수 있습니다.
시뮬레이션 분야에서 베지어 곡선으로 생성된 애니메이션 구현
이 부분에 대한 관련 코드는 여기에서 찾을 수 있습니다.
전반적인 아이디어는 제어점의 각 레이어를 1차 베셀 함수로 처리하여 제어점의 다음 레이어를 계산하고 그에 따라 연결하는 재귀적 방법을 사용하는 것입니다. 구체적인 논리는 테스트 현장의 애니메이션 생성 원리를 정리하기 위해 베지어 곡선 공식의 원리에 대한 심층적인 설명까지 남겨두겠습니다~
요약작가는 늘 뭔가를 오픈소스로 만들고 싶었지만(그가 쓸 수 있는 게 아무것도 없었습니다.) 그러나 일반적으로 사용되는 모든 것은 다른 사람이 쓴 것이고, 바퀴를 재발명하는 것도 다른 사람이 잘 쓸 수는 없습니다. 이번에는 겉으로 보기에는 비어 있는 공간을 발견했습니다. 그래서 저는 그것을 오픈소스로 공개하기로 매우 엄숙한 결정을 내렸습니다. Gayhub의 Bezier 고급 애플리케이션 중 대부분은 Android 구현입니다. 아직 프런트엔드 분야에서 확장할 수 있는 부분이 많이 있습니다. 많은 비판이 필요합니다.
마침내프로젝트 주소: 여기✨✨
시험장 주소 : 꼭 놀러오세요✨✨✨
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.