Android:为超大图增加一个导航图

地图

要做的功能如上面demo所示，在图片缩放时，增加一个展示当前局部位置的导航图。要求是：

• 支持超大图；
• 导航图红框定位当前局部位置；
• 导航图支持滑动，快速定位大图位置；
• 支持图钉显示，随图片放大更新透明度。

记录下开发过程，demo可以在github找到

加载超大图

测试用的是一张21m大的图片(上传代码里换了张小的)，无论如何不能一次载入内存显示。github里找到一个显示超大图的控件subsampling-scale-image-view
，原理是使用Android的BitmapRegionDecoder局部加载图片。

创建一个自定义LargeBitmapView，继承SubsamplingScaleImageView。加载图片使用setImage方法，图片来源可以多种，通过ImageSource获取。

lav_bitmap.setImage(ImageSource.resource(R.mipmap.large_world_map));

监听图片加载过程使用OnImageEventListener，回调丰富。

lav_bitmap.setOnImageEventListener(new SubsamplingScaleImageView.OnImageEventListener() {
    @Override
    public void onReady() {}

    @Override
    public void onImageLoaded() {}

    @Override
    public void onPreviewLoadError(Exception e) {}

    @Override
    public void onImageLoadError(Exception e) {}

    @Override
    public void onTileLoadError(Exception e) {}

    @Override
    public void onPreviewReleased() {}
});

加载导航图

大图加载完后调用showNavigation设置导航图，并加载一张缩略的Bitmap。导航图使用自定义的NavigateImageView，继承ImageView。

private void showNavigation() {
    int navigationWidth = (int) (lav_bitmap.getWidth() * NAVIGATION_SCREEN_WIDTH_SCALE);
    mScale = (float) navigationWidth / lav_bitmap.getSWidth();
    int navigationHeight = (int) (lav_bitmap.getSHeight() * mScale);

    //控件大小
    ViewUtil.setWidth(iv_navigate, navigationWidth);
    ViewUtil.setHeight(iv_navigate, navigationHeight);

    //生成缩略图
    Bitmap thumbnail = BitmapUtils.decodeSampledBitmapFromResource(getResources(), R.mipmap.large_world_map, navigationWidth, navigationHeight);
    iv_navigate.setImageBitmap(thumbnail);
}

重点要算出导航图和原图的比例mScale，然后通过目标宽高获取缩略图。BitmapUtils网上资料很多，就不多介绍。

导航图红框

大图缩放时，导航图要用红框展示当前局部位置。

lav_bitmap.setOnStateChangedListener(new SubsamplingScaleImageView.OnStateChangedListener() {
    @Override
    public void onScaleChanged(float scale, int orientation) {
    }

    @Override
    public void onCenterChanged(PointF pointF, int orientation) {
    }
});

大图的变化使用OnStateChangedListener监听，可以获取缩放比、图片当前中点位置和图片方向的变化。这里只需要知道图片当前中点位置变化就行，在onCenterChanged里调用drawFrame。

private void drawFrame(PointF pointF) {
    //中点在view位置
    PointF centerInViewPointF = lav_bitmap.sourceToViewCoord(pointF);
    //view的四个点
    float viewLeft = lav_bitmap.getWidth() / 2 - centerInViewPointF.x;
    float viewTop = lav_bitmap.getHeight() / 2 - centerInViewPointF.y;
    float viewRight = viewLeft + lav_bitmap.getWidth();
    float viewBottom = viewTop + lav_bitmap.getHeight();

    //view对应大图的位置
    PointF point1 = lav_bitmap.viewToSourceCoord(viewLeft, viewTop);
    PointF point2 = lav_bitmap.viewToSourceCoord(viewRight, viewTop);
    PointF point3 = lav_bitmap.viewToSourceCoord(viewLeft, viewBottom);
    //PointF point4

    //比例
    float left = point1.x * mScale;
    float top = point1.y * mScale;
    float right = point2.x * mScale;
    float bottom = point3.y * mScale;
    iv_navigate.refreshFrame(left, top, right, bottom);
}

