搜索
搜索

Android在Canvas上处理图像-使用触摸，移动，缩放-放大/缩小，缩放

Milan Hirpara 发表于 Java
62
米兰·希尔帕拉：

我正在使用以下摄影应用程序：https : //play.google.com/store/apps/details?id=com.photo.editor.collage.maker.photoblender&hl=zh-CN

我必须实现这样的功能： 在此处输入图片说明

我对此有2个功能...

1）具有飞溅背景

在此处输入图片说明 在此处输入图片说明 在此处输入图片说明

2）背景模糊

在此处输入图片说明 在此处输入图片说明 在此处输入图片说明

两者都使用2种形状。...现在，当您使用路径绘制形状时....我想像上面那样绘制图像位图形状。

我有更多类似以下的形状（都具有上面的2张图像）：

3）

在此处输入图片说明 在此处输入图片说明

我想替换您正在使用的这部分代码： 

private void createPath() {
            path.reset();
            path.moveTo(114, 156);
            float[] points = {68, 138, 19, 136, 21, 87, 8, 39, 56, 26, 97, -2, 123, 40, 163, 71, 131, 109};
            for (int i = 0; i < points.length; i += 2) {
                path.lineTo(points[i], points[i + 1]);
            }
            path.close();
            Matrix m = new Matrix();
            m.setRectToRect(new RectF(0, 0, 160, 160), clip, Matrix.ScaleToFit.CENTER);
            path.transform(m);
            transformedPath.set(path);
        }

我通过添加形状作为路径来实现上述功能，但是当我尝试使用形状作为位图时，我没有得到完整的结果....这是我的视图代码。

class MotionImageView extends View implements MatrixGestureDetector.OnMatrixChangeListener {
    private final Bitmap shapeMaskBitmap;
    private final Bitmap shapeShadowBitmap;
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    Paint monoPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    Paint borderPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    Bitmap bitmap, blur;
    Matrix matrix = new Matrix();
    Matrix pathMatrix = new Matrix();
//    Path path = new Path();
//    Path transformedPath = new Path();
    MatrixGestureDetector detector;
    RectF clip = new RectF();

    public MotionImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        Log.e("~~~~", "1111");
        bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.model);
        blur = blur(context, bitmap, 8);
        ColorMatrix cm = new ColorMatrix();
        cm.setSaturation(0.25f);
        monoPaint.setColorFilter(new ColorMatrixColorFilter(cm));
        borderPaint.setStyle(Paint.Style.STROKE);
        borderPaint.setColor(0xccffffff);
        borderPaint.setStrokeWidth(4);
        borderPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        detector = new MatrixGestureDetector(pathMatrix, this);

        shapeMaskBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.shape_mask);
        shapeShadowBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.shape_shadow);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        Shader shader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
        RectF src = new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight());
        RectF dst = new RectF(0, 0, w, h);
        matrix.setRectToRect(src, dst, Matrix.ScaleToFit.CENTER);
        shader.setLocalMatrix(matrix);
        paint.setShader(shader);
        matrix.mapRect(clip, src);
//        createPath();
    }

    /*private void createPath() {
        path.reset();
        path.moveTo(114, 156);
        float[] points = {68, 138, 19, 136, 21, 87, 8, 39, 56, 26, 97, -2, 123, 40, 163, 71, 131, 109};
        for (int i = 0; i < points.length; i += 2) {
            path.lineTo(points[i], points[i + 1]);
        }
        path.close();
        Matrix m = new Matrix();
        m.setRectToRect(new RectF(0, 0, 160, 160), clip, Matrix.ScaleToFit.CENTER);
        path.transform(m);
        transformedPath.set(path);
    }*/

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(blur, matrix, monoPaint);
        canvas.save();
        canvas.clipRect(clip);
//        canvas.drawPath(transformedPath, paint);
        canvas.drawBitmap(shapeMaskBitmap, pathMatrix, paint);
        canvas.restore();
