Tạo 1 ứng dụng Paint trong android
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 ...
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!
Đầ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 awidth
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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; } } |
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…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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, awidth của màn hình, khởi tạo canvas Code sẽ như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
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 awidth = metrics.awidthPixels; mBitmap = Bitmap.createBitmap(awidth, 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.
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
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); &n
Có thể bạn quan tâm
0
|