Android：组合文本和图像时文本大小发生变化

Question

我有一个textView (mTextOnImage) 和 一个imageView (mImageView) 。
我通过使用函数combineImages将它们组合起来，但是当我组合时，文本大小发生了改变。

//generate bitmap of textView by using getDrawingCache()
Bitmap bmp = Bitmap.createBitmap(mTextOnImage.getDrawingCache());

//getting image as bitmap from image view ( to use as background to combine )
BitmapDrawable drawable = (BitmapDrawable) mImageView.getDrawable();
Bitmap bitmapBackground = drawable.getBitmap();

//combining two bitmaps
Bitmap combined = combineImages(bitmapBackground, bmp);

这是combineImages函数。

 public Bitmap combineImages(Bitmap background, Bitmap foreground) {


        Bitmap cs;
        cs = Bitmap.createBitmap(background.getWidth(), background.getHeight(), Bitmap.Config.ARGB_8888);

        //creating canvas by background image's width and height
        Canvas comboImage = new Canvas(cs);
        background = Bitmap.createScaledBitmap(background, background.getWidth(), background.getHeight(), true);

        //Drawing background to canvas
        comboImage.drawBitmap(background, 0, 0, null);

        //Drawing foreground (text) to canvas            
        comboImage.drawBitmap(foreground, mTextOnImage.getLeft(),mTextOnImage.getTop(), null);

        return cs;
    }

位图已成功合并，但文本大小已更改。
这是我设置文本大小的方式。

mTextOnImage.setTextSize(getResources().getDimensionPixelSize(R.dimen.myFontSize));

在字符串资源中，

<resources>
    <dimen name="myFontSize">40sp</dimen>
</resources>

我从设备相册中获取背景图像，因此其分辨率（图像尺寸）可能会不同。
我是否漏掉了任何计算？

另外，textView (mTextOnImage) 可以拖动，因此当将这两个组合在一起时，我也希望能正确设置位置。

- zey

---

https://dev59.com/Y3A75IYBdhLWcg3wqK7_ - AskNilesh

@Nilu，也许这个例子是将图像添加到“文本字符串”中。但我需要的是像叠加那样将文本和图像组合在一起。就像这个图片。 - zey

你尝试过 comboImage.drawBitmap(background, new Matrix(), null) 吗？ - azizbekian

@azizbekian，是的，我有，结果相同... - zey

Answer 1

“看到您的布局XML和几张图片会很有帮助。如果没有这些，我建议您检查一下是否在显示时图像被缩小了。更新：在查看更长的解决方案之前，请尝试更改文本大小的设置方式。默认值是“sp”，而您正在使用“px”。”

mTextOnImage.setTextSize(TypedValue.COMPLEX_UNIT_PX, getResources().getDimension(R.dimen.myFontSize))

如果那样不起作用，尝试以下方法：

我拿了你的代码并进行了一些更改，以尝试再现问题。在布局中，我显示了一个文本视图（高度和宽度= wrap_content）和一个非调整大小的图像。在这两个视图下面，我显示了合并的视图。我将合并视图的文本定位在顶部，并使用白色背景进行了快速比较。这是结果：

这两个“Hello World！”对我来说看起来是一样的。这让我相信你的组合图像视图正在被拉伸或缩小，在此过程中，你的文本大小也会改变，因为它只是图像的一部分。

以下是生成上述图像的代码。该图像只是一个“png”图形。

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private TextView mTextOnImage;
    private ImageView mImageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTextOnImage = findViewById(R.id.textOnImage);
        mImageView = findViewById(R.id.imageView);
        mTextOnImage.post(new Runnable() {
            @Override
            public void run() {
                //generate bitmap of textView by using getDrawingCache()
                mTextOnImage.buildDrawingCache();
                Bitmap bmp = Bitmap.createBitmap(mTextOnImage.getDrawingCache());

//getting image as bitmap from image view ( to use as background to combine )
                mImageView.buildDrawingCache();
                BitmapDrawable drawable = (BitmapDrawable) mImageView.getDrawable();
                Bitmap bitmapBackground = drawable.getBitmap();

//                Bitmap bitmapBackground = mImageView.getDrawingCache();

//combining two bitmaps
                Bitmap combined = combineImages(bitmapBackground, bmp);
                ((ImageView) findViewById(R.id.imageCombined)).setImageBitmap(combined);
            }
        });
    }

    public Bitmap combineImages(Bitmap background, Bitmap foreground) {


        Bitmap cs;
        cs = Bitmap.createBitmap(background.getWidth(), background.getHeight(), Bitmap.Config.ARGB_8888);

        //creating canvas by background image's width and height
        Canvas comboImage = new Canvas(cs);
        background = Bitmap.createScaledBitmap(background, background.getWidth(), background.getHeight(), true);

        //Drawing background to canvas
        comboImage.drawBitmap(background, 0, 0, null);

        //Drawing foreground (text) to canvas
//        comboImage.drawBitmap(foreground, mTextOnImage.getLeft(),mTextOnImage.getTop(), null);
        comboImage.drawBitmap(foreground, (mImageView.getWidth() - foreground.getWidth()) / 2,
                              0, null);

        return cs;
    }
}   

activity_main.xml

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        app:layout_constraintBottom_toTopOf="@+id/textOnImage"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed"
        app:srcCompat="@drawable/sky" />

    <TextView
        android:id="@+id/textOnImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:text="Hello World!"
        android:textColor="@android:color/holo_red_dark"
        android:textSize="40sp"
        app:layout_constraintBottom_toTopOf="@+id/imageCombined"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <ImageView
        android:id="@+id/imageCombined"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textOnImage" />

</android.support.constraint.ConstraintLayout>

- Cheticamp

---

@zey 在调用 getResources().getDimension(R.dimen.myFontSize) 时，TypedValue.COMPLEX_UNIT_PX - 40sp 被转换为 px。 - Cheticamp