AndroidPathクラスの関数で描いたドラえもんのような何か
Android / Kotlin / Programming

relativeQuadraticBezierToの使い方 – Android Path, Kotlin

Android PathクラスのrelativeQuadraticBezierToの使い方をコードとキャプチャで紹介しています。

open fun relativeQuadraticBezierTo(
  dx1: Float,
  dy1: Float,
  dx2: Float,
  dy2: Float
): Unit

dx1: 制御点のx座標
dy1: 制御点のy座標
dx2: 終点のx座標
dy2: 終点のy座標

本質的には2次ベジェ曲線を描くための関数であるquadraticBezierToと変わりないのでそちらを参照ください。

quadraticBezierToとの違いは、引数が画面の左上(0f, 0f)からの距離ではなく、開始地点からの相対的(relative)な距離の値である点で異なります。
コードとキャプチャで詳しく解説します。

path.moveTo(
  x = 10f,
  y = 10f
)
path.quadraticBezierTo(
  x1 = 10f,
  y1 = 500f,
  x2 = 500f,
  y2 = 500f
)
path.relativeQuadraticBezierTo(
  dx1 = 10f,
  dy1 = 500f,
  dx2 = 500f,
  dy2 = 500f
)

開始地点からquadraticBezierToで描画をした後、relativeQuadraticBezierToで同じ描画を行なっています。
引数に指定している値は全て同じです。

これが違いであり、quadraticBezierToの引数には画面左上から見てx軸方向とy軸方向にどれくらい移動をするかを指定します。
一方で、relativeQuadraticBezierToは開始点(上記例の場合は(500f, 500f))から見ての移動距離を指定します。

(dx1, dy1)は(10f, 500f)であるため、quadraticBezierToの終点でありrelativeQuadraticBezierToの描画開始点(500f, 500f)から右に10fの移動、下に500fの移動をした場所になります。

(dx2, dy2)は(500f, 500f)であるため、描画開始点(500f, 500f)から右に500fの移動、下に500fの移動をした場所になります。

ちなみに、仮にrelativeQuadraticBezierToをquadraticBezierToに変更するとこのようになります。

path.moveTo(
  x = 10f,
  y = 10f
)
path.quadraticBezierTo(
  x1 = 10f,
  y1 = 500f,
  x2 = 500f,
  y2 = 500f
)
// ---quadraticBezierToに変更---
// path.relativeQuadraticBezierTo(
//   dx1 = 10f,
//   dy1 = 500f,
//   dx2 = 500f,
//   dy2 = 500f
// )
// ----------------------------
path.quadraticBezierTo(
  x1 = 10f,
  y1 = 500f,
  x2 = 500f,
  y2 = 500f
)

quadraticBezierToに変更したことにより、引数の値が画面左上からの距離になってしまいます。
それにより制御点が描画開始点より左側に設定され、終点が開始点と同じ位置に設定されます。
これにより奇妙な描画になります。


質問等がありましたら、お気軽にコメントまでお願いします。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です