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

offsetが大体わかる! Android Jetpack Compose

はじめに

まずはまとめを書いています。
こちらを読めば目的は達成で、大体わかると思います。
もし詳細な説明が見たい場合はその先も読んでみてください。

まとめ

offset(オフセット)とは距離のことです。
例えばAndroid PathクラスのlineTo関数で線を描画する際、引数として渡す値は画面の左上を基準として進む距離です。
要するに、画面左上(0f, 0f)からx軸方向とy軸方向にどのくらい進むかを渡します。
このような距離のことをoffsetと呼び、基準は関数により様々です。

vectorのoffset

path.moveTo(
  x = 10f,
  y = 10f
)
path.lineTo(
  x = 500f,
  y = 500f
)

例に出したlineToなどのAndroidPathクラスに含まれる関数のoffsetについてです。
これらは基本的に画面の左上を基準として考えます。

例えば、moveToは画面左上(0f, 0f)を基準として右に10f、下に10fの移動をした場所に線の開始点を移動させます。
lineToは画面左上(0f, 0f)を基準として右に500f、下に500fの移動をした場所に向かって開始点から線を引きます。

この画面左上からの距離のことをoffsetと呼びます。

graphicsLayerのoffset

var offset by remember { mutableStateOf(Offset.Zero) }
val state = rememberTransformableState { _, offsetChange, _ ->
    offset += offsetChange
    Log.i("offset", offset.toString()) // offsetの値を出力
}
Box(
    modifier = Modifier
        .fillMaxSize()
        .graphicsLayer(
            translationX = offset.x,
            translationY = offset.y
        )
        .transformable(state = state),
) {
    content()
}

このoffsetは要素の中心からの距離です。
上記の場合、Boxは画面いっぱいに広がっており、中心のoffsetは(0, 0)です。
中心から右に移動するとX座標はマイナスの値を取り、左に移動するとプラスの値になります。
中心から下に移動するとY座標はマイナスの値を取り、上に移動するとプラスの値になります。

中心: (0, 0)
中心→左: (+X, 0)
中心→右: (-X, 0)
中心→上: (0, +Y)
中心→下: (0, -Y)

おわりに

※こちらは読み飛ばしても問題ありません

公式の文章を訳してみました。まだ理解が追いついていないところがあるので随時更新予定です。

Generally speaking, Offsets can be interpreted in two ways:

1. As representing a point in Cartesian space a specified distance from a separately-maintained origin. For example, the top-left position of children in the RenderBox protocol is typically represented as an Offset from the top left of the parent box.
2. As a vector that can be applied to coordinates. For example, when painting a RenderObject, the parent is passed an Offset from the screen’s origin which it can add to the offsets of its children to find the Offset from the screen’s origin to each of the children.

Because a particular Offset can be interpreted as one sense at one time then as the other sense at a later time, the same class is used for both senses.

Android公式サイトのoffsetより

一般的に、オフセットは2通りの意味を持ちます

1. 例えば、親要素の左上の角の位置から子要素の左上の角の位置の距離のように、個別に管理されている原点からの距離であるカルテシアン空間のことをオフセットと言います。
2. RenderObjectを描画する際、親は画面の原点からのオフセットが渡され、これを子要素のOffsetに加算して、各子要素の画面の原点からのオフセットを見つけることができます。このように座標を表すベクトルのことをオフセットと言います。

「オフセット」は時と場合により解釈が異なるため、Offsetクラスを両方の意味で使用しています。

筆者訳

コメント

コメントを残す

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