触控点缩放预览答案

【问题标题】：Touch point zoom preview触控点缩放预览
【发布时间】：2018-04-03 09:41:53
【问题描述】：

我正在开发扫描文档程序，我已经开发了一个程序，该程序可以使用图像处理扫描文档并提供像 CanScanner 一样裁剪图像的选项。

现在我想要触摸图像缩放预览，就像 cam 扫描仪提供的选项一样。我将如何实现此功能。请查找附件图片以供参考（我想要开发的相同功能）

请帮助实现此功能。

提前致谢

【问题讨论】：

标签： android canvas bitmap preview

【解决方案1】：

您可以创建和使用BitmapShader（使用您正在绘制的图像的位图）、Matrix 和Paint。

mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image);
mShader = new BitmapShader(mBitmap, TileMode.CLAMP, TileMode.CLAMP);

mPaint = new Paint();
mPaint.setShader(mShader);

然后设置一个手势动作事件来记录触摸位置。我们将在下一步中基于此位置设置着色器的矩阵。

@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; 
}

然后在绘图代码中，使用postScale()根据裁剪区域的坐标缩放和平移矩阵。然后使用着色器 Paint 绘制一个圆圈以显示放大镜。

@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);
    }
}

请参阅：Android - How to circular zoom/magnify part of image? 和 Magnifying part of the canvas when touched

【讨论】：

您好，nhoxbypass，我创建了一个放大镜缩放预览，但是它没有显示精确点的缩放预览，存在一些像素差异。
@AlokSoni 您应该提出新问题，因为它会吸引更多人，记得捕获设备屏幕并将您使用的代码放在那里。

【解决方案2】：

要缩放您在画布上绘制的图像：

创建一个 BitmapShader（使用您正在绘制的图像的位图）、一个 Matrix 和一个 Paint：

shader = new BitmapShader(bmp, TileMode.CLAMP, TileMode.CLAMP);
matrix = new Matrix();
shaderPaint = new Paint();
shaderPaint.setShader(shader);

在触摸事件中记录触摸位置（例如在 PointF 中）：

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

...并设置着色器的矩阵（我在每次触摸时都这样做，可能有更好的方法）：

matrix.reset();
matrix.postScale(2f, 2f);
matrix.postTranslate(-zoomPos.x, -zoomPos.y);
shader.setLocalMatrix(matrix);

然后在绘图代码中，使用着色器Paint绘制一个圆。

canvas.drawCircle(zoomPos.x, zoomPos.y, size_of_the_circle, shaderPaint);

希望对您有所帮助！编码愉快！

【讨论】：