//        canvas.drawPath(transformedPath, borderPaint);
        canvas.drawBitmap(shapeShadowBitmap, pathMatrix, borderPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        detector.onTouchEvent(event);
        return true;
    }

    @Override
    public void onChange(Matrix matrix) {
//        path.transform(matrix, transformedPath);
        pathMatrix.set(matrix);
        invalidate();
    }

    Bitmap blur(Context ctx, Bitmap src, float radius) {
        Bitmap bitmap = src.copy(src.getConfig(), true);

        RenderScript renderScript = RenderScript.create(ctx);
        Allocation blurInput = Allocation.createFromBitmap(renderScript, src);
        Allocation blurOutput = Allocation.createFromBitmap(renderScript, bitmap);

        ScriptIntrinsicBlur blur = ScriptIntrinsicBlur.create(renderScript, Element.U8_4(renderScript));
        blur.setInput(blurInput);
        blur.setRadius(radius);
        blur.forEach(blurOutput);

        blurOutput.copyTo(bitmap);
        renderScript.destroy();
        return bitmap;
    }
}

我的输出是这样的：

在此处输入图片说明

pskink：

你正在试图用做PorterDuff.Mode.CLEAR和BlurMaskFilter将无法正常工作，如果你想这样的效果：

在此处输入图片说明

或这个：

在此处输入图片说明

您必须使用BitmapShader和ScriptIntrinsicBlur，请参阅以下示例自定义View：

class V extends View implements MatrixGestureDetector.OnMatrixChangeListener {
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    Paint monoPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    Paint borderPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    Bitmap bitmap, blur;
    Matrix matrix = new Matrix();
    Matrix pathMatrix = new Matrix();
    Path path = new Path();
    Path transformedPath = new Path();
    MatrixGestureDetector detector;
    RectF clip = new RectF();

    public V(Context context) {
        super(context);
        bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.forest);
        blur = blur(context, bitmap, 8);
        ColorMatrix cm = new ColorMatrix();
        cm.setSaturation(0.25f);
        monoPaint.setColorFilter(new ColorMatrixColorFilter(cm));
        borderPaint.setStyle(Paint.Style.STROKE);
        borderPaint.setColor(0xccffffff);
        borderPaint.setStrokeWidth(4);
        detector = new MatrixGestureDetector(pathMatrix, this);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        Shader shader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
        RectF src = new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight());
        RectF dst = new RectF(0, 0, w, h);
        matrix.setRectToRect(src, dst, Matrix.ScaleToFit.CENTER);
        shader.setLocalMatrix(matrix);
        paint.setShader(shader);
        matrix.mapRect(clip, src);
        createPath();
    }

    private void createPath() {
        path.reset();
        path.moveTo(114, 156);
        float[] points = {68, 138, 19, 136, 21, 87, 8, 39, 56, 26, 97, -2, 123, 40, 163, 71, 131, 109};
        for (int i = 0; i < points.length; i += 2) {
            path.lineTo(points[i], points[i + 1]);
        }
        path.close();
        Matrix m = new Matrix();
        m.setRectToRect(new RectF(0, 0, 160, 160), clip, Matrix.ScaleToFit.CENTER);
        path.transform(m);
        transformedPath.set(path);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(blur, matrix, monoPaint);
        canvas.save();
        canvas.clipRect(clip);
        canvas.drawPath(transformedPath, paint);
        canvas.restore();
        canvas.drawPath(transformedPath, borderPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        detector.onTouchEvent(event);
        return true;
    }

    @Override
    public void onChange(Matrix matrix) {
        path.transform(matrix, transformedPath);
        invalidate();
    }

    Bitmap blur(Context ctx, Bitmap src, float radius) {
        Bitmap bitmap = src.copy(src.getConfig(), true);

        RenderScript renderScript = RenderScript.create(ctx);
        Allocation blurInput = Allocation.createFromBitmap(renderScript, src);
        Allocation blurOutput = Allocation.createFromBitmap(renderScript, bitmap);

        ScriptIntrinsicBlur blur = ScriptIntrinsicBlur.create(renderScript, Element.U8_4(renderScript));
        blur.setInput(blurInput);
        blur.setRadius(radius);
        blur.forEach(blurOutput);

        blurOutput.copyTo(bitmap);
        renderScript.destroy();
        return bitmap;
    }
}

