Explication détaillée de l'applet WeChat utilisant Canvas pour créer des exemples de ligne K

Avant-propos :

Notre objectif est d'avoir une courbe lisse pour représenter les moyennes mobiles, etc., plutôt qu'une polyligne avec des points d'inflexion évidents. Nous devons donc continuer à explorer l’API. Nous avons constaté que dans l'API canevas, il y a 2

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

qui peuvent dessiner des courbes. Les deux API tracent des chemins à travers les courbes de Bézier. Heureusement, lorsque j'apprenais PS, j'avais aussi un certain degré de maîtrise dans l'exécution spécifique des courbes de Bézier, je savais donc que pour déterminer un tracé de courbe composé de plusieurs points, chaque point de virage doit avoir 2 points de contrôle pour contrôler la courbe. . Performance

Et au point de départ et au point final de la courbe, il ne peut y avoir qu'un seul point de contrôle. Par conséquent, lorsque nous dessinons le point de départ et le point final, nous devons utiliser quadraticCurveTo, et lorsque nous dessinons le point médian, nous utilisons beZierCurveTo.

La difficulté est maintenant, comment calculer leurs points de contrôle à travers les points connus à franchir ?

Afin de trouver une formule efficace, je me suis lancé dans la rédaction. J'ai dessiné un brouillon que moi seul pouvais comprendre.

Je ne m'attendais pas à dire au revoir aux mathématiques au lycée avant tant d'années. Avec un peu de mémoire, j'ai passé une matinée entière et me suis forcé à trouver un. formule. Je pense que si j'étais encore étudiant en mathématiques au lycée, si vous êtes bon dans ce domaine, vous pouvez probablement le sortir en seulement 10 minutes, transpirez !

Je ne sais pas si vous vous souvenez encore de la notion de tangente. Si on veut tracer une courbe de Bézier, M[i-1] est le point de départ, M[i] est le point final, et les deux autres points de contrôle sont A1, A2, ces deux points de contrôle doivent être sur la ligne tangente d'une certaine surface, et la ligne tangente peut être déterminée par trois points. Par exemple, dans mon brouillon, la ligne orange supérieure est la tangente. Il suffit de choisir sur la ligne tangente deux points à volonté et de les utiliser comme points de contrôle des courbes avant et arrière

Ainsi, après une longue période de réflexion, j'ai résumé une formule comme suit.

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])]

Les coefficients a et b sont des valeurs que je choisis au hasard en fonction de la situation que j'ai essayée, et il est recommandé de prendre une valeur proche de 0,3 et de déboguer. Essayez de voir l'effet spécifique avant de confirmer

La somme du premier point Le dernier point est que parce qu'il est impossible d'obtenir deux points de contrôle de cette manière, j'ai ajouté un point personnalisé aléatoire avant et après le. ensemble de points, et les a simplement ignorés pendant le parcours réel.

J'ai fait le tri dans mes idées et la mise en œuvre concrète est la suivante

bezierLine (canvasId, options) {
let windowWidth = 0
wx.getSystemInfo({
 success (result) {
  windowWidth = result.windowWidth
 }
})
let a = windowWidth / (options.xAxis.length-1)
let data = []
options.xAxis.map((item, i) => {
 data.push([i * a, 200 - options.yAxis[i]])
})
data.unshift(data[0])
data.push(data[data.length - 1])
 
const ctx = wx.createCanvasContext(canvasId)
ctx.beginPath()
data.map((item, i) => {
 const a = 0.25
 const b = 0.25
 if (i == 0 || i == data.length - 1) {
  // do nothing
 } else if (i == 1) {
  ctx.moveTo(item[0], item[1])
 } else {
  const a1 = data[i - 1][0] + a * (data[i][0] - data[i - 2][0])
  const a2 = data[i - 1][1] + b * (data[i][1] - data[i - 2][1])
  const b1 = data[i][0] - b * (data[i + 1][0] - data[i - 1][0])
  const b2 = data[i][1] - b * (data[i + 1][1] - data[i - 1][1])
  ctx.bezierCurveTo(a1, a2, b1, b2, item[0], item[1])
 }
})
ctx.setLineWidth(1)
ctx.setStrokeStyle('red')
ctx.stroke()
ctx.draw()
}
// 在onLoad中调用
this.bezierLine('stage', {
 xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
 yAxis: [11, 33, 22, 32, 14, 15, 20, 60, 23, 44, 77, 122, 133, 89, 156, 122,128, 143, 111, 101, 132, 99, 98, 44, 62, 74, 111, 13, 42, 55]
})

oh ouais l'effet n'est pas mauvais, je n'ai plus à m'inquiéter ! dessiner la courbe et gérer notre ligne K L'image est un pas de plus

ps : Les données peuvent être organisées sous diverses formes. Il peut s'agir d'un tableau, d'un tableau à deux chiffres ou d'un objet. pas le point le plus important, du moment qu'il peut être traité correctement

Merci d'avoir lu, j'espère que cela pourra vous aider, merci pour votre soutien à ce site !

Pour plus d'applets WeChat utilisant Canvas pour créer des exemples de lignes K pour des explications détaillées, veuillez prêter attention au site Web PHP chinois pour les articles connexes !