Android实现EditText文本精准绘制至ImageView对应位置的问题

你当前的核心问题在于使用固定系数（2.1、3.1）硬编码转换屏幕坐标到Bitmap坐标，这种方式完全无法适配不同屏幕尺寸、ImageView的缩放模式，必然导致位置偏差。另外，canvas.drawText的y坐标对应文本基线，和EditText的控件位置对齐逻辑不同，这也是偏移的重要原因。

要实现文本与EditText位置精准重合，需要完成三个关键步骤：

• 计算EditText相对于ImageView的相对坐标，而非屏幕绝对坐标
• 根据ImageView的图片缩放比例，将相对坐标映射到原始Bitmap的尺寸上
• 修正文本绘制的基线位置，与EditText的文本对齐

修改后的核心代码 #

public void saveButtonClicked() {
    if (!textEditText.getText().toString().isEmpty()) {
        try {
            Bitmap bitmap = MediaStore.Images.Media.getBitmap(this.getContentResolver(), mCroppedImageUris.get(mCurrentImageIndex));
            mCropImageView.setImageBitmap(textAsBitmap(bitmap, textEditText.getText().toString(), 25f, mTextColor));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

private Bitmap textAsBitmap(Bitmap image, String text, float textSize, int textColor) {
    Paint paint = new Paint();
    paint.setTextSize(textSize);
    paint.setColor(textColor);
    paint.setAntiAlias(true);
    // 获取文本Metrics，用于调整基线位置
    Paint.FontMetrics fontMetrics = paint.getFontMetrics();

    Bitmap newMapBitmap = image.copy(Bitmap.Config.ARGB_8888, true);
    Canvas canvas = new Canvas(newMapBitmap);

    try {
        // 1. 获取EditText相对于ImageView的坐标
        int[] ivScreenLoc = new int[2];
        mCropImageView.getLocationOnScreen(ivScreenLoc);
        int[] etScreenLoc = new int[2];
        textEditText.getLocationOnScreen(etScreenLoc);

        // 计算EditText在ImageView内部的相对位置
        float relativeX = etScreenLoc[0] - ivScreenLoc[0];
        float relativeY = etScreenLoc[1] - ivScreenLoc[1];

        // 2. 获取图片在ImageView中的实际显示区域，计算缩放比例
        Drawable drawable = mCropImageView.getDrawable();
        Rect imageDisplayBounds = drawable.getBounds();
        float scaleX = (float) image.getWidth() / imageDisplayBounds.width();
        float scaleY = (float) image.getHeight() / imageDisplayBounds.height();

        // 3. 将相对坐标映射到原始Bitmap的坐标，并修正文本基线
        float bitmapX = relativeX * scaleX;
        // 把EditText顶部位置转换为drawText需要的基线y坐标
        float textTopY = relativeY * scaleY;
        float bitmapY = textTopY - fontMetrics.top;

        // 绘制文本
        canvas.drawText(text, bitmapX, bitmapY, paint);

    } catch (Exception e) {
        Log.e("textAsBitmap", e.getMessage());
    }

    // 保存文件逻辑保留
    String root = Environment.getExternalStorageDirectory().toString();
    File folder = new File(root + Constants.pdfDirectory);

    String path = mCroppedImageUris.get(mCurrentImageIndex).getPath();
    String filename = "add_text_im";
    if (path != null) {
        filename = "added_text_" + FileUtils.getFileName(path);
    }
    File file = new File(folder, filename);

    try {
        FileOutputStream out = new FileOutputStream(file);
        newMapBitmap.compress(Bitmap.CompressFormat.PNG, 90, out);
        setUpdatedImage(Uri.fromFile(file));
        out.flush();
        out.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
    return newMapBitmap;
}

关键细节说明 #

• 相对坐标计算：通过分别获取ImageView和EditText的屏幕位置，相减得到EditText在ImageView内部的相对位置，避免状态栏、导航栏的干扰。
• 缩放比例映射：利用Drawable.getBounds()获取图片在ImageView中实际显示的矩形，计算原始Bitmap与显示区域的比例，将相对坐标转换为Bitmap上的真实绘制坐标。
• 文本基线修正：通过Paint.FontMetrics获取文本的顶部偏移量，将EditText的顶部位置转换为drawText所需的基线位置，确保文本与EditText中的文字完全对齐。

内容的提问来源于stack exchange，提问作者Azat