class MatrixGestureDetector {
    private static final String TAG = "MatrixGestureDetector";

    interface OnMatrixChangeListener {
        void onChange(Matrix matrix);
    }

    private int ptpIdx = 0;
    private Matrix mTempMatrix = new Matrix();
    private Matrix mMatrix;
    private OnMatrixChangeListener mListener;
    private float[] mSrc = new float[4];
    private float[] mDst = new float[4];
    private int mCount;

    public MatrixGestureDetector(Matrix matrix, MatrixGestureDetector.OnMatrixChangeListener listener) {
        if (matrix == null) throw new RuntimeException("Matrix cannot be null");
        if (listener == null) throw new RuntimeException("OnMatrixChangeListener cannot be null");
        mMatrix = matrix;
        mListener = listener;
    }

    public void onTouchEvent(MotionEvent event) {
        if (event.getPointerCount() > 2) {
            return;
        }

        int action = event.getActionMasked();
        int index = event.getActionIndex();

        switch (action) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_POINTER_DOWN:
                int idx = index * 2;
                mSrc[idx] = event.getX(index);
                mSrc[idx + 1] = event.getY(index);
                mCount++;
                ptpIdx = 0;
                break;

            case MotionEvent.ACTION_MOVE:
                for (int i = 0; i < mCount; i++) {
                    idx = ptpIdx + i * 2;
                    mDst[idx] = event.getX(i);
                    mDst[idx + 1] = event.getY(i);
                }
                mTempMatrix.setPolyToPoly(mSrc, ptpIdx, mDst, ptpIdx, mCount);
                mMatrix.postConcat(mTempMatrix);
                mListener.onChange(mMatrix);
                System.arraycopy(mDst, 0, mSrc, 0, mDst.length);
                break;

            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_POINTER_UP:
                if (event.getPointerId(index) == 0) ptpIdx = 2;
                mCount--;
                break;
        }
    }
}

编辑：当使用Bitmaps而不是Paths时，代码将缩短两行：

class V extends View implements MatrixGestureDetector.OnMatrixChangeListener {
    Paint monoPaint = new Paint();
    Paint srcInPaint = new Paint();
    Bitmap mask, maskShadow, bitmap, blur;
    Matrix matrix = new Matrix();
    Matrix maskMatrix = new Matrix();
    MatrixGestureDetector detector;
    RectF clip = new RectF();

    public V(Context context) {
        super(context);
        mask = BitmapFactory.decodeResource(context.getResources(), R.drawable.mask).extractAlpha();
        maskShadow = BitmapFactory.decodeResource(context.getResources(), R.drawable.mask_shadow);
        bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.forest);
        blur = blur(context, bitmap, 8);
        ColorMatrix cm = new ColorMatrix();
        cm.setSaturation(0.25f);
        monoPaint.setColorFilter(new ColorMatrixColorFilter(cm));
        srcInPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        detector = new MatrixGestureDetector(maskMatrix, this);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        RectF src = new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight());
        RectF dst = new RectF(0, 0, w, h);
        matrix.setRectToRect(src, dst, Matrix.ScaleToFit.CENTER);
        matrix.mapRect(dst, src);

        src.set(0, 0, mask.getWidth(), mask.getHeight());
        maskMatrix.setRectToRect(src, dst, Matrix.ScaleToFit.CENTER);
        setupClip();
    }

    private void setupClip() {
        clip.set(0, 0, mask.getWidth(), mask.getHeight());
        maskMatrix.mapRect(clip);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(blur, matrix, monoPaint);
        drawMask(canvas);
    }

    private void drawMask(Canvas canvas) {
        canvas.clipRect(clip);
        canvas.saveLayer(clip, null, 0);
        canvas.drawBitmap(mask, maskMatrix, null);
        canvas.drawBitmap(bitmap, matrix, srcInPaint);
        canvas.drawBitmap(maskShadow, maskMatrix, null);
        canvas.restore();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        detector.onTouchEvent(event);
        return true;
    }

    @Override
    public void onChange(Matrix matrix) {
        setupClip();
        invalidate();
    }

    Bitmap blur(Context ctx, Bitmap src, float radius) {
        Bitmap bitmap = src.copy(src.getConfig(), true);

        RenderScript renderScript = RenderScript.create(ctx);
        Allocation blurInput = Allocation.createFromBitmap(renderScript, src);
        Allocation blurOutput = Allocation.createFromBitmap(renderScript, bitmap);

        ScriptIntrinsicBlur blur = ScriptIntrinsicBlur.create(renderScript, Element.U8_4(renderScript));
        blur.setInput(blurInput);
        blur.setRadius(radius);
        blur.forEach(blurOutput);

        blurOutput.copyTo(bitmap);
        renderScript.destroy();
        return bitmap;
    }
}

