从布局中获取位图会使布局不完整

Posted 2023-04-18

【中文标题】从布局中获取位图会使布局不完整

【英文标题】：Getting bitmap from layout gets the layout incomplete

【发布时间】：2021-03-06 13:37:36

【问题描述】：

我正在使用一个自定义的 TextView，它可以垂直绘制文本，一个来自 MPandroidCharts 库的图表和一个位于图表顶部的 textview。虽然它在屏幕上看起来很棒，但当我尝试获取它的位图以便可以将其作为图像共享时，获得的垂直文本视图并未完全绘制。

我的视图 XML 如下：

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_
        android:layout_
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:id="@+id/clWeatherCharts">
        <TextView
            android:id="@+id/txtWeatherTitle"
            android:layout_
            android:layout_
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_margin="@dimen/margin_16dp"
            android:text="@string/temperature_registers"
            android:textAlignment="center"/>

            <com.shadows.naylapp.utils.VerticalTextView
                android:id="@+id/llYEnvironment"
                android:textColor="@color/colorBlack"
                android:textSize="14sp"
                android:layout_
                android:layout_
                android:text="Temperatura Superficial del Mar (Cº)"
                android:layout_margin="@dimen/padding_8dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="@id/lineWeatherChart"
                app:layout_constraintBottom_toBottomOf="@id/lineWeatherChart"
                />

        <com.github.mikephil.charting.charts.LineChart
            android:id="@+id/lineWeatherChart"
            android:layout_marginTop="@dimen/margin_16dp"
            android:layout_
            android:layout_
            app:layout_constraintEnd_toStartOf="@id/llYWindEnvironment"
            app:layout_constraintStart_toEndOf="@id/llYEnvironment"
            app:layout_constraintTop_toBottomOf="@id/txtWeatherTitle" />
        <LinearLayout
            android:id="@+id/llYWindEnvironment"
            android:layout_
            android:layout_
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@id/lineWeatherChart"
            app:layout_constraintBottom_toBottomOf="@id/lineWeatherChart">

            <com.shadows.naylapp.utils.VerticalTextView
                android:textColor="@color/colorBlack"
                android:textSize="14sp"
                android:layout_
                android:layout_
                android:text="Velocidad del Viento (Km/hr)"
                />
        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

我正在使用扩展函数来创建位图，如下所示：

fun View.getBitmapFromView(): Bitmap? 
val bitmap = Bitmap.createBitmap(this.width, this.height, Bitmap.Config.ARGB_8888)
val canvas = Canvas(bitmap)
 canvas.drawColor(Color.WHITE)
 this.draw(canvas)
return bitmap

我这样称呼它：clWeatherCharts.getBitmapFromView()

以下是应用程序上的屏幕图像

以下是裁剪垂直文本视图的位图：

垂直文本视图的代码如下：

class VerticalTextView(context: Context, attrs: AttributeSet) : AppCompatTextView(context, attrs) 
private val topDown = gravity.let  g ->
    !(Gravity.isVertical(g) && g.and(Gravity.VERTICAL_GRAVITY_MASK) == Gravity.TOP)

private val metrics = BoringLayout.Metrics()
private var padLeft = 0
private var padTop = 0

private var layout1: Layout? = null

override fun setText(text: CharSequence, type: BufferType) 
    super.setText(text, type)
    layout1 = null


private fun makeLayout(): Layout 
    if (layout1 == null) 
        metrics.width = height
        paint.color = currentTextColor
        paint.drawableState = drawableState
        layout1 = BoringLayout.make(text, paint, metrics.width, Layout.Alignment.ALIGN_NORMAL, 2f, 0f, metrics, false, TextUtils.TruncateAt.MIDDLE, height - compoundPaddingLeft - compoundPaddingRight)
        padLeft = compoundPaddingLeft
        padTop = extendedPaddingTop
    
    return layout1!!


override fun onDraw(c: Canvas) 
    //      c.drawColor(0xffffff80); // TEST
    if (layout == null)
        return
    c.withSave 
        if (topDown) 
            val fm = paint.fontMetrics
            translate(textSize - (fm.bottom + fm.descent), 0f)
            rotate(90f)
         else 
            translate(textSize, height.toFloat())
            rotate(-90f)
        
        translate(padLeft.toFloat(), padTop.toFloat())
        makeLayout().draw(this)
    

我已经尝试在文本视图上添加一些填充，或者将文本居中，并且在获取位图时它会变得更加裁剪。

感谢任何帮助！

【参考方案1】：

解决方案

您可以遍历 ConstraintLayout 中的每个子项，然后使用 Bitmap.drawBitmap(Bitmap, int, int, Paint) 绘制子项的内容。

// Get bitmap from a View
fun View.getBitmapFromView(): Bitmap? 
    val bitmap = Bitmap.createBitmap(this.width, this.height, Bitmap.Config.ARGB_8888)
    val canvas = Canvas(bitmap)
    draw(canvas)
    return bitmap


// Get bitmap from a ConstraintLayout
fun ConstraintLayout.getBitmapFromView(): Bitmap 
    val bitmap = Bitmap.createBitmap(this.width, this.height, Bitmap.Config.ARGB_8888)
    val canvas = Canvas(bitmap)
    canvas.drawColor(Color.WHITE)

    for (i in 0 until childCount) 
        val child = getChildAt(i)
        val childBitmap = child.getBitmapFromView()
        if (childBitmap != null) 
            canvas.drawBitmap(childBitmap, child.left.toFloat(), child.top.toFloat(), null)
        
    

    return bitmap

从代码中使用

clWeatherCharts.getBitmapFromView()

【参考方案2】：

VerticalTextView.kt的onDraw()函数是

override fun onDraw(c: Canvas) 
    //      c.drawColor(0xffffff80); // TEST
    if (layout == null)
        return
    c.withSave 
        if (topDown) 
            val fm = paint.fontMetrics
            translate(textSize - (fm.bottom + fm.descent), 0f)
            rotate(90f)
         else 
            translate(textSize, height.toFloat())
            rotate(-90f)
        
        translate(padLeft.toFloat(), padTop.toFloat())
        makeLayout().draw(this)
    

translate(textSize, height.toFloat()) 中的高度是画布的高度，而不是视图的高度（应该是）。为什么？因为c.withSave 中的this 是画布而不是自定义视图。这导致自定义视图发生变化。这些类型的问题很难追踪。

将其更改为以下内容以获取视图的高度（不包括边距），一切都会起作用。

translate(textSize, [e-mail]())

【讨论】：

非常感谢！每次我使用画布时，我都会对它的工作原理以及参数所指的内容感到有些困惑！