Android开发笔记之简易画画板的制作

如果有这样的需求，有多种颜色可供选择，通过seekbar调节画笔的粗细，实现在画板上涂鸦的功能。没有考虑其他的功能，只是对前面有关Android图像处理和Canvas的知识进行一个运用。
一.布局
三个颜色button，一个橡皮擦按钮，一个seekbar，一个imageView

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context="com.verney.board.MainActivity" android:orientation="vertical"><LinearLayout android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"android:layout_gravity="center_horizontal"><Button android:layout_width="80dp"android:layout_height="40dp"android:background="#EA2000"android:id="@+id/red"android:onClick="red"android:layout_weight="1"/><Button android:layout_width="80dp"android:layout_height="40dp"android:background="#41A62D"android:id="@+id/green"android:layout_marginLeft="10dp"android:onClick="green"android:layout_weight="1"/><Button android:layout_width="80dp"android:layout_height="40dp"android:background="#036FCB"android:id="@+id/blue"android:layout_marginLeft="10dp"android:onClick="blue"android:layout_weight="1"/><Button android:layout_width="80dp"android:layout_height="40dp"android:id="@+id/xiangpi"android:onClick="xiangpi"android:layout_marginLeft="10dp"android:text="橡皮"android:layout_weight="1"/></LinearLayout><SeekBar android:layout_width="match_parent"android:layout_height="wrap_content"android:id="@+id/seekbar"android:layout_marginTop="40dp"/><ImageView android:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/iv"android:layout_gravity="center"android:layout_marginTop="40dp"/></LinearLayout>

二.逻辑实现
首先我们理一下思路：
1.准备好画板，画笔，和画纸，原图（后面会讲到这样能够精确画笔的轨迹，即线条会随着你的手指移动，设计到相对点的确定）
2.画画应该是这样一个流程：我们点击一个颜色按钮选择一种颜色，调节seekbar选择画笔的粗细，然后在画板上画画。
3.所以，逻辑应该是这样的，我们事先初始化画板：找到一张合适图片作为原图（当然Imageview是自适应的），然后自己生成一张bitmap尺寸是get原图的尺寸，因为这样我们在画画的时候，需要获取ImageView的中坐标，如果你设计的画板尺寸不是和ImageView一样的尺寸，会导致画画不会随着手指移动，而是有误差。

    basebitmap=BitmapFactory.decodeResource(getResources(), R.drawable.bg);copybitmap=Bitmap.createBitmap(basebitmap.getWidth(),basebitmap.getHeight(),basebitmap.getConfig());canvas=new Canvas(copybitmap);//设置画板颜色canvas.drawColor(Color.WHITE);paint=new Paint();                                                                               //设置画笔颜色
//      paint.setColor(Color.RED);//设置画笔粗细paint.setStrokeWidth(0);iv.setImageBitmap(copybitmap);//设置画笔风格
//      paint.setStyle(Style.STROKE);

准备好画板等初始操作，我们需要对颜色Button进行设计点击事件设置画笔颜色，需要对ImageView设计触摸事件实现线条的画出，需要对seekbar设计滑动事件以此设置画笔的粗细。
颜色，橡皮点击事件

public void red(View view){paint.setColor(Color.RED);}public void green(View view){paint.setColor(Color.GREEN);}public void blue(View view){paint.setColor(Color.BLUE);}public void xiangpi(View view){paint.setColor(Color.WHITE);}

seekbar点击事件

seekbar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {public void onStopTrackingTouch(SeekBar seekBar) {// TODO Auto-generated method stubint progress=seekBar.getProgress();float count=progress/2f;paint.setStrokeWidth(count);}public void onStartTrackingTouch(SeekBar seekBar) {// TODO Auto-generated method stub}public void onProgressChanged(SeekBar seekBar, int progress,boolean fromUser) {// TODO Auto-generated method stub}});

ImageView触摸事件及其画线操作

iv.setOnTouchListener(new OnTouchListener() {public boolean onTouch(View v, MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:startx=event.getX();starty=event.getY();break;case MotionEvent.ACTION_MOVE:stopx=event.getX();stopy=event.getY();canvas.drawLine(startx, starty, stopx, stopy, paint);startx=event.getX();starty=event.getY();iv.setImageBitmap(copybitmap);break;case MotionEvent.ACTION_UP:break;}return true;}});

这样基本事件都完成了。

Manactivity.class

package com.verney.board;import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;public class MainActivity extends Activity {private Bitmap basebitmap,copybitmap;private Bitmap bitmap;private Canvas canvas;private Paint paint;ImageView iv;TextView huaxian;private float startx,starty;SeekBar seekbar;public void red(View view){paint.setColor(Color.RED);}public void green(View view){paint.setColor(Color.GREEN);}public void blue(View view){paint.setColor(Color.BLUE);}public void xiangpi(View view){paint.setColor(Color.WHITE);}protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);iv=(ImageView) findViewById(R.id.iv);seekbar=(SeekBar) findViewById(R.id.seekbar);//      basebitmap=BitmapFactory.decodeResource(getResources(), R.drawable.);
//      canvasinit();seekbar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {public void onStopTrackingTouch(SeekBar seekBar) {// TODO Auto-generated method stubint progress=seekBar.getProgress();float count=progress/2f;paint.setStrokeWidth(count);}public void onStartTrackingTouch(SeekBar seekBar) {// TODO Auto-generated method stub}public void onProgressChanged(SeekBar seekBar, int progress,boolean fromUser) {// TODO Auto-generated method stub}});iv.setOnTouchListener(new OnTouchListener() {public boolean onTouch(View v, MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:startx=event.getX();starty=event.getY();break;case MotionEvent.ACTION_MOVE:float stopx=event.getX();float stopy=event.getY();canvas.drawLine(startx, starty, stopx, stopy, paint);startx=event.getX();starty=event.getY();iv.setImageBitmap(copybitmap);break;case MotionEvent.ACTION_UP:break;}return true;}});}private void init() {basebitmap=BitmapFactory.decodeResource(getResources(), R.drawable.bg);copybitmap=Bitmap.createBitmap(basebitmap.getWidth(),basebitmap.getHeight(),basebitmap.getConfig());canvas=new Canvas(copybitmap);//设置画板颜色canvas.drawColor(Color.WHITE);paint=new Paint();                                                                               //设置画笔颜色
//      paint.setColor(Color.RED);//设置画笔粗细paint.setStrokeWidth(0);iv.setImageBitmap(copybitmap);//设置画笔风格
//      paint.setStyle(Style.STROKE);}}

Android开发笔记之简易画画板的制作相关推荐

Android开发笔记（一百五十三）OpenGL绘制三维图形的流程
从这篇文章开始,接下来会连载一系列的OpenGL相关博文,好好探讨如何在Android中进行OpenGL开发. OpenGL的全称是"Open Graphics Library", ...
Android开发笔记（一百五十六）通过渲染纹理展示地球仪
上一篇文章介绍了如何使用GL10描绘三维物体的线段框架,后面给出的立方体和球体效果图,虽然看起来具备立体的轮廓,可离真实的物体还差得远.因为现实生活中的物体不仅仅有个骨架,还有花纹有光泽(比如衣服), ...
Android开发笔记（一百五十五）利用GL10描绘点、线、面
上一篇文章介绍了GL10的常用方法,包括如何设置颜色.如何指定坐标系.如何调整镜头参数.如何挪动观测方位等等,不过这些方法只是绘图前的准备工作,真正描绘点.线.面的制图工作并未涉及,那么本文就来谈谈如 ...
Android开发笔记（一百四十九）约束布局ConstraintLayout
约束布局ConstraintLayout是Android Studio 2.2推出的新布局,并从Android Studio 2.3开始成为默认布局文件的根布局,由此可见Android官方对其寄予厚望 ...
Android开发笔记（一百三十二）矢量图形与矢量动画
矢量图形VectorDrawable 与水波图形RippleDrawable一样,矢量图形VectorDrawable也是Android5.0之后新增的图形类.矢量图不同于一般的图形,它是由一系列几何 ...
Android开发笔记（一百三十一）水波图形与水波动画
水波图形RippleDrawable RippleDrawable是Android在5.0之后新增的图形类,它的作用是在点击时展示水波动画,从而提示用户在这里按压了屏幕.这个提示效果类似于状态图形St ...
Android开发笔记（一百零三）地图与定位SDK
集成地图SDK 国内常用的地图SDK就是百度和高德了,二者的用法大同小异,可按照官网上的开发指南一步步来.下面是我在集成地图SDK时遇到的问题说明: 1.点击基本地图功能选项,不能打开地图,弹出&qu ...
Android开发笔记（九十九）圆形转盘
圆形转盘的实现思想圆形转盘的运用场景常见的有:抽奖转盘.圆形菜单列表.热点客户端环状列表等等.对于圆形转盘的编码实现,主要难点除了手势的触摸控制之外,就在于旋转角度的计算了.下面是旋转角度计算的解决 ...
Android开发笔记（九十八）往图片添加部件
添加圆角添加圆角的功能,要用到Canvas类的drawRoundRect方法,即把画布裁剪成指定的圆角矩形. 下面是给图片添加圆角的效果截图: 下面是给图片添加圆角的代码片段: public sta ...

Android开发笔记之简易画画板的制作

Android开发笔记之简易画画板的制作相关推荐

最新文章

热门文章