K-라인 예제를 생성하기 위해 캔버스를 사용하는 WeChat 애플릿에 대한 자세한 설명

머리말:

우리의 목표는 전환점이 분명한 다중선이 아닌 이동 평균 등을 나타내는 부드러운 곡선을 만드는 것입니다. 따라서 우리는 계속해서 API를 탐색해야 합니다. 캔버스 API에는 곡선을 그릴 수 있는 2개의

beZierCurveTo(num1, num2, num3, num4, x, y)
quadraticCurveTo(num1, num2, x, y)

가 있다는 것을 발견했습니다. 두 API 모두 베지어 곡선을 통해 경로를 그립니다. 다행히 PS를 배울 때 베지어 곡선의 특정 성능에 어느 정도 능숙했기 때문에 여러 점으로 구성된 곡선 경로를 결정하려면 각 전환점에 곡선을 제어하는 ​​2개의 제어점이 있어야 한다는 것을 알았습니다. . 성능

그리고 곡선의 시작점과 끝점에는 제어점이 하나만 있을 수 있습니다. 따라서 시작점과 끝점을 그릴 때는 QuadraticCurveTo를 사용하고, 중간점을 그릴 때는 beZierCurveTo를 사용합니다.

이제 어려운 점은 통과해야 할 알려진 지점을 통해 제어 지점을 어떻게 계산할 것인가입니다.

효과적인 공식을 찾기 위해 초안을 작성하기 시작했습니다. 나만이 이해할 수 있는 초안을 그렸습니다.

몇 년 동안 고등학교 수학과 작별 인사를 할 줄은 몰랐습니다. 약간의 기억력으로 아침 내내 시간을 보내며 억지로 생각해 냈습니다. 제가 아직 고등학생 수학을 전공했다면 아마 10분 안에 풀 수 있을 것 같아요.

베지어 곡선을 그리려면 M[i-1]이 시작점이고 M[i]가 끝점이고, 접선의 개념을 아직도 기억하고 있는지 모르겠습니다. 다른 두 제어점은 A1, A2입니다. 이 두 제어점은 특정 표면의 접선 위에 있어야 하며 접선은 세 점에 의해 결정될 수 있습니다. 예를 들어 내 초안에서는 위쪽 주황색 선이 접선입니다. 접선에서 두 점을 마음대로 골라 앞, 뒤 곡선의 제어점으로 사용하면 됩니다

그래서 오랜 고민 끝에 다음과 같은 공식을 정리했습니다.

A1[M[i-1][0] + a*(M[i][0] - M[i-2][0]), M[i-1][1] + b*(M[i][1] - M[i-2][1])]
 
A2[M[i][0] - b*(M[i+1][0] - M[i-1][0]), M[i][1] - b*(M[i+1][1] - M[i-1][1])]

계수 a와 b는 제가 상황에 따라 임의로 선택한 값인데, 0.3에 가까운 값을 취해서 디버깅하는 것이 좋습니다.

확인 전 구체적인 효과를 확인해 보세요

첫번째 포인트와 마지막 포인트 이 방법으로는 두 개의 컨트롤 포인트를 확보하는 것이 불가능하기 때문에 포인트 설정 전후에 임의의 커스텀 포인트를 추가하고 그냥 무시했습니다. 실제 순회 중에 발생합니다.

아이디어를 다음과 같이 정리해서 구현해봤습니다

아아아아아

아, 효과도 나쁘지 않고, 이제 곡선을 그릴 걱정도 안 하게 되고, K라인 차트를 다시 관리할 수 있습니다. 한 걸음 더 다가가세요

ps: 데이터는 다양한 형태로 정리될 수 있고, 배열이 될 수도 있고, 두 자리 배열이 될 수도 있고, 객체가 될 수도 있습니다. 이것이 가장 중요한 점은 아닙니다. , 올바르게 처리될 수 있는 한

읽어 주셔서 감사합니다. 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다!

더 많은 WeChat 미니 프로그램을 보려면 PHP 중국어 웹사이트에서 캔버스를 사용하여 K-line 예제를 만드는 관련 기사를 주목하세요!