Canvas を使用して K ラインのサンプルを作成する WeChat アプレットの詳細な説明

前書き:

私たちの目標は、明らかな転換点のある折れ線ではなく、移動平均などを表す滑らかな曲線を作成することです。したがって、API の探索を続ける必要があります。 Canvas API には、曲線を描画できる 2 つの

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

があり、両方の API がベジェ曲線を通るパスを描画することがわかりました。幸いなことに、私は PS を学習していたときに、ベジェ曲線の特定のパフォーマンスにもある程度習熟していたため、複数の点で構成される曲線のパスを決定するには、曲線を制御するために各転換点に 2 つの制御点が必要であることを知っていました。 . パフォーマンス

そして、カーブの始点と終点には、制御点は 1 つだけあります。したがって、始点と終点を描画する場合はquadraticCurveToを使用し、中間点を描画する場合はbeZierCurveToを使用する必要があります。

現在の問題は、通過する既知のポイントを介してコントロール ポイントをどのように計算するかということです。

効果的な公式を見つけるために、私は製図を始めました。私にしか分からない原稿を描きました。

長年の高校数学に別れを告げることになるとは思っていませんでしたが、少しの記憶を頼りに、午前中ずっと時間をかけて、自分がまだ現役だったらと考えて式を考え出しました。高校数学レベルなら10分もかからないくらいの戦いになりました、汗！

接線の概念をまだ覚えているかどうかはわかりませんが、ベジェ曲線を描きたい場合、M[i-1] が始点、M[i] が終点、その他の 2 つです。制御点は A1 と A2 です。これら 2 つの制御点は特定のサーフェスの接線上にある必要があります。たとえば、私のドラフトでは、上のオレンジ色の線が接線になります。この接線上にあればよいので、任意の 2 点を選択し、それぞれ前後の曲線の制御点として使用するだけです

そこで、長い間考えた結果、次のような式をまとめました

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 程度の値を使用してデバッグすることをお勧めします。この方法では最後のポイントを取得できないため、ポイント収集の前後に設定します。それぞれに自由にカスタマイズされたポイントが追加されます。実際の走査では無視してください。

アイデアを整理し、具体的な実装は次のとおりです

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

そうそう、効果は悪くなく、今後曲線を描くことを心配する必要がなくなり、管理に一歩近づきました。 K 線グラフ

ps: データの構成形式はさまざまで、配列、2 桁の配列、またはオブジェクトにすることができます。処理できる限り、これは最も重要な点ではありません。正しく

読んでいただきありがとうございます、皆さんのお役に立てれば幸いです、このサイトのサポートにご協力いただきありがとうございます!

その他の WeChat ミニ プログラムについては、PHP 中国語 Web サイトにある、キャンバスを使用した K ラインのサンプルの作成に関する関連記事に注目してください。