如何在图像上绘制文本并将其显示在网格中？

Question

我正在使用 SqaureImageView class 作为：

    public class SqaureImageView extends AppCompatImageView {

    int widthMeasureSpec;
    int heightMeasureSpec;

    public SqaureImageView(Context context) {
        super(context);
    }

    public SqaureImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SqaureImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
        this.widthMeasureSpec=widthMeasureSpec;
        this.heightMeasureSpec=heightMeasureSpec;
    }


    public int getWidthMeasureSpec(){
        return widthMeasureSpec;
    }

    public int getHeightMeasureSpec(){
        return heightMeasureSpec;
    }
}

我在 arrayAdapter 中使用这个 SquareImageView，如下所示：

public class GridPostAdapter extends ArrayAdapter<String> {

    private Context mContext;
    private LayoutInflater mInflater;
    private int layoutResource;
    private String mAppend;
    private ArrayList<String> imgColor;
    private ArrayList<String> imgCaption;




    public GridPostAdapter(Context context, int layoutResource, String append, ArrayList<String> imgColor, ArrayList<String> imgCaption) {
        super(context, layoutResource, imgColor);
        mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        mContext = context;
        this.layoutResource = layoutResource;
        mAppend = append;
        this.imgColor = imgColor;
        this.imgCaption = imgCaption;

    }

    private static class ViewHolder {
        SqaureImageView image;
        ProgressBar mProgressBar;
    }


    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {

        /*
        Viewholder build pattern (Similar to recyclerview)
         */
        final ViewHolder holder;
        if (convertView == null) {
            convertView = mInflater.inflate(layoutResource, parent, false);
            holder = new ViewHolder();
            holder.mProgressBar = (ProgressBar) convertView.findViewById(R.id.gridImageProgressbar);
            holder.image = (SqaureImageView) convertView.findViewById(R.id.gridImageView);
            holder.image.setBackgroundColor(Integer.parseInt(imgColor.get(position)));


            Bitmap bm = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.ic_blank);
            Bitmap newImage = bm.copy(Bitmap.Config.ARGB_8888, true);





            Canvas  c = new Canvas(newImage);
            c.drawBitmap(newImage, 0, 0, null);

            Paint paint = new Paint();
            paint.setColor(Integer.parseInt(String.valueOf(R.color.black)));
            paint.setStyle(Paint.Style.FILL);
            paint.setTextSize(20);

            c.drawText(imgCaption.get(position), 0, 5, paint);

            holder.image.setImageBitmap(newImage);

            convertView.setTag(holder);



        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        ImageLoader imageLoader = ImageLoader.getInstance();

        //https://firebasestorage.googleapis.com/v0/b/projectx-971e6.appspot.com/o/photos%2Fusers%2F8QemZCZPRabTR88Vkpv1yDXHLEn1%2Fphoto1?alt=media&token=124af00f-c02b-4785-a6d5-ecb042dd18d2
        imageLoader.displayImage("", holder.image, new ImageLoadingListener() {
            @Override
            public void onLoadingStarted(String imageUri, View view) {
                if(holder.mProgressBar != null){
                    holder.mProgressBar.setVisibility(View.VISIBLE);
                }
            }

            @Override
            public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
                if(holder.mProgressBar != null){
                    holder.mProgressBar.setVisibility(View.GONE);
                }
            }

            @Override
            public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
                if(holder.mProgressBar != null){
                    holder.mProgressBar.setVisibility(View.GONE);
                }
            }

            @Override
            public void onLoadingCancelled(String imageUri, View view) {
                if(holder.mProgressBar != null){
                    holder.mProgressBar.setVisibility(View.GONE);
                }
            }
        });



        return convertView;
    }
}

我有一个 UniversalImageLoader class 用于加载图像：

public class UniversalImageLoader {

    private static final int defaultImage = R.drawable.ic_android;
    private static final int defaultImageBlank = R.drawable.ic_blank;

    private Context mContext;

    public UniversalImageLoader(Context context) {
        mContext = context;
    }

    public ImageLoaderConfiguration getConfig(){
        DisplayImageOptions defaultOptions = new DisplayImageOptions.Builder()
                .showImageOnLoading(defaultImage)
                .showImageForEmptyUri(defaultImageBlank)
                .showImageOnFail(defaultImage)
                .considerExifParams(true)
                .cacheOnDisk(true).cacheInMemory(true)
                .cacheOnDisk(true).resetViewBeforeLoading(true)
                .imageScaleType(ImageScaleType.EXACTLY)
                .displayer(new FadeInBitmapDisplayer(300)).build();

        ImageLoaderConfiguration configuration = new ImageLoaderConfiguration.Builder(mContext)
                .defaultDisplayImageOptions(defaultOptions)
                .memoryCache(new WeakMemoryCache())
                .diskCacheSize(100 * 1024 * 1024).build();

        return configuration;
    }

    /**
     * this method can be sued to set images that are static. It can't be used if the images
     * are being changed in the Fragment/Activity - OR if they are being set in a list or
     * a grid
     * @param imgURL
     * @param image
     * @param mProgressBar
     * @param append
     */
    public static void setImage(String imgURL, ImageView image, final ProgressBar mProgressBar, String append){

        ImageLoader imageLoader = ImageLoader.getInstance();
        imageLoader.displayImage(append + imgURL, image, new ImageLoadingListener() {
            @Override
            public void onLoadingStarted(String imageUri, View view) {
                if(mProgressBar != null){
                    mProgressBar.setVisibility(View.VISIBLE);
                }
            }

            @Override
            public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
                if(mProgressBar != null){
                    mProgressBar.setVisibility(View.GONE);
                }
            }

            @Override
            public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
                if(mProgressBar != null){
                    mProgressBar.setVisibility(View.GONE);
                }
            }

            @Override
            public void onLoadingCancelled(String imageUri, View view) {
                if(mProgressBar != null){
                    mProgressBar.setVisibility(View.GONE);
                }
            }
        });
    }

我想在每张图片上绘制文字并在网格视图中显示。使用这个我只能看到彩色图像，而没有在它们上面绘制文本。我是 android 的新手，我不确定如何使用位图和 canvas 在图像上绘制文本。请查看我的代码并指出 modifications/improvements.

Answer 1

我使用了一种功能，可以将我的图像 + 文本转换为位图。然后我就可以在网格视图中轻松显示该位图图像。这是我使用 gridview 的输出。

//create bitmap from view and returns it
public static Bitmap getBitmapFromView(View view) {
    //Define a bitmap with the same size as the view
    Bitmap returnedBitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_8888);
    //Bind a canvas to it
    Canvas canvas = new Canvas(returnedBitmap);
    //Get the view's background
    Drawable bgDrawable = view.getBackground();
    if (bgDrawable != null) {
        //has background drawable, then draw it on the canvas
        bgDrawable.draw(canvas);
    } else {
        //does not have background drawable, then draw white background on the canvas
        canvas.drawColor(Color.WHITE);
    }
    // draw the view on the canvas
    view.draw(canvas);
    //return the bitmap
    return returnedBitmap;
}

这里 view 是我的 RelativeLayout，它包含图像视图和编辑文本。希望我已经很好地理解了你的问题并且你从中得到了提示。

如何在图像上绘制文本并将其显示在网格中？

How to draw text on image and show it in a grid?

android

gridview

android-layout

universal-image-loader