自己定义ImageView，实现点击之后算出点击的是身体的哪个部位

Posted 2020-09-29 yfceshi

近期也是由于项目的原因，所以有机会接触到这边的算法。 此文重点不是怎样实现的思路和原理， 有须要的同事能够借鉴一下

废话不多说，直接上代码：

<span style="font-size:18px;"><span style="font-size:18px;">public class MyImage extends ImageView {

    private DisplayMetrics dm;

    private int bodyImageViewHeight = 0;
    private int bodyImageViewWidth = 0;

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

    public MyImage(Context context, AttributeSet attrs) {
        super(context, attrs);
        dm = context.getResources().getDisplayMetrics();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        int x = (int) event.getX();
        int y = (int) event.getY();

        //初始化各个部位的范围
        initParametersForRegion();

        if(isTouchPointInTransparent(x, y)) {
            Log.e("mcoy", "the point is in transparent area now");
        } else {
            positionType position = pointToPosition(x, y);
            Log.e("mcoy", "the position is " + position);
        }

        return super.onTouchEvent(event);
    }

    private enum positionType{
        REGION_FRONT_HAND,
        REGION_FRONT_HEAD,
        REGION_FRONT_CHEST,
        REGION_FRONT_WAIST,
        REGION_FRONT_LEG
    }

    private positionType pointToPosition(int x, int y) {
        if(x < mHandX1 || x > mHandX2)
            return positionType.REGION_FRONT_HAND;
        else if (y < mHeadY)
            return positionType.REGION_FRONT_HEAD;
        else if(y < mChestY)
            return positionType.REGION_FRONT_CHEST;
        else if(y < mWaistY)
            return positionType.REGION_FRONT_WAIST;
        else
            return positionType.REGION_FRONT_LEG;
    }

    /**
     *
     * @param x
     * @param y
     * @return 推断点击区域是否在透明区域
     */
    private boolean isTouchPointInTransparent(int x, int y) {

        int paddingLeft = this.getPaddingLeft();
        int paddingTop = this.getPaddingTop();

        int imageHeight = this.getHeight();
        int imageWidth = this.getWidth();

        Drawable drawable = this.getDrawable();
        Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();

        int intrinsicHeight = drawable.getIntrinsicHeight();
        int intrinsicWidth = drawable.getIntrinsicWidth();

        int locationInBitmapX = (x - paddingLeft) * intrinsicWidth / imageWidth;
        int locationInBitmapY = (y - paddingTop) * intrinsicHeight / imageHeight;

        int pixel = bitmap.getPixel(locationInBitmapX, locationInBitmapY);

        Log.e("mcoy", "x is " + x);
        Log.e("mcoy", "y is " + y);
        Log.e("mcoy", "imageHeight is " + imageHeight);
        Log.e("mcoy", "imageWidth is " + imageWidth);
        Log.e("mcoy", "intrinsicHeight is " + intrinsicHeight);
        Log.e("mcoy", "intrinsicWidth is " + intrinsicWidth);
        Log.e("mcoy", "locationInBitmapX is " + locationInBitmapX);
        Log.e("mcoy", "locationInBitmapY is " + locationInBitmapY);
        Log.e("mcoy", "actualBitmapX is " + locationInBitmapX / dm.density);
        Log.e("mcoy", "actualBitmapY is " + locationInBitmapY / dm.density);
        Log.e("mcoy", "pixel is " + pixel);

        return pixel == 0;
    }

    private int mHeadY;
    private int mHandX1;
    private int mHandX2;
    private int mChestY;
    private int mWaistY;

    //下面数据须要同UI同事沟通好每一个部位定义的范围。或者自己手动量一下
    private final int HEAD_AREA = 130;
    private final int LEFT_HAND_AREA = 126;
    private final int RIGHT_HAND_AREA = 280;
    private final int CHEST_AREA = 260;
    private final int WAIST_AREA = 417;

    private void initParametersForRegion() {

        if(bodyImageViewHeight != this.getHeight()) {

            bodyImageViewHeight = this.getHeight();
            bodyImageViewWidth = this.getWidth();
            int imageIntrinsicHeight = this.getDrawable().getIntrinsicHeight();
            int imageIntrinsicWidht = this.getDrawable().getIntrinsicWidth();
            Log.e("danny", "bodyImageViewHeight is " + bodyImageViewHeight);
            Log.e("danny", "bodyImageViewWidth is " + bodyImageViewWidth);
            Log.e("danny", "imageIntrinsicHeight is " + imageIntrinsicHeight);
            Log.e("danny", "imageIntrinsicWidht is " + imageIntrinsicWidht);

            mHeadY = DensityUtil.dip2px(getContext(), HEAD_AREA) * bodyImageViewHeight / imageIntrinsicHeight
                    + this.getPaddingTop();
            mHandX1 = DensityUtil.dip2px(getContext(), LEFT_HAND_AREA) * bodyImageViewWidth / imageIntrinsicWidht
                    + this.getPaddingLeft();
            mHandX2 = DensityUtil.dip2px(getContext(), RIGHT_HAND_AREA) * bodyImageViewWidth / imageIntrinsicWidht
                    + this.getPaddingLeft();
            mChestY = DensityUtil.dip2px(getContext(), CHEST_AREA) * bodyImageViewHeight / imageIntrinsicHeight
                    + this.getPaddingTop();
            mWaistY = DensityUtil.dip2px(getContext(), WAIST_AREA) * bodyImageViewHeight / imageIntrinsicHeight
                    + this.getPaddingTop();

            Log.e("danny", "mHeadY is " + mHeadY);
            Log.e("danny", "mHandX1 is " + mHandX1);
            Log.e("danny", "mHandX2 is " + mHandX2);
            Log.e("danny", "mChestY is " + mChestY);
            Log.e("danny", "mWaistY is " + mWaistY);

        }
    }
}</span></span>

代码非常easy， 就是一个自己实现的ImageView， 可是有几点须要注意的点：

1 图片须要跟UI同事沟通好对应坐标(认真看完代码之后就会知道原因), 假设换图片的话。那HEAD_AREA等值可能须要又一次定义

2 算法思路---在不同的desity的的设备上。 我们都能够算出图片相应的drawable的width/height，而图片缩放或者是放大是依照比例缩放/放大， 因此我们能够得出例如以下等式：

touchX / imageWidth = positonInBitmap / drawable.getIntransicWidth ;

==> positonInBitmap = touchX * drawable.getIntransicWidth / imageWidth;

touchX是点击在ImageView上的x坐标；imageWidth是图片的宽度。positionInBitmap是touchX映射在ImageView所相应drawable上的x坐标(这句话有点拗口，能够细致想一下)

下面是xml文件：

<span style="font-size:18px;"><span style="font-size:18px;"><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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.mcoy.pixelinbitmaptest.MainActivity" >

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:text="@string/hello_world" />

    <com.example.jiangxinxing.views.MyImage
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/man_front"
        android:layout_below="@+id/tv" />

</RelativeLayout></span></span>

也有一点须要注意：

须要将adjustViewBounds属性设置为true。这样会调整ImageView的界限来保持图像纵横比不变

demo下载链接：http://download.csdn.net/detail/zxm317122667/9000969