如何从 FirebaseStorage 检索图像并将其显示在 Canvas 中?

How do I retrieve an image from FirebaseStorage and show it in a Canvas?

我的应用程序将图像存储在 FirebaseFirestore 中;它们可以是 jpg 或 png 格式。我有一个 Activity 在 Canvas 上绘制网格,我想将图像放入网格中。整个网格 + 图像称为 ImageGrid,定义如下(为了便于阅读,省略了一些内容):

    public class ImageGrid extends View {

        private final Context mContext;
        private int mNumRows, mNumCols;
        private float canvas_height, canvas_width;
        private final Paint mPaint;
        private float image_cell_size;
        private String[][] image_urls;

        public ImageGrid(Context thisContext, AttributeSet attrs) {
            super(thisContext, attrs);

            mContext = getContext();
            mPaint = new Paint();

        }

        public void setSize(int numRows, int numCols) {
            mNumRows = numRows;
            mNumSts = numCols;
            invalidate();
        }

        public void setImages(String[][] images) {
            image_urls = images;
        }

        // DRAW GRID FUNCTIONS set up the grid and add the images

        protected void onDraw(Canvas canvas) {

            canvas_height = canvas.getHeight();
            canvas_width = canvas.getWidth();

            get_cell_size();    // Get the size of the cells
            // image_cell_size has now been set by get_cell_size

            // Draw axes & chart
            draw_images(canvas);      // Draw the images

        }

        // Draw images
        private void draw_images(final Canvas canvas) {

          if (mChart == null) return;

          final Resources resources = mContext.getResources();
          FirebaseStorage mStorage = FirebaseStorage.getInstance();
          final StorageReference mStorageRef = mStorage.getReference();

          for (int rr = 0; rr < mNumRows; rr++) {

            for (int cc = 0; cc < mNumSts; cc++) {

              String drawableUrl = image_urls[rr][cc];

              if(drawableUrl != null) {

* THIS IS WHERE I NEED TO GET THE IMAGE AND DISPLAY IT *

              }
            }
          }
        }
    }

所以,在网上搜索如何获取图像然后在 Canvas 上绘制之后,我有这个:

mStorageRef.child(drawableUrl)
  .getDownloadUrl()
  .addOnSuccessListener(
    new OnSuccessListener<Uri>() {
      public void onSuccess(Uri uri) {    
        Glide.with(getContext())
             .asBitmap()
             .load(uri)
             .into(new CustomTarget<Bitmap>() {
               public void onResourceReady(
                 Bitmap resource,
                 Transition<? super Bitmap> transition) {
                   Drawable d = new BitmapDrawable(getResources(), resource);
                   d.setBounds(
                       cc * cell_size, 
                       rr * cell_size,
                       (cc + 1)*cell_size,
                       (rr + 1) * cell_size);
                   d.draw(canvas);
                 }}});

这将从数据库中检索图像;当我检查调试器时,d 看起来不错——它包含正确的图像。然后我使用 setBounds 设置图像的角 - 再次,与 canvas 的大小和我要适应的图像数量相比,这里计算的值看起来是正确的。最后,图像应该是在 canvas 上绘制 - 没有错误消息,但什么也没有出现。

我真的不知道接下来要检查什么,或者还可以尝试什么。谁能提出任何可行的建议?

好的,我明白了。问题是 canvas 必须在 draw_images 中声明为 final,因为它是从内部 class 中访问的。这意味着内部 class 无法更新它。

因此,我创建了一个名为 mDrawables 的 class 变量,它是 Drawables 的数组。然后我在 setImages 中一次检索一个 Drawables 并将它们存储在 mDrawables 中。当每个被检索时,我更新到目前为止已检索的数量的计数;一旦这等于图像总数,我就使 ImageGrid.

无效

然后在 draw_images 中,当遍历单元格时,我在 mDrawables 中已经有了可绘制对象,可以直接从那里使用它们。