结果是这样的：

在此处输入图片说明

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在TEXTVIEW上平滑地放大和缩小以及放大特定的缩放位置？

图像被缩放放大

缩小/放大地图时禁用缩放/增加折线

缩放时出现意外/错误的缩放大小：放大/缩小chrome浏览器时出现“缩放”

Flutter：有没有办法通过放大和缩小来防止Marker缩放？并将它们重新定位到图像的绝对中心？

在所有浏览器上，边框在Material-ui Chip组件内部出现正常缩放比例，但在放大或缩小时不会出现

如何使用d3在放大的画布上缩放/平移？

如何使用按钮单击图像放大/缩小

使用图像上的滚动或按+/-按钮来放大/缩小图像

铯-在放大/缩小时使用相机缩放多边形以匹配纬度位置

使用鼠标滚轮或触摸滚动进行jQuery图像缩放

使用“变形：缩放”在悬停时放大图像，仍然从外部放大图像

在服务器上缩放和缩小图像

触摸图像缩放在android中

highmap数据点单击事件在移动设备（触摸屏）上缩放后中断

如何放大和缩小图像以及移动所有图像

Cesium如何在放大/缩小时缩放多边形以匹配Lat-Lon位置

缩放动画会在放大和缩小时打破边框半径

页面无法缩放以适合移动设备上的视口，因此无法缩小

如何在保持其大小的同时放大缩放图像？

在woocommerce 3中调整产品图像的缩放放大倍数

放大UIScrollView-无法缩放到单个图像之外并滚动

放大或缩小图像？

如何使用 watir webdriver 在 chrome 浏览器中设置缩放级别（ruby watir- 设置特定的缩放级别/缩小/放大）

如何在 ChromeOS/Android 上使用触摸板进行双指缩放？

Android 放大和缩小图像

捏/缩放滚动移动图像

为什么在我的Android WebView中无法放大缩放？

使用 CSS 放大和缩小背景图像

TOP 榜单

  1. 1

    Android Studio Kotlin：提取为常量

  2. 2

    IE 11中的FormData未定义

  3. 3

    计算数据帧R中的字符串频率

  4. 4

    如何在R中转置数据

  5. 5

    如何使用Redux-Toolkit重置Redux Store

  6. 6

    Excel 2016图表将增长与4个参数进行比较

  7. 7

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  8. 8

    未捕获的SyntaxError：带有Ajax帖子的意外令牌u

  9. 9

    OpenCv：改变 putText() 的位置

  10. 10

    ActiveModelSerializer仅显示关联的ID

  11. 11

    算术中的c ++常量类型转换

  12. 12

    如何开始为Ubuntu开发

  13. 13

    将加号/减号添加到jQuery菜单

  14. 14

    去噪自动编码器和常规自动编码器有什么区别？

  15. 15

    获取并汇总所有关联的数据

  16. 16

    OpenGL纹理格式的颜色错误

  17. 17

    在 React Native Expo 中使用 react-redux 更改另一个键的值

  18. 18

    http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

  19. 19

    TreeMap中的自定义排序

  20. 20

    Redux动作正常，但减速器无效

  21. 21

    如何对treeView的子节点进行排序

热门标签

归档