如何在缩放自定义视图组时重新定位imageview?

时间:2017-03-21 16:08:31

标签: android android-custom-view viewgroup android-viewgroup

目标

我目前正在开展一个有效做两件事的小项目:

  • 使用自定义ViewGroup显示可伸缩/可拖动的图像(效果很好)
  • 使用图像中的坐标(x / y像素)作为锚点,在图像上显示1-N标记/图钉。这不应与ViewGroup一起扩展,只能重新定位自身。 (这不太好用)

问题(这是我无法弄清楚的!)

我无法工作的是在缩放时定位标记。我已经设法在启动Activity时将标记放在设备屏幕上的正确位置(在ViewGroup的图像中),但是当我开始缩放ViewGroup时,标记似乎使用相同的x / y相对坐标作为ViewGroup本身。这意味着标记将移动更长时间,并且#34;固定"放置更多我缩放视图。

更多信息

布局组件树,因为这可能是悲伤的可能来源,我目前使用的是:

  • RelativeLayout的
    • CustomViewGroup(可伸缩/可拖动)
      • ImageView的
    • ImageView(暂时持有一个标记)

我使用两个矩阵;一个用于ViewGroup,另一个用于标记。我认为我需要两个矩阵,以便标记可以独立于ViewGroup移动(即使它会遵循很多ViewGroup的模式)。

ViewGroup中的代码

// Used to initially position the marker on the screen
public void placeMarker(float x, float y) {
    RelativeLayout parent = (RelativeLayout) this.getParent();
    mMapMarker = (ImageView) parent.findViewById(R.id.map_marker);

    // Set initial placement of marker (redundant if this can be fixed in dispatchDraw)
    mMapMarker.setX(x);
    mMapMarker.setY(y);

    // Setting the marker's matrix to the same initial values as the placement for use when the view translates/scales 
    mMatrixMarker.postTranslate(x, y);
    mMatrixMarker.postScale(1f,1f,mid.x,mid.y);
    mMatrixMarker.invert(mMatrixInverseMarker);
}

@Override
protected void dispatchDraw(Canvas canvas) {
    // Draw the marker using ImageView.setX/Y
    float[] markerValues = new float[9];
    mMatrixMarker.getValues(markerValues);
    mMapMarker.setX(markerValues[Matrix.MTRANS_X]);
    mMapMarker.setY(markerValues[Matrix.MTRANS_Y]);

    float[] values = new float[9];
    matrix.getValues(values);
    canvas.save();
    // Translate the canvas for panning and scaling the view
    canvas.translate(values[Matrix.MTRANS_X], values[Matrix.MTRANS_Y]);
    canvas.scale(values[Matrix.MSCALE_X], values[Matrix.MSCALE_Y]);
    super.dispatchDraw(canvas);
    canvas.restore();
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    ...
    } else if (mode == ZOOM) {
      if (event.getPointerCount() > 1) {
          float newDist = spacing(event);
            if (newDist > 10f * density) {
                matrix.set(savedMatrix);
                float scale = (newDist / oldDist);
                float[] values = new float[9]; matrix.getValues(values);
                if(scale*values[Matrix.MSCALE_X] >= MAX_ZOOM) {
                    scale = MAX_ZOOM/values[Matrix.MSCALE_X];
                }
                if(scale*values[Matrix.MSCALE_X] <= MIN_ZOOM) {
                    scale = MIN_ZOOM/values[Matrix.MSCALE_X];
                }
                // Save the change in scale to the ViewGroup's matrix
                matrix.postScale(scale, scale, mid.x, mid.y);
                matrix.invert(matrixInverse);

                // Save the same change in scale for the marker (redundant if the scale is not supposed to be different)
                mMatrixMarker.set(mSavedMatrixMarker);
                mMatrixMarker.postScale(scale, scale, mid.x, mid.y);
                mMatrixMarker.invert(mMatrixInverseMarker);
            }
        } else {
            // Save the change in scale to the ViewGroup's matrix
            matrix.set(savedMatrix);
            float scale = event.getY() / start.y;
            matrix.postScale(scale, scale, mid.x, mid.y);
            matrix.invert(matrixInverse);

            // Save the same change in scale for the marker (redundant if the scale is not supposed to be different)
            mMatrixMarker.set(mSavedMatrixMarker);
            mMatrixMarker.postScale(scale, scale, mid.x, mid.y);
            mMatrixMarker.invert(mMatrixInverseMarker);
        }
    }
    ...
}

----编辑#1 ----

我现在已对代码进行了更改,我现在正在使用我认为更合适的矩阵实现,感谢pskinks提示。我看到我的代码是如何改进的,我很欣赏。

然而,现在发生的事情是我处于标记在ViewGroup中正确放置的状态,并且发生以下任何一种情况:

  • 标记与ViewGroup缩放一起缩放。这使得标记保持正确的固定&#34;这个地方,但也让它与ViewGroup缩小/增长,我试图避免。
  • 标记不会随ViewGroup缩放比例缩放。这使得标记固定和未对齐,ViewGroup缩放的次数越多。固定的标记尺寸是正确的,但我需要一种方法来抵消&#34;缩放期间的偏移量。

ViewGroup中的新代码

// Used to initially position the marker on the screen
public void placeMarker(float x, float y) {
    RelativeLayout parent = (RelativeLayout) this.getParent();
    mMapMarker = (ImageView) parent.findViewById(R.id.map_marker);
    mMapMarker.setScaleType(ImageView.ScaleType.MATRIX);

    // Setting the marker's matrix to the same initial values as the placement for use when the view translates/scales
    mMatrixMarker.postTranslate(x, y);
    mMatrixMarker.postScale(1f,1f,mid.x,mid.y);
    mMatrixMarker.invert(mMatrixInverseMarker);
}

@Override
protected void dispatchDraw(Canvas canvas) {

    // Draw the marker using a Matrix
    mMapMarker.setImageMatrix(mMatrixMarker);

    canvas.save();
    // Translate the canvas for panning and scaling the view
    canvas.translate(values[Matrix.MTRANS_X], values[Matrix.MTRANS_Y]);
    canvas.scale(values[Matrix.MSCALE_X], values[Matrix.MSCALE_Y]);
    super.dispatchDraw(canvas);
    canvas.restore();
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    ...
    } else if (mode == ZOOM) {
      if (event.getPointerCount() > 1) {
          float newDist = spacing(event);
            if (newDist > 10f * density) {
                matrix.set(savedMatrix);
                float scale = (newDist / oldDist);
                float[] values = new float[9]; matrix.getValues(values);
                if(scale*values[Matrix.MSCALE_X] >= MAX_ZOOM) {
                    scale = MAX_ZOOM/values[Matrix.MSCALE_X];
                }
                if(scale*values[Matrix.MSCALE_X] <= MIN_ZOOM) {
                    scale = MIN_ZOOM/values[Matrix.MSCALE_X];
                }
                // Save the change in scale to the ViewGroup's matrix
                matrix.postScale(scale, scale, mid.x, mid.y);
                matrix.invert(matrixInverse);

                // If this is included, the marker shrink/grows with the scaling of the ViewGroup
                // If this is not included, the marker stays in a fixed position, making it become misaligned during scaling
                mMatrixMarker.set(mSavedMatrixMarker);
                mMatrixMarker.postScale(scale, scale, mid.x, mid.y);
                mMatrixMarker.invert(mMatrixInverseMarker);
            }
        } else {
            // Save the change in scale to the ViewGroup's matrix
            matrix.set(savedMatrix);
            float scale = event.getY() / start.y;
            matrix.postScale(scale, scale, mid.x, mid.y);
            matrix.invert(matrixInverse);

            // If this is included, the marker shrink/grows with the scaling of the ViewGroup
            // If this is not included, the marker stays in a fixed position, making it become misaligned during scaling
            mMatrixMarker.set(mSavedMatrixMarker);
            mMatrixMarker.postScale(scale, scale, mid.x, mid.y);
            mMatrixMarker.invert(mMatrixInverseMarker);
        }
    }
    ...
}

1 个答案:

答案 0 :(得分:0)

我设法解决了这个问题,它归结为跟踪标记的初始位置和比例,并重新使用这些值来计算拖动和缩放时的新位置。

标记的初始位置代码

public void placeMarker(float x, float y) {
    RelativeLayout parent = (RelativeLayout) this.getParent();
    mMapMarker = (ImageView) parent.findViewById(R.id.map_marker);
    mMapMarker.setScaleType(ImageView.ScaleType.MATRIX);

    mMatrixMarker.postTranslate(x, y);
    mMatrixMarker.postScale(1f,1f,mid.x,mid.y);
    mMatrixMarker.invert(mMatrixInverseMarker);

    mMatrixMarkerSource.postTranslate(x,y);
    mMatrixMarkerSource.postScale(1f,1f,mid.x,mid.y);
    mMatrixMarkerSource.invert(mMatrixInverseMarker);
    float[] valuesMatrixSource = new float[9];
    mMatrixMarkerSource.getValues(valuesMatrixSource);
}

标记初始位置的使用

/*
Draw the requested changes taking pan and zoom into account
*/
@Override
protected void dispatchDraw(Canvas canvas) {
    // Keep a reference to the marker's initial location and scale for comparison
    float[] valuesMarkerSource = new float[9];
    mMatrixMarkerSource.getValues(valuesMarkerSource);
    float sx = valuesMarkerSource[Matrix.MTRANS_X];
    float sy = valuesMarkerSource[Matrix.MTRANS_Y];

    // Keep a reference to the current location and scale of out ViewGroup
    float[] values = new float[9];
    matrix.getValues(values);

    Drawable d = getResources().getDrawable(R.drawable.ic_map_marker_150);
    // Adjust marker image position based on its measured size
    float vX = ((sx * values[Matrix.MSCALE_X]) + values[Matrix.MTRANS_X]) - (d.getIntrinsicWidth()/2);
    float vY = ((sy * values[Matrix.MSCALE_Y]) + values[Matrix.MTRANS_Y]) - (d.getIntrinsicHeight());
    mMatrixMarker.reset();
    mMatrixMarker.postTranslate(vX, vY);


    float[] valuesMarker = new float[9];
    mMatrixMarker.getValues(valuesMarker);
if(mMapMarker != null) {
  // We want to use a marker, so save the translated matrix to it
  mMapMarker.setImageMatrix(mMatrixMarker);
} else {
  /*
  TODO This is suboptimal. We really should just hide the marker once and not deal with it any more

  We don't want to use a marker, so hide it
   */
  RelativeLayout parent = (RelativeLayout) this.getParent();
  mMapMarker = (ImageView) parent.findViewById(R.id.map_marker);
  mMapMarker.setVisibility(ImageView.INVISIBLE);
}

我还将整个项目上传到了GotHub:https://github.com/shellstrom/ffa