Tạo 1 ứng dụng Paint trong android

Thứ Hai, 20/05/2019

Tram Ho

Xin chào mọi người, chắc rằng mọi người đã quen thuộc với ứng dụng Paint trong windows rồi, tuy nhiên với Android, chúng ta làm thế nào để tạo ra được 1 ứng dụng tương tự vậy cho ae thỏa sức sáng tạo? Trong bài viết này, mình sẽ chia sẽ một chút, để tạo ra được 1 ứng dụng Paint đơn giản trên mobile!

.u7e27984361e5f053a2f08b87e822a249 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .u7e27984361e5f053a2f08b87e822a249:active, .u7e27984361e5f053a2f08b87e822a249:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u7e27984361e5f053a2f08b87e822a249 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u7e27984361e5f053a2f08b87e822a249 .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .u7e27984361e5f053a2f08b87e822a249 .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u7e27984361e5f053a2f08b87e822a249:hover .postTitle { text-decoration: underline!important; }

Multi-Thread và Service trong Android

.uee3613380c103637c2ae04e67d43e716 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .uee3613380c103637c2ae04e67d43e716:active, .uee3613380c103637c2ae04e67d43e716:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .uee3613380c103637c2ae04e67d43e716 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .uee3613380c103637c2ae04e67d43e716 .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .uee3613380c103637c2ae04e67d43e716 .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .uee3613380c103637c2ae04e67d43e716:hover .postTitle { text-decoration: underline!important; }

Flutter là gì và khác biệt như thế nào so với Android ?

Finger Path Object

Đầu tiên, chúng ta cần tạo ra 1 FingerPath Object để biểu thị đường vẽ trên màn hình. Class này có các thuộc tính sau:

Color
Emboss mode
Blur mode
Stroke width

public class FingerPath {

    public int color;
    public boolean emboss;
    public boolean blur;
    public int strokeWidth;
    public Path path;

    public FingerPath(int color, boolean emboss, boolean blur, int strokeWidth, Path path) {
        this.color = color;
        this.emboss = emboss;
        this.blur = blur;
        this.strokeWidth = strokeWidth;
        this.path = path;
    }
}

public class FingerPath {

public int color;

public boolean emboss;

public boolean blur;

public int strokeWidth;

public Path path;

public FingerPath(int color, boolean emboss, boolean blur, int strokeWidth, Path path) {

this.color = color;

this.emboss = emboss;

this.blur = blur;

this.strokeWidth = strokeWidth;

this.path = path;

}

Create the Paint View

Tiếp theo, ta cần tạo ra 1 class Paint View kế thừa từ class View. Trong contructor của PiantView, chúng ta sẽ set các giá trị mà muốn như Color,Alpha,Style…

public PaintView(Context context) {
        this(context, null);
    }

    public PaintView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setColor(DEFAULT_COLOR);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setXfermode(null);
        mPaint.setAlpha(0xff);

        mEmboss = new EmbossMaskFilter(new float[] {1, 1, 1}, 0.4f, 6, 3.5f);
        mBlur = new BlurMaskFilter(5, BlurMaskFilter.Blur.NORMAL);
    }
 }

public PaintView(Context context) {

this(context, null);

}

public PaintView(Context context, AttributeSet attrs) {

super(context, attrs);

mPaint = new Paint();

mPaint.setAntiAlias(true);

mPaint.setDither(true);

mPaint.setColor(DEFAULT_COLOR);

mPaint.setStyle(Paint.Style.STROKE);

mPaint.setStrokeJoin(Paint.Join.ROUND);

mPaint.setStrokeCap(Paint.Cap.ROUND);

mPaint.setXfermode(null);

mPaint.setAlpha(0xff);

mEmboss = new EmbossMaskFilter(new float[] {1, 1, 1}, 0.4f, 6, 3.5f);

mBlur = new BlurMaskFilter(5, BlurMaskFilter.Blur.NORMAL);

}

Sau đó, chúng ta cần add phương thức init trên PaintView . Phương thức này lấy ra height, width của màn hình, khởi tạo canvas Code sẽ như sau:

public class PaintView extends View {

    public static int BRUSH_SIZE = 20;
    public static final int DEFAULT_COLOR = Color.RED;
    public static final int DEFAULT_BG_COLOR = Color.WHITE;
    private static final float TOUCH_TOLERANCE = 4;
    private float mX, mY;
    private Path mPath;
    private Paint mPaint;
    private ArrayList<FingerPath> paths = new ArrayList<>();
    private int currentColor;
    private int backgroundColor = DEFAULT_BG_COLOR;
    private int strokeWidth;
    private boolean emboss;
    private boolean blur;
    private MaskFilter mEmboss;
    private MaskFilter mBlur;
    private Bitmap mBitmap;
    private Canvas mCanvas;
    private Paint mBitmapPaint = new Paint(Paint.DITHER_FLAG);

