在Android中设置绘图画布的不透明度 [英] Setting the opacity of drawing canvas in android

查看:211
本文介绍了在Android中设置绘图画布的不透明度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用在画布上绘制一些透明线的功能,问题是,如屏幕截图所示,该线上存在一些球形".

这是我的代码:

canvas = new Canvas(alteredBitmap);
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStrokeWidth(width);
        paint.setColor(color);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeJoin(Paint.Join.ROUND);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setAlpha(alpha);
        matrix_draw = new Matrix();
        canvas.drawBitmap(bmp, matrix_draw, paint);
        setImageBitmap(alteredBitmap);

按下按钮设置Alpha

   public void setAlpha(int alpha) {
        this.alpha = alpha;
        paint.setAlpha(alpha);
    }

还有听众

    drawListener = new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                int action = event.getAction();

                switch (action) {
                case MotionEvent.ACTION_DOWN:
                    downx = getPointerCoords(event)[0];// event.getX();
                    downy = getPointerCoords(event)[1];// event.getY();
                    break;
                case MotionEvent.ACTION_MOVE:
                    upx = getPointerCoords(event)[0];// event.getX();
                    upy = getPointerCoords(event)[1];// event.getY();
                    canvas.drawLine(downx, downy, upx, upy, paint);
                    invalidate();
                    downx = upx;
                    downy = upy;
                    break;
                case MotionEvent.ACTION_UP:
//                  upx = getPointerCoords(event)[0];// event.getX();
//                  upy = getPointerCoords(event)[1];// event.getY();
//                  canvas.drawLine(downx, downy, upx, upy, paint);
//                  invalidate();
                    break;
                case MotionEvent.ACTION_CANCEL:
                    break;
                default:
                    break;
                }
                return true;
            }
        };

final float[] getPointerCoords(MotionEvent e) {
    final int index = e.getActionIndex();
    final float[] coords = new float[] { e.getX(index), e.getY(index) };
    Matrix matrix = new Matrix();
    getImageMatrix().invert(matrix);
    matrix.postTranslate(getScrollX(), getScrollY());
    matrix.mapPoints(coords);
    return coords;
}

非常感谢您的帮助

解决方案

球形是每个线段与前一个线段重叠的位置.您可以使用正在编辑的图像上方的第二个图像来解决此问题.

将叠加层图像初始化为完全透明,并使其大小与您正在编辑的图像相同.

ImageView overlayImageView = findViewById(R.id.overlay);
Bitmap overlayBitmap = Bitmap.createBitmap(imageWidth, imageHeight, Bitmap.Config.ARGB_8888);
overlayBitmap.erase(0x00000000); // transparent
overlayImageView.setImageBitmap(overlayBitmap);

内部setAlpha()将叠加层图像的alpha设置为alpha值.

overlayImageView.setImageAlpha((float)alpha / 255.0f);

当用户绘制线条时,在case MotionEvent.ACTION_MOVE块中,将线条绘制到覆盖图像上,但要完全不透明.由于所有线段都是以完全不透明的方式绘制的,因此它们重叠的地方不会有任何球形,但是由于将alpha值应用于覆盖图像,因此该线仍将显示为透明.

MotionEvent.ACTION_UP情况下,通过使用setAlpha()中设置的alpha值,使用画布绘制调用将覆盖图像绘制到目标图像上,将线条转移到图像上,然后将覆盖图像清除为透明.

I am working on a function that drawing some transparent line on the canvas, the problem is , there is some "ball shape" on the line as the screenshot show.

Here is my code:

canvas = new Canvas(alteredBitmap);
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStrokeWidth(width);
        paint.setColor(color);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeJoin(Paint.Join.ROUND);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setAlpha(alpha);
        matrix_draw = new Matrix();
        canvas.drawBitmap(bmp, matrix_draw, paint);
        setImageBitmap(alteredBitmap);

press the button to set alpha

   public void setAlpha(int alpha) {
        this.alpha = alpha;
        paint.setAlpha(alpha);
    }

And the listener

    drawListener = new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                int action = event.getAction();

                switch (action) {
                case MotionEvent.ACTION_DOWN:
                    downx = getPointerCoords(event)[0];// event.getX();
                    downy = getPointerCoords(event)[1];// event.getY();
                    break;
                case MotionEvent.ACTION_MOVE:
                    upx = getPointerCoords(event)[0];// event.getX();
                    upy = getPointerCoords(event)[1];// event.getY();
                    canvas.drawLine(downx, downy, upx, upy, paint);
                    invalidate();
                    downx = upx;
                    downy = upy;
                    break;
                case MotionEvent.ACTION_UP:
//                  upx = getPointerCoords(event)[0];// event.getX();
//                  upy = getPointerCoords(event)[1];// event.getY();
//                  canvas.drawLine(downx, downy, upx, upy, paint);
//                  invalidate();
                    break;
                case MotionEvent.ACTION_CANCEL:
                    break;
                default:
                    break;
                }
                return true;
            }
        };

final float[] getPointerCoords(MotionEvent e) {
    final int index = e.getActionIndex();
    final float[] coords = new float[] { e.getX(index), e.getY(index) };
    Matrix matrix = new Matrix();
    getImageMatrix().invert(matrix);
    matrix.postTranslate(getScrollX(), getScrollY());
    matrix.mapPoints(coords);
    return coords;
}

Thanks a lot for helping

解决方案

The ball shapes are where each line segment overlaps the previous one. You can fix this by using a second image overlaid on top of the image that you are editing.

Initialize the overlay image to completely transparent and make it the same size as the image you are editing.

ImageView overlayImageView = findViewById(R.id.overlay);
Bitmap overlayBitmap = Bitmap.createBitmap(imageWidth, imageHeight, Bitmap.Config.ARGB_8888);
overlayBitmap.erase(0x00000000); // transparent
overlayImageView.setImageBitmap(overlayBitmap);

Inside setAlpha() set the alpha of the overlay image to the alpha value.

overlayImageView.setImageAlpha((float)alpha / 255.0f);

When the user is drawing a line, in the case MotionEvent.ACTION_MOVE block, draw the line onto the overlay image instead, but at full opacity. Because all line segments are drawn at full opacity, there won't be any ball shapes where they overlap, but the line will still appear transparent because of the alpha value applied to the overlay image.

In case MotionEvent.ACTION_UP, transfer the line onto the image by drawing the overlay image onto the target image using canvas draw calls, using the alpha value set in setAlpha(), and then clear the overlay image to transparent.

这篇关于在Android中设置绘图画布的不透明度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