graphicsLayer()

Prerequisites:

注意順序

graphicsLayer在background之前。

Modifier
  .size(100.dp)
  .graphicsLayer {
    translationX = 20.dp.toPx()
    translationY = 30.dp.toPx()
  }
  .background(Color.Blue)

translation 移動

  • translationX 向X軸(右左)移動
  • translationY 向Y軸(上下)移動

移動的數值，請參考offset

正負數 x y
正 向右 向下
負 向左 向上

translation 參數px

下方的數值要轉成px

Modifier.graphicsLayer {
    translationX = 數值.dp.toPx()
    translationY = 數值.dp.toPx()    
}
Modifier.graphicsLayer {
    translationX = 20.dp.toPx()
    translationY = 30.dp.toPx()    
}

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@Composable
fun TranslateExample() {
  Box(
    modifier = Modifier
      .size(100.dp)
      .graphicsLayer {
        translationX = 20.dp.toPx()
        translationY = 30.dp.toPx()
      }
      .background(Color.Blue)
      .border(2.dp,Color.Red)
  ) {
    Text("Scale 1.0", color = Color.White)
  }
}

rotation

  • rotationX 繞 X 軸旋轉
  • rotationY 繞 Y 軸旋轉
  • rotationZ 正常平面旋轉

角度數值是浮點數，後面要加上f

Modifier.graphicsLayer {
    rotationX = 45f
}

rotationZ 平面旋轉角度:

  • 0f: 無旋轉
  • 45f: 向右旋轉45度
  • -45f: 向左旋轉45度
  • 90f: 向右旋轉90度
  • -90f: 向左旋轉90度
  • 180f: 上下顛倒(upside down)
  • 270f: 向右旋轉270度

rotationX
img

rotationY
img

rotationZ
img

X軸旋轉

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@Composable
fun TranslateExample() {
  Box(
    modifier = Modifier
      .size(300.dp)
      .graphicsLayer {
        rotationX = 45f
      }
      .background(Color.Blue)
      .border(2.dp,Color.Red)
  ) {
    Text("Scale 1.0", color = Color.White)
  }
}

向左平面旋轉10度。
img

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@Composable
fun TranslateExample() {
  Box(
    modifier = Modifier
      .size(300.dp)
      .graphicsLayer {
        rotationZ = -10f
      }
      .background(Color.Blue)
      .border(2.dp,Color.Red)
  ) {
    Text("Scale 1.0", color = Color.White)
  }
}

TransformOrigin 設定原點座標

預設原點是在垂直置中。

X軸

  • 0.0 左邊
  • 0.5 中間
  • 1.0 右邊

Y軸

  • 0.0 最上面，頂部
  • 0.5 垂直置中
  • 1.0 最下面，底部

語法

Modifier.graphicsLayer {
    transformOrigin = TransformOrigin(X軸浮點數f,Y軸浮點數f)
}

Modifier.graphicsLayer {
    transformOrigin = TransformOrigin(0.5f,0.5f)
}

XY軸

  • TransformOrigin(0.0f,0.0f) 原點在左上角
  • TransformOrigin(1.0f,0.0f) 原點在右上角
  • TransformOrigin(0.5f,0.5f) 原點垂直置中
  • TransformOrigin(0.0f,1.0f) 原點在左下角
  • TransformOrigin(1.0f,1.0f) 原點在右下角

程式碼

以下範例，原點設為最左上角，從左上角向右旋轉10度。
img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@Composable
fun graphicExample() {
  Box(
    modifier = Modifier
      .size(300.dp)
      .graphicsLayer {
        transformOrigin = TransformOrigin(0.0f,0.0f)
        rotationZ = 10f
      }
      .background(Color.Blue)
      .border(2.dp,Color.Red)
  ) {
    Text("Scale 1.0", color = Color.White)
  }
}

放大縮小

  • scaleX 長度放大縮小
  • scaleY 高度放大縮小

設定的數值請參考scale

語法

Modifier.graphicsLayer {
    scaleX = 浮點數f
    scaleY = 浮點數f
}
Modifier.graphicsLayer {
    scaleX = 2.0f
    scaleY = 2.0f
}

img

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

@Composable
fun graphicExample() {
  Column {
    // 原本大小
    Box(
      modifier = Modifier
        .size(100.dp)
        .background(Color.Blue)
        .border(2.dp,Color.Red)
    ) {
      Text("Scale", color = Color.White)
    }
    // X軸，長度變2倍大
    Box(
      modifier = Modifier
        .size(100.dp)
        .graphicsLayer {
          transformOrigin = TransformOrigin(0.0f, 0.0f)
          scaleX = 2.0f
        }
        .background(Color.Blue)
        .border(2.dp,Color.Red)
    ) {
      Text("ScaleX 2.0f", color = Color.White)
    }
    // Y軸，高度變2倍大
    Box(
      modifier = Modifier
        .size(100.dp)
        .graphicsLayer {
          transformOrigin = TransformOrigin(0.0f, 0.0f)
          scaleY = 2.0f
        }
        .background(Color.Blue)
        .border(2.dp,Color.Red)
    ) {
      Text("ScaleY 2.0f", color = Color.White)
    }
    // X軸，長度變2倍大
    // Y軸，高度變1.5倍大
    Box(
      modifier = Modifier
        .size(100.dp)
        .graphicsLayer {
          transformOrigin = TransformOrigin(0.0f, 0.0f)
          scaleX = 2.0f
          scaleY = 1.5f
        }
        .background(Color.Blue)
        .border(2.dp,Color.Red)
    ) {
      Text("ScaleX = 2.0f ScaleY=1.5f", color = Color.White)
    }
  }
}

移動 旋轉 放大 原點 透明度

graphics layer可以同時設定多個設定。

img

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

@Preview(showBackground = true, widthDp = 300, heightDp = 400)
@Composable
fun GreetingPreview2() {
  graphicExample1()
}

@Composable
fun graphicExample1() {
  Column {
    Box(
      modifier = Modifier
        .size(100.dp)
        .graphicsLayer {
          transformOrigin = TransformOrigin(0.0f, 0.0f)
          translationX = 20.dp.toPx()
          translationY = 30.dp.toPx()
          rotationZ = 10f
          scaleX = 1.5f
          scaleY = 2.0f
          alpha = 0.5f
        }
        .background(Color.Blue)
        .border(2.dp, Color.Red)
    ) {
      Text("Scale", color = Color.White)
    }
  }
}

results matching ""

    No results matching ""