带有笔划的圆角位图图像 [英] Bitmap image with rounded corners with stroke

问题描述

我有一张边缘清晰的图像.

I have a image with sharp edges.

tile_mode.xml

the tile_mode.xml

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/background"
    android:tileMode="repeat">
</bitmap>

back.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
       <item android:drawable="@drawable/tile_mode" />
    <item>
        <shape>
            <solid/>
            <stroke android:width="1dip" android:color="#225786" />
            <corners android:radius="10dip"/>
            <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
        </shape>
    </item> 

布局.xml

<LinearLayout
                android:id="@+id/frame1"
                android:background="@drawable/back"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">
            </LinearLayout>

我将图像设置为该布局的背景并为其绘制边框，但问题是图像是方形的，边缘锐利，而我在 xml 中绘制的边框是圆角.那么如何使图像也带有圆角?

I am setting the image as a background to this layout and drawing a border to it but the problem is the image is square with sharp edges and the border which I am drawing in the xml is rounded corners. So how to make the image also with rounded corners?

推荐答案

这是一种解决方案，您必须调整到您的主要布局背景，并在其中保留您的 imageview你想要的图片:

This is one of solution in which you have to make round to your main layout background and inside keep your imageview with your desire image:

类似于以下内容:

back.xml

这将使您的图像圆角

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
     <stroke android:width="1dp" android:color="#dd7b7a"/>
     <corners android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" 
     android:topLeftRadius="10dp" android:topRightRadius="10dp"/> 
     <solid android:color="#dd7b7a"/>
 </shape>

tile_mode.xml

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/background"
android:tileMode="repeat" />

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    >
<LinearLayout 
     android:padding="4dip"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/back"
    android:gravity="center_horizontal"
    >
<LinearLayout  
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
   android:background="@drawable/tile_mode"
    />
</LinearLayout>  
</LinearLayout>

更新

在挖掘了很多之后，我发现了一个已经发布在 stackoverflow 上的解决方案

After digging lots, I came across on of solution which already posted on stackoverflow

将图像更改为圆角

如何使 ImageView 具有圆角

第一步@

main.xml

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        tools:context=".MainActivity" >

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"

          />

    </RelativeLayout>

步骤 2@

制作一个使用画布四舍五入到位图的函数.

Make one function which make rounded to your bitmap using canvas.

public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
                .getHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xff424242;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect);
        final float roundPx = pixels;

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);

        return output;
    }

step3@

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ImageView image=(ImageView)findViewById(R.id.image);


        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.testing);


    image.setImageBitmap(getRoundedCornerBitmap(bitmap, 20));

这篇关于带有笔划的圆角位图图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！