项目中遇到的耗时点-（图片缩放里面添加的标记红圈无法缩放）

news2024/11/17 17:45:10

实现效果
在这里插入图片描述

1、需求：显示服务端返回的在线url图片，并且根据标记圈的坐标点和半径绘制到图片上

分析：由于涉及到图片上加标记，可考虑的方案有
1、加个父布局，里面嵌入两个ImageView
2、自定义ImageView、使其支持标图
考虑到熟练性、通用性、扩展性、选择方案二

package com.yyrc.shouTour.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;

public class MyImageView extends androidx.appcompat.widget.AppCompatImageView {

    private final String TAG=MyImageView.class.getCanonicalName();
    Paint paint = new Paint();
     private float x;
    private float y;
    private float r=100;
    public MyImageView(Context context) {
        super(context);
    }

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

    public MyImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
 
    public void add(float x, float y, float r){//业务层传入坐标值
        shouldRemove=false;
        this.x=x;
        this.y=y;
        this.r=r;
        postInvalidate();//请求重绘，调用onDraw方法、使用Paint画笔，画到canvas上
    }

    public void remove(){
        shouldRemove=true;
        postInvalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
             int radius = (int) r;
            paint.setColor(Color.RED);
            paint.setStrokeWidth(5);
            paint.setStyle(Paint.Style.STROKE);
            canvas.drawCircle(x, y, radius, paint);
    }
}

完成自定义控件后、还需要做一步工作，服务端返回给我的坐标、我们要做等比例调整
也就是我们要根据图片标记点坐标（后台返回）、真实宽高（通过API获取），以及手机屏幕宽高调整坐标点位置

2、需求变更：图片要支持放大拖拽

1、这样原先的自定义ImageView用不了， 在网上搜搜了一个支持拖拽放大的自定义ImageView
[photoView](https://github.com/NEW-MIKE/XPopup/)

为了同时保证拖拽缩放的时候标记的图片也会移动、缩放，这里使用了，重新生成bitmap的方式，把在线url图片和标记的圈合并成一张新图片

在加载url图片时、重新生成新的bitmpa
 Bitmap newBitmap = Bitmap.createBitmap(1920, 1080, Bitmap.Config.ARGB_8888);//创建bitmap
                                     Canvas canvas = new Canvas(newBitmap);//创建画布
                                     Bitmap resizedBitmap = Bitmap.createScaledBitmap(bitmap, 1920, 1080, true);//重新修改bitmap宽高
                                     Log.e(TAG, "resizedBitmap x:" + resizedBitmap.getWidth() + " y:" + resizedBitmap.getHeight() );
                                
                                      canvas.drawBitmap(resizedBitmap, 0, 0, null);//修改宽高bitmap绘制进来
                                     paint.setColor(Color.RED);
                                     paint.setStrokeWidth(5);
                                     paint.setStyle(Paint.Style.STROKE);
                                     canvas.drawCircle(x, y, r, paint);//红色圆圈绘制进来
                                     photoView.setImageBitmap(newBitmap);//显示在控件上