    public PaintView(Context context) {
        this(context, null);
    }

    public PaintView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setColor(DEFAULT_COLOR);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setXfermode(null);
        mPaint.setAlpha(0xff);

        mEmboss = new EmbossMaskFilter(new float[] {1, 1, 1}, 0.4f, 6, 3.5f);
        mBlur = new BlurMaskFilter(5, BlurMaskFilter.Blur.NORMAL);
    }

    public void init(DisplayMetrics metrics) {
        int height = metrics.heightPixels;
        int width = metrics.widthPixels;

        mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mBitmap);

        currentColor = DEFAULT_COLOR;
        strokeWidth = BRUSH_SIZE;
    }

    public void normal() {
        emboss = false;
        blur = false;
    }

    public void emboss() {
        emboss = true;
        blur = false;
    }

    public void blur() {
        emboss = false;
        blur = true;
    }

    public void clear() {
        backgroundColor = DEFAULT_BG_COLOR;
        paths.clear();
        normal();
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.save();
        mCanvas.drawColor(backgroundColor);

        for (FingerPath fp : paths) {
            mPaint.setColor(fp.color);
            mPaint.setStrokeWidth(fp.strokeWidth);
            mPaint.setMaskFilter(null);

            if (fp.emboss)
                mPaint.setMaskFilter(mEmboss);
            else if (fp.blur)
                mPaint.setMaskFilter(mBlur);

            mCanvas.drawPath(fp.path, mPaint);

        }

        canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
        canvas.restore();
    }
 }

public class PaintView extends View {

public static int BRUSH_SIZE = 20;

public static final int DEFAULT_COLOR = Color.RED;

public static final int DEFAULT_BG_COLOR = Color.WHITE;

private static final float TOUCH_TOLERANCE = 4;

private float mX, mY;

private Path mPath;

private Paint mPaint;

private ArrayList<FingerPath> paths = new ArrayList<>();

private int currentColor;

private int backgroundColor = DEFAULT_BG_COLOR;

private int strokeWidth;

private boolean emboss;

private boolean blur;

private MaskFilter mEmboss;

private MaskFilter mBlur;

private Bitmap mBitmap;

private Canvas mCanvas;

private Paint mBitmapPaint = new Paint(Paint.DITHER_FLAG);

public PaintView(Context context) {

this(context, null);

}

public PaintView(Context context, AttributeSet attrs) {

super(context, attrs);

mPaint = new Paint();

mPaint.setAntiAlias(true);

mPaint.setDither(true);

mPaint.setColor(DEFAULT_COLOR);

mPaint.setStyle(Paint.Style.STROKE);

mPaint.setStrokeJoin(Paint.Join.ROUND);

mPaint.setStrokeCap(Paint.Cap.ROUND);

mPaint.setXfermode(null);

mPaint.setAlpha(0xff);

mEmboss = new EmbossMaskFilter(new float[] {1, 1, 1}, 0.4f, 6, 3.5f);

mBlur = new BlurMaskFilter(5, BlurMaskFilter.Blur.NORMAL);

}

public void init(DisplayMetrics metrics) {

int height = metrics.heightPixels;

int width = metrics.widthPixels;

mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

mCanvas = new Canvas(mBitmap);

currentColor = DEFAULT_COLOR;

strokeWidth = BRUSH_SIZE;

}

public void normal() {

emboss = false;

blur = false;

}

public void emboss() {

emboss = true;

blur = false;

}

public void blur() {

emboss = false;

blur = true;

}

public void clear() {

backgroundColor = DEFAULT_BG_COLOR;

paths.clear();

normal();

invalidate();

}

@Override

protected void onDraw(Canvas canvas) {

canvas.save();

mCanvas.drawColor(backgroundColor);

for (FingerPath fp : paths) {

mPaint.setColor(fp.color);

mPaint.setStrokeWidth(fp.strokeWidth);

mPaint.setMaskFilter(null);

if (fp.emboss)

mPaint.setMaskFilter(mEmboss);

else if (fp.blur)

mPaint.setMaskFilter(mBlur);

mCanvas.drawPath(fp.path, mPaint);

}

canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);

canvas.restore();

}

Ở đây, các bạn thấy có hàm onDraw, khi ta vẽ view lên màn hình, phương thức này được gọi.

Manage the users’ touches on the screen

Bây giờ, ta cần quản lý việc user chạm tay và vẽ lên màn hình. Ta sử dụng 3 action:

ACTION_DOWN
ACTION_MOVE
ACTION_UP

private void touchStart(float x, float y) {
        mPath = new Path();
        FingerPath fp = new FingerPath(currentColor, emboss, blur, strokeWidth, mPath);
        paths.add(fp);

        mPath.reset();
        mPath.moveTo(x, y);
        mX = x;
        mY = y;
    }

    private void touchMove(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;
        }
    }

    private void touchUp() {
        mPath.lineTo(mX, mY);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        switch(event.getAction()) {
            case MotionEvent.ACTION_DOWN :
                touchStart(x, y);
                invalidate();
                break;
            case MotionEvent.ACTION_MOVE :
                touchMove(x, y);
                invalidate();
                break;
            case MotionEvent.ACTION_UP :
                touchUp();
                invalidate();
                break;
        }

        return true;
    }
}

private void touchStart(float x, float y) {

mPath = new Path();

FingerPath fp = new FingerPath(currentColor, emboss, blur, strokeWidth, mPath);

paths.add(fp);

mPath.reset();

mPath.moveTo(x, y);

mX = x;

mY = y;

}

private void touchMove(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;

}

private void touchUp() {

mPath.lineTo(mX, mY);

}

@Override

public boolean onTouchEvent(MotionEvent event) {

float x = event.getX();

float y = event.getY();

switch(event.getAction()) {

case MotionEvent.ACTION_DOWN :

touchStart(x, y);

invalidate();

break;

case MotionEvent.ACTION_MOVE :

touchMove(x, y);

invalidate();

break;

case MotionEvent.ACTION_UP :

touchUp();

invalidate();

break;

}

return true;

}

User Interface of the Paint Application

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.ssaurel.mypaint.MainActivity">

    <com.ssaurel.mypaint.PaintView
        android:id="@+id/paintView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.ssaurel.mypaint.MainActivity">

<com.ssaurel.mypaint.PaintView

android:id="@+id/paintView"

android:layout_width="match_parent"

android:layout_height="match_parent" />

</RelativeLayout>

Implement the Main Activity

public class MainActivity extends AppCompatActivity {

    private PaintView paintView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        paintView = (PaintView) findViewById(R.id.paintView);
        DisplayMetrics metrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(metrics);
        paintView.init(metrics);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch(item.getItemId()) {
            case R.id.normal:
                paintView.normal();
                return true;
            case R.id.emboss:
                paintView.emboss();
                return true;
            case R.id.blur:
                paintView.blur();
                return true;
            case R.id.clear:
                paintView.clear();
                return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

public class MainActivity extends AppCompatActivity {

private PaintView paintView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

paintView = (PaintView) findViewById(R.id.paintView);

DisplayMetrics metrics = new DisplayMetrics();

getWindowManager().getDefaultDisplay().getMetrics(metrics);

paintView.init(metrics);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

MenuInflater menuInflater = getMenuInflater();

menuInflater.inflate(R.menu.main, menu);

return super.onCreateOptionsMenu(menu);

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch(item.getItemId()) {

case R.id.normal:

paintView.normal();

return true;

case R.id.emboss:

paintView.emboss();

return true;

case R.id.blur:

paintView.blur();

return true;

case R.id.clear:

paintView.clear();

return true;

}

return super.onOptionsItemSelected(item);

}

Chỉ vài dòng code , ta đã tạo ra được 1 app paintView đơn giản để vọc vạch rồi ! Full class PaintView tại đây:https://gist.github.com/ssaurel/688a4d5cdc3d96b3ee50ebfae6b3bd10#file-paintview-java

Bài viết được tham khảo từ: https://www.ssaurel.com/blog/learn-to-create-a-paint-application-for-android/

.u862689a4c6e01fdeb1ec2458d530c8b4 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .u862689a4c6e01fdeb1ec2458d530c8b4:active, .u862689a4c6e01fdeb1ec2458d530c8b4:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u862689a4c6e01fdeb1ec2458d530c8b4 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u862689a4c6e01fdeb1ec2458d530c8b4 .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .u862689a4c6e01fdeb1ec2458d530c8b4 .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u862689a4c6e01fdeb1ec2458d530c8b4:hover .postTitle { text-decoration: underline!important; }

Google cắt đứt quan hệ với Huawei, smartphone của họ sẽ không được cập nhật Android nữa

.ue9becc65be8858912506f4d8770b1f64 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .ue9becc65be8858912506f4d8770b1f64:active, .ue9becc65be8858912506f4d8770b1f64:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .ue9becc65be8858912506f4d8770b1f64 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .ue9becc65be8858912506f4d8770b1f64 .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .ue9becc65be8858912506f4d8770b1f64 .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .ue9becc65be8858912506f4d8770b1f64:hover .postTitle { text-decoration: underline!important; }

Cơ bản về Android App Bundle

Chia sẻ bài viết ngay

Nguồn bài viết : viblo

Tạo 1 ứng dụng Paint trong android

Finger Path Object

Create the Paint View

Manage the users’ touches on the screen

User Interface of the Paint Application

Implement the Main Activity

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript