在 android 中使用手指在自定义视图上绘制颜色

Question

我在一个应用程序中工作，我必须在其中开发 ALPHABETS，一个屏幕上的一个字母表，等等。

当有人将手指移到字母表上时，它会在字母表上绘制颜色。

颜色仅在字母表上可见，在屏幕背景上不可见。我希望我可以 post 截图。请参考此应用程序以获取更多信息-

https://play.google.com/store/apps/details?id=kr.co.smartstudy.phonicsiap_android_googlemarket

在这个应用程序中，我们绘制字母表。我也想画画。我不知道如何开发它，如果有人有想法，请帮助我。

Answer 1

我正在回答我的问题。我的要求是只在字母表上画画。我通过使用覆盖绘制方法创建自定义视图来实现此功能。

下面是我的代码片段：

public class DrawingView extends  View{

private final Paint mAlphaPaint;
private final Paint clearPaint;

public int width;
public int height;
private Bitmap mBitmap;
private Canvas mCanvas,mCanvasWhite;
private Path mPath,alphaPath;
private Paint mBitmapPaint;
Context context;
private Paint circlePaint;
private Path circlePath;
private Bitmap mBitmapWhite;

public DrawingView(Context c) {
    super(c);
    context = c;
    mPath = new Path();
    mBitmapPaint = new Paint(Paint.DITHER_FLAG);
    circlePaint = new Paint();
    circlePath = new Path();
    circlePaint.setAntiAlias(true);
    circlePaint.setColor(Color.BLUE);
    circlePaint.setStyle(Paint.Style.STROKE);
    circlePaint.setStrokeJoin(Paint.Join.ROUND);
    circlePaint.setStrokeCap(Paint.Cap.ROUND);
    circlePaint.setStrokeWidth(110f);


    DisplayMetrics displayMetrics =  getResources().getDisplayMetrics();
    width = displayMetrics.widthPixels;
    height = displayMetrics.heightPixels;

    alphaPath = new Path();
    alphaPath.moveTo(width*.5f, height*0.1f);
    alphaPath.lineTo(100, 100);
    alphaPath.lineTo(100, 150);
    alphaPath.lineTo(width/2, height/2);
    alphaPath.lineTo(100, height - 300);

    mAlphaPaint = new Paint();
    mAlphaPaint.setAntiAlias(true);
    mAlphaPaint.setColor(Color.WHITE);
    mAlphaPaint.setStyle(Paint.Style.STROKE);
    mAlphaPaint.setStrokeJoin(Paint.Join.ROUND);
    mAlphaPaint.setStrokeCap(Paint.Cap.ROUND);
    mAlphaPaint.setStrokeWidth(220f);

     clearPaint = new Paint();
    clearPaint.setStyle(Paint.Style.STROKE);
    clearPaint.setStrokeJoin(Paint.Join.ROUND);
    clearPaint.setStrokeCap(Paint.Cap.ROUND);
    clearPaint.setStrokeWidth(220f);
    clearPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
    clearPaint.setColor(Color.TRANSPARENT);


}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);

    mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
    mBitmap.eraseColor(Color.GREEN);
    mCanvas = new Canvas(mBitmap);
     mCanvas.drawPath(alphaPath, clearPaint);
    mBitmapWhite = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
    mBitmapWhite.eraseColor(Color.WHITE);
    mCanvasWhite = new Canvas(mBitmapWhite);

}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawBitmap(mBitmapWhite,0,0,circlePaint);
    canvas.drawBitmap(mBitmap, 0, 0, circlePaint);
    mCanvasWhite.drawPath(mPath, circlePaint);


}

private float mX, mY;
private static final float TOUCH_TOLERANCE = 4;

private void touch_start(float x, float y) {
    mPath.reset();
    mPath.moveTo(x, y);
    mX = x;
    mY = y;
}

private void touch_move(float x, float y) {
    float dx = Math.abs(x - mX);
    float dy = Math.abs(y - mY);
    if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
        mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
        mX = x;
        mY = y;

        circlePath.reset();
        circlePath.addCircle(mX, mY, 30, Path.Direction.CW);
    }
}

private void touch_up() {
    mPath.lineTo(mX, mY);
    circlePath.reset();
    // commit the path to our offscreen
    mCanvasWhite.drawPath(mPath, circlePaint);
    // kill this so we don't double draw
    mPath.reset();
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    float x = event.getX();
    float y = event.getY();
    Log.d("onTouchEvent",x+","+y);
    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
        touch_start(x, y);
        invalidate();
        break;
    case MotionEvent.ACTION_MOVE:
        touch_move(x, y);
        invalidate();
        break;
    case MotionEvent.ACTION_UP:
        touch_up();
        invalidate();
        break;
    }
    return true;
}

}

在您的布局中添加此视图。在其中我们可以在线上绘制，而不是在整个表面上绘制。希望对你有所帮助。

在 android 中使用手指在自定义视图上绘制颜色

Draw color using finger on custom view in android

android

canvas

draw