Ausführliche Erklärung des WeChat-Applets, das Canvas zum Erstellen von K-Line-Beispielen verwendet

Vorwort:

Unser Ziel ist es, eine glatte Kurve zur Darstellung gleitender Durchschnitte usw. zu haben, und nicht eine Polylinie mit offensichtlichen Wendepunkten. Daher müssen wir die API weiter erforschen. Wir haben festgestellt, dass es in der Canvas-API zwei

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

gibt, die Kurven zeichnen können. Beide APIs zeichnen Pfade durch Bezier-Kurven. Glücklicherweise hatte ich beim Erlernen von PS auch ein gewisses Maß an Kenntnissen in der spezifischen Leistung von Bezier-Kurven, sodass ich wusste, dass zum Bestimmen eines Kurvenpfads, der aus mehreren Punkten besteht, jeder Wendepunkt zwei Kontrollpunkte zur Steuerung der Kurve haben muss . Leistung

Und am Start- und Endpunkt der Kurve kann es nur einen Kontrollpunkt geben. Wenn wir den Startpunkt und den Endpunkt zeichnen, müssen wir daher quadraticCurveTo verwenden, und wenn wir den Mittelpunkt zeichnen, müssen wir beZierCurveTo verwenden.

Die Schwierigkeit besteht nun darin, wie man ihre Kontrollpunkte anhand der bekannten zu passierenden Punkte berechnet?

Um eine wirksame Formel zu finden, begann ich mit dem Ausarbeiten. Ich habe einen Entwurf gezeichnet, den nur ich verstehen konnte.

Ich hätte nicht erwartet, dass ich mich so viele Jahre lang von der High-School-Mathematik verabschieden würde. Mit ein wenig Erinnerung verbrachte ich einen ganzen Morgen und zwang mich, mir etwas auszudenken Ich denke, wenn ich noch ein Mathematikstudent wäre, wenn du gut darin wärst, könntest du es wahrscheinlich in nur 10 Minuten herausbekommen, Schwitzen!

Ich weiß nicht, ob Sie sich noch an das Konzept der Tangente erinnern. Wenn wir eine Bezier-Kurve zeichnen wollen, ist M[i-1] der Startpunkt, M[i] der Endpunkt und Die anderen beiden Kontrollpunkte sind A1 und A2. Diese beiden Kontrollpunkte müssen auf der Tangente einer bestimmten Oberfläche liegen, und die Tangente kann durch drei Punkte bestimmt werden. In meinem Entwurf ist beispielsweise die obere orangefarbene Linie die Tangente Wir müssen nur auf der Tangente zwei Punkte nach Belieben auswählen und sie als Kontrollpunkte für die vordere und hintere Kurve verwenden.

Also habe ich nach langem Nachdenken eine Formel wie folgt zusammengefasst

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

Die Koeffizienten a und b sind Werte, die ich je nach der Situation, in der ich es ausprobiert habe, zufällig wähle. Es wird empfohlen, einen Wert nahe 0,3 zu nehmen und zu debuggen Versuchen Sie, den spezifischen Effekt zu erkennen, bevor Sie

Die Summe des ersten Punktes bestimmen. Der letzte Punkt ist, dass ich vor und nach dem Punkt einen zufälligen benutzerdefinierten Punkt hinzugefügt habe, da es auf diese Weise unmöglich ist, zwei Kontrollpunkte zu erhalten Punktsatz und ignorierte sie während der eigentlichen Durchquerung einfach.

Ich habe meine Ideen geklärt und die konkrete Umsetzung ist wie folgt

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 ja! Die Wirkung ist nicht schlecht, darüber muss ich mir keine Sorgen mehr machen Zeichnen Sie die Kurve und verwalten Sie unsere K-Linie. Das Bild ist einen Schritt näher

ps: Die Daten können in verschiedenen Formen organisiert werden. Es kann ein Array, ein zweistelliges Array oder ein Objekt sein Nicht der wichtigste Punkt, solange es richtig verarbeitet werden kann. Vielen Dank fürs Lesen, ich hoffe, es kann Ihnen helfen, vielen Dank für Ihre Unterstützung dieser Seite!

Weitere WeChat-Applets, die Canvas zum Erstellen von K-Line-Beispielen für detaillierte Erklärungen verwenden, finden Sie auf der chinesischen PHP-Website für verwandte Artikel!