以编程方式生成带有自定义文本的图像答案

【问题标题】：Programmatically produce image with custom text以编程方式生成带有自定义文本的图像
【发布时间】：2022-03-07 21:45:29
【问题描述】：

如何以编程方式生成包含自定义文本的图像（在 Kotlin 中）？

下图为示例：

这里的所有文本都应该可以通过编程方式编辑 - 换句话说，我想要一个可以通过编程方式编辑的模板，它可以保存为图像。

我还希望能够设置图像的宽度（同时保持质量和纵横比）。

我在 SO 上探索了许多类似问题的答案，但它们已过时/不推荐使用或不够优雅，因此请不要将此问题标记为重复。我愿意使用来自 GitHub 的库。

我尝试将文本绘制到支持位图的画布上，但文本的位置因设备而异，这并不好。

【问题讨论】：

将您的文本和图像绘制到Bitmap-支持的Canvas。
@CommonsWare 我试过这个，但问题是文本的位置因设备而略有不同。
“我试过这个”——那么您应该就您的实施提出问题寻求帮助，minimal reproducible example 显示您尝试过的内容并显示您不喜欢的结果。跨度>

标签： android image kotlin templates text

【解决方案1】：

仅使用位图是 100% 像素完美的。您可以包含其他字体以强制它在所有设备类型上都相同。它将是一个独立于任何平台环境的图片。

【讨论】：

【解决方案2】：

在 TextView 上的 XML 文件上使用以下方法

使用android:drawableTop 参数

<TextView
    android:id="@+id/textView20"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableTop="@android:mipmap/sym_def_app_icon"
    android:text="TextView"
    android:gravity="center"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

您可以使用.setText 方法自动更改文本

【讨论】：

【解决方案3】：

你想要做的事情有一个技巧，请按照以下步骤操作：

为您要保存的图像创建一个 XML 布局，这将是您可编辑的输出图像数据，例如：

注意：此方法使用 View Binding，但是，您可以使用其他访问 XML 布局视图的方法

layout_data.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:tools="http://schemas.android.com/tools"
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto">

  <FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="@dimen/custom_padding">

      <ImageView
        android:id="@+id/ivBackground"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

      <TextView
        android:id="@+id/tvCenterText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

  </FrameLayout>

</layout>

在片段中访问、编辑和保存布局的屏幕截图：

    private fun fillDataAndGetBitmap(image: Bitmap, title: String): Bitmap {
        val layoutInflater: LayoutInflater = LayoutInflater.from(requireContext())
        val layoutDataBinding = LayoutDatatBinding.inflate(layoutInflater, null, false)
        
        // Fill in your image data into layout
        layoutDataBinding.ivBackground.setImageBitmap(image)
        layoutDataBinding.tvCenterText.text = title

        // Get Bitmap of your layout
        val outputBitmap = gettBitmapFromView(layoutDataBinding.root)
        return outputBitmap
    }

    fun gettBitmapFromView(layout: View): Bitmap {
        layout.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED))
        layout.layout(0, 0, layout.measuredWidth, layout.measuredHeight)
        val bitmap = Bitmap.createBitmap(layout.measuredWidth, layout.measuredHeight, Bitmap.Config.ARGB_8888)

        val canvas = Canvas(bitmap)
        layout.layout(layout.left, layout.top, layout.right, layout.bottom)
        layout.draw(canvas)
        return bitmap
    }

现在您有了布局的位图，您可以通过意图共享它或将其保存到用户的设备。此外，您可以更改位图的质量和纵横比，但这超出了本问题的范围，您可以查看Scaled Bitmap maintaining aspect ratio。

【讨论】：