这里要分清楚图片坐标和屏幕坐标，SubsamplingScaleImageView提供sourceToViewCoord和viewToSourceCoord对两种坐标进行转换。

入参pointF是大图当前中点坐标，目标是得到当前图片局部的四个角坐标，所以要获取控件在屏幕四个角的坐标，然后viewToSourceCoord获取对应在大图上的坐标。最后，结果乘以mScale，就是红框在导航图上的坐标。

在导航图上画一个红色矩形就比较简单了，View的measure、layout、draw工作流程理应人人熟悉。

private Paint mPolygonSidePaint = new Paint();
private RectF mFrameRectF = new RectF();

在NavigateImageView里增加两个变量，mPolygonSidePaint是画笔，mFrameRectF记录矩形的四个坐标。

public void refreshFrame(float left, float top, float right, float bottom) {
    if (left < 0) {
        left = 0;
    }
    if (top < 0) {
        top = 0;
    }
    if (right > getWidth()) {
        right = getWidth();
    }
    if (bottom > getHeight()) {
        bottom = getHeight();
    }

    mFrameRectF.set(left, top, right, bottom);
    invalidate();
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    drawFrame(canvas);
}

private void drawFrame(Canvas canvas) {
    if (mFrameRectF != null) {
        Path path = new Path();
        path.addRect(mFrameRectF, Path.Direction.CW);
        canvas.drawPath(path, mPolygonSidePaint);
    }
}

refreshFrame设置了mFrameRectF，然后重写onDraw方法，增加drawFrame方法，用drawPath画出矩形。

滑动导航图

导航图需要支持滑动，对应切换大图的焦点，实现快速移动到大图某个局部。

iv_navigate.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        float targetX = event.getX() / mScale;
        float targetY = event.getY() / mScale;
        lav_bitmap.animateCenter(new PointF(targetX, targetY))
                .withDuration(1)
                .start();
        return true;
    }
});

在NavigateImageView的onTouch里增加处理方法，覆盖DOWN、MOVE、UP三种MotionEvent。将导航图点击坐标乘以mScale，得到对应大图中点坐标，然后调用animateCenter移动到指定局部。

增加图钉

需要在大图上展示图钉，为了避免图钉非常密集的情况下遮挡图片，所以初始时图钉有一定透明度，随着图片放大，减少透明度。

public void refreshPinAlpha() {
   int alpha = (int) (MAX_ALPHA * getScale() / getMaxScale() + INITIAL_ALPHA);
   if (alpha > MAX_ALPHA) {
       alpha = MAX_ALPHA;
   }
   this.mPinAlpha = alpha;
}

private void drawPin(Canvas canvas) {
    mBitmapPaint.setAlpha(mPinAlpha);
    mTextPaint.setAlpha(mPinAlpha);

    for (Pin pin : mPinList) {
        PointF vPointF = sourceToViewCoord(pin.getPointF().x, pin.getPointF().y);
        float vCenterX = vPointF.x - mPinBitmap.getWidth() / 2;
        float vCenterY = vPointF.y - mPinBitmap.getHeight();
        canvas.drawBitmap(mPinBitmap, vCenterX, vCenterY, mBitmapPaint);

        if (!TextUtils.isEmpty(pin.getName())) {
            //获取字体高度
            Paint.FontMetrics fm = new Paint.FontMetrics();
            mTextPaint.getFontMetrics(fm);
            float fontHeight = fm.top + fm.bottom;
            //显示名称
            float textX = vPointF.x + mPinBitmap.getWidth() / 2;
            float textY = vCenterY - fontHeight;
            canvas.drawText(pin.getName(), textX, textY, mTextPaint);
        }
    }
}

图钉的绘画，和导航图红框的原理是一样的，在onDraw里增加drawPin方法。没有什么特别要说，唯一一点是要认真通过计算，让图钉尖画在坐标上。

后记

磨刀不误砍柴，做出了demo，再移到项目中，不过是个优化过程。后续继续了解图片局部加载的原理，和回顾View的工作原理。

如果对你有帮助，请给我点赞。