Android的 - 如何圆形变焦/放大图像的一部分？变焦、圆形、图像、Android
我试图允许用户触摸图像，然后基本上圆环形放大镜将表明，将允许用户更好地选择一个特定的区域中的图像上。当用户释放触摸的放大部分将dissapear。这是用在一些照片编辑应用程序，我想实现我自己的版本。在code我下面做放大的ImageView的圆形部分，但不会删除或清除缩放一次，我松开了我的手指。我当前设置使用位图到画布画布=新的Canvas（位）; ，然后设置使用ImageView的 takenPhoto.setImageBitmap（位图）; 我不知道如果我要了解它的正确途径。该onTouch code是如下：
zoomPos =新的PointF（0,0）;
takenPhoto.setOnTouchListener（新OnTouchListener（）{
@覆盖
公共布尔onTouch（视图V，MotionEvent事件）{
INT行动= event.getAction（）;
开关（动作）{
案例MotionEvent.ACTION_DOWN：
zoomPos.x = event.getX（）;
zoomPos.y = event.getY（）;
matrix.reset（）;
matrix.postScale（2F，2F，zoomPos.x，zoomPos.y）;
shader.setLocalMatrix（矩阵）;
canvas.drawCircle（zoomPos.x，zoomPos.y，20，shaderPaint）;
takenPhoto.invalidate（）;
打破;
案例MotionEvent.ACTION_MOVE：
zoomPos.x = event.getX（）;
zoomPos.y = event.getY（）;
matrix.reset（）;
matrix.postScale（2F，2F，zoomPos.x，zoomPos.y）;
canvas.drawCircle（zoomPos.x，zoomPos.y，20，shaderPaint）;
takenPhoto.invalidate（）;
打破;
案例MotionEvent.ACTION_UP：
//这里明确变焦？
打破;
案例MotionEvent.ACTION_CANCEL：
打破;
默认：
打破;
}
返回true;
}
}）;
解决方案
适应你的code，我能得到以下办法工作。
在onTouch功能，设置一个全球性的点确定在何处的用户触摸，并设置一个布尔值，表明缩放当前是否处于活动状态：
@覆盖
公共布尔onTouch（查看视图，MotionEvent事件）{
INT行动= event.getAction（）;
zoomPos.x = event.getX（）;
zoomPos.y = event.getY（）;
开关（动作）{
案例MotionEvent.ACTION_DOWN：
案例MotionEvent.ACTION_MOVE：
缩放= TRUE;
this.invalidate（）;
打破;
案例MotionEvent.ACTION_UP：
案例MotionEvent.ACTION_CANCEL：
缩放= FALSE;
this.invalidate（）;
打破;
默认：
打破;
}
返回true;
}
然后，在OnDraw中的方法，你用你的code绘制放大部分：
@覆盖
保护无效的OnDraw（帆布油画）{
super.onDraw（画布）;
如果（缩放）{
matrix.reset（）;
matrix.postScale（2F，2F，zoomPos.x，zoomPos.y）;
mPaint.getShader（）setLocalMatrix（矩阵）。
canvas.drawCircle（zoomPos.x，zoomPos.y，100，mPaint）;
}
}
请注意，对于着色器，我使用位图着色器描述here,这与创建：
mBitmap = BitmapFactory.de codeResource（getResources（），R.drawable.image）;
mShader =新BitmapShader（mBitmap，TileMode.CLAMP，TileMode.CLAMP）;
mPaint =新的油漆（）;
mPaint.setShader（mShader）;
I am trying to allow the user to touch the image and then basically a cirular magnifier will show that will allow the user to better select a certain area on the image. When the user releases the touch the magnified portion will dissapear. This is used on several photo editing apps and I am trying to implement my own version of it. The code I have below does magnify a circular portion of the imageview but does not delete or clear the zoom once I release my finger. I currently set a bitmap to a canvas using canvas = new Canvas(bitMap); and then set the imageview using takenPhoto.setImageBitmap(bitMap); I am not sure if I am going about it the right way. The onTouch code is below:
zoomPos = new PointF(0,0);
takenPhoto.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
zoomPos.x = event.getX();
zoomPos.y = event.getY();
matrix.reset();
matrix.postScale(2f, 2f, zoomPos.x, zoomPos.y);
shader.setLocalMatrix(matrix);
canvas.drawCircle(zoomPos.x, zoomPos.y, 20, shaderPaint);
takenPhoto.invalidate();
break;
case MotionEvent.ACTION_MOVE:
zoomPos.x = event.getX();
zoomPos.y = event.getY();
matrix.reset();
matrix.postScale(2f, 2f, zoomPos.x, zoomPos.y);
canvas.drawCircle(zoomPos.x, zoomPos.y, 20, shaderPaint);
takenPhoto.invalidate();
break;
case MotionEvent.ACTION_UP:
//clear zoom here?
break;
case MotionEvent.ACTION_CANCEL:
break;
default:
break;
}
return true;
}
});
解决方案
Adapting your code, I was able to get the following approach working.
In the onTouch function, set a global point for determining where the user has touched, and set a boolean to indicate whether zooming is currently active or not:
@Override
public boolean onTouch(View view, MotionEvent event) {
int action = event.getAction();
zoomPos.x = event.getX();
zoomPos.y = event.getY();
switch (action) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
zooming = true;
this.invalidate();
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
zooming = false;
this.invalidate();
break;
default:
break;
}
return true;
}
Then, in the onDraw method, you use your code for drawing the zoomed in portion:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (zooming) {
matrix.reset();
matrix.postScale(2f, 2f, zoomPos.x, zoomPos.y);
mPaint.getShader().setLocalMatrix(matrix);
canvas.drawCircle(zoomPos.x, zoomPos.y, 100, mPaint);
}
}
Note that for the shader, I used a bitmap shader as described here, which was created with:
mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image);
mShader = new BitmapShader(mBitmap, TileMode.CLAMP, TileMode.CLAMP);
mPaint = new Paint();
mPaint.setShader(mShader);
