Android View 與可組合項相比如何

Question

在視圖世界中，我們可以使用 View.draw(canvas) 在我們的 Canvas（可能連接到位圖）上繪制視圖。 但是在這里，我們如何才能實現同樣的目標。

我們有一個 draw 修改器，但它沒有方法 draw(canvas)

更新

我需要的？

我想通過將可組合項 function 包裝在 Blur Composable 中來對其進行模糊處理。 假設 xyz() 是任意隨機組合 function。

 @Composable
fun xyz(){
// compose logic.
}

我想創建另一個名為 Blur() 的樂趣。

@Composable
fun Blur(content: @Composable() -> Unit){
//Blur logic.
}

Blur 可組合項將任何可組合項 function（比如 xyz()）作為輸入並對其進行模糊處理。

我將如何實施它？

我想我會采用與 BlurView（一個視圖模糊庫）相同的方法。

• 模糊視圖是一種框架布局。
• 它模糊了它的內容。
• BlurView首先創建內容的bitmap； 模糊它； 然后繪制它。
• 用於創建內容的 function teh bitmap 是view.draw(canvas: Canvas)

為什么我需要這個？

我想在撰寫中創建我的 BlurView 版本。 我知道在 compose 中有一個 Modifier.blur； 但由於這僅在 api 31（我猜）中受支持，所以我不能在我的項目中使用它。

Answer 1

在Compose中，有一個Canvas可組合 function 可用於DrawScope 。 你可以利用它來畫畫。

DrawScope 有drawImage function 來獲取ImageBitmap 。 因為你有 Bitmap 需要使用Bitmap.asImageBitmap()轉換它

Answer 2

正如另一個回復中所述，您可以創建一個使用 canvas 的可組合項，這將使您可以訪問許多與常規視圖 canvas 中相同的繪圖方法。

@Composable
fun MyCanvasComposable(
    data: List<Int>, //some example data to pass in
    modifier: Modifier = Modifier
) {
        Canvas() {
            .. content here     
        }
}

在 canvas 中，您將進入 DrawScope，這將允許您像以前一樣進行 canvas 繪圖。

假設我們將繪圖邏輯拉入擴展方法，我將添加一些示例。

例子：

繪制一些文本

internal fun DrawScope.plotXAxis(    
        //some custom rendering here followed by this method    
        drawPath(path, pathBrush, 0.5f)
}

繪制路徑

internal fun DrawScope.plotXAxis( //some custom rendering here followed by this method drawPath(path, pathBrush, 0.5f) }

為了將您的 canvas 放在另一個布局上，您可以使用任何合適的布局修飾符調用MyCanvasComposable 。

如果您嘗試在 canvas 之上渲染其他可組合項，您的做法是將整個內容包裝在一個框中，並在 canvas 繪制之前或之后添加視圖。

例子：

 val myPainter = painterResource(id = R.drawable.src_image) Box { Image( painter = myPainter ) Canvas() {.. content here.. } Text( "some text") }

在上面的示例中，您也可以只調用MyCanvasComposable而不是Canvas() 。

另請注意，圖像將在 canvas 之前呈現，文本將在之后呈現，也就是說在 canvas 之上。

Answer 3

如果你想要一個Bitmap已經從你的視圖 function 或像這里提到的 RenderScript 這樣的方法模糊，並在它上面繪制地標或形狀，你可以使用androidx.compose.ui.graphics.Canvas而不是androidx.compose.foundation.Canvas

val option = BitmapFactory.Options()
option.apply {
    inPreferredConfig = Bitmap.Config.ARGB_8888
    inMutable = true
}

val imageBitmap = RenderEffect.createBitmapEffect(Bitmap bitmap)

對於 api 31-

private Bitmap blur(Bitmap original, float radius) {
  Bitmap bitmap = Bitmap.createBitmap(
      original.getWidth(), original.getHeight(),
      Bitmap.Config.ARGB_8888);

  RenderScript rs = RenderScript.create(this);

  Allocation allocIn = Allocation.createFromBitmap(rs, original);
  Allocation allocOut = Allocation.createFromBitmap(rs, bitmap);

  ScriptIntrinsicBlur blur = ScriptIntrinsicBlur.create(
      rs, Element.U8_4(rs));
  blur.setInput(allocIn);
  blur.setRadius(radius);
  blur.forEach(allocOut);

  allocOut.copyTo(bitmap);
  rs.destroy();
  return bitmap;
} 

我現在不在我的電腦上，當我有空時我會把它添加為修改器。

// 🔥 This is a function that returns Canvas which can be used to draw on an
// ImageBitmap that was sent as param. ImageBitmap that returned can be
// be used to display on Image or can be saved to a physical file.

val canvas: androidx.compose.ui.graphics.Canvas = Canvas(imageBitmap)

val paint = remember {
    Paint().apply {
        style = PaintingStyle.Stroke
        strokeWidth = 10f
        color = Color(0xff29B6F6)

    }
}

canvas.drawRect(0f, 0f, 200f, 200f, paint = paint)
canvas.drawCircle(
    Offset(
        imageBitmap.width / 2 - 75f,
        imageBitmap.height / 2 + 75f
    ), 150.0f, paint
)


// This bitmap has image and the drawing from canvas
Image(bitmap = imageBitmap, contentDescription = null)