星空网 > 软件开发 > 操作系统

Android电子白板实现,Canvas画布

前一阵子做了一个项目,里面有用到画板,在手机上画图,类似一个电子白板,画出曲线,圆,矩形。。   后来查了资料,看了些大神的博客

单独优化出了一个小程序,在原来基础上新增了橡皮檫功能,画出的图形可以是曲线,直线,矩形,正方形,圆,椭圆,也可以筛选相册图片显示到画板,

画图的同时更改画笔的颜色

 

基本思路是在画板上确认两个点,一个起点,一个终点,根据选择的图形样式,拖动的时候有预览图形,松开时图形定下来显示到画板上。

曲线是用贝塞尔曲线,其余基本图形由两个点确定位置大小,canvas提供的方法就能很快画出来。

一.  一个Canvas对象有四大基本要素:

1.一个用来保存像素的Bitmap

2.一个Canvas在Bitmap上进行绘制操作

3.绘制的东西

4.绘制的画笔Paint

提供的方法有:

  canvas.drawArc (扇形)

  canvas.drawCircle(圆)

  canvas.drawOval(椭圆)

  canvas.drawLine(线)

  canvas.drawPoint(点)

  canvas.drawRect(矩形)

  canvas.drawRoundRect(圆角矩形)

  canvas.drawVertices(顶点)

  cnavas.drawPath(路径)

  canvas.drawBitmap (位图)

  canvas.drawPicture (图片)

  canvas.drawText(文本)

 

二.Paint(画笔)类

    要绘制图形,首先得调整画笔,按照自己的开发需要设置画笔的相关属性。Pain类的常用属性设置方法如下:

  setAntiAlias();  设置画笔的锯齿效果

  setColor();   设置画笔的颜色

  setARGB();   设置画笔的A、R、G、B值

  setAlpha();    设置画笔的Alpha值

  setTextSize();    设置字体的尺寸

  setStyle();     设置画笔的风格(空心或实心)

  setStrokeWidth();    设置空心边框的宽度

  getColor();    获取画笔的颜色

  setDither();  获取跟清晰的图像采样

  setStrokeJoin(); 接合处为圆弧

  setStrokeCap(); 画笔样式圆形

三.自定义View的基本实现方法

  首先,我们需要自定义一个类,比如ControlView,继承于View类,也可以继承ViewGroup,因为ViewGroup是继承于View的,然后,复写View类的onDraw()函数。

  最后,在onDraw()函数中使用Paint和Canvas对象绘制我们需要的图形。

  drawBitmap(Bitmap bitmap, float left, float top, Paint paint);

  通过onTouchEvent(MotionEvent)的getAction()方法来获取Touch事件的类型,包括 ACTION_DOWN(按下触摸屏), ACTION_MOVE(按下触摸屏后移动受力点), ACTION_UP(松开触摸屏)

  和ACTION_CANCEL(不会由用户直接触发)。借助对于用户不同操作的判断,结合getRawX()、 getRawY()、getX()和getY()等方法来获取坐标,所有的绘画都在

  MotionEvent.ACTION_MOVE 去做,MotionEvent.ACTION_UP(松开触摸屏)时,画出图形,更新画布

下面列出主要model代码:

  1.继承类IShape,AbsShape

public interface IShape {  public void touchMove(int startX, int startY, int x, int y);  public void drawShape(Canvas canvas);}

  

public abstract class AbsShape implements IShape{  protected ControlView mView;  protected Paint mPaint;  public AbsShape(ControlView view, int model)  {    mView = view;    // 去锯齿    mPaint = new Paint();    // 去锯齿    mPaint.setAntiAlias(true);    // 设置paint的颜色    mPaint.setColor(model == ControlView.MODEL_ERASE ? Constants.BACK_COLOR : view.getPenColor());    // 设置paint的 style 为STROKE:空心    mPaint.setStyle(Paint.Style.STROKE);    // 设置paint的外框宽度    mPaint.setStrokeWidth(model == ControlView.MODEL_ERASE ? view.getEraserWidth() : view.getPenWidth());    // 获取跟清晰的图像采样    mPaint.setDither(true);    // 接合处为圆弧    mPaint.setStrokeJoin(Paint.Join.ROUND);    // 画笔样式圆形    mPaint.setStrokeCap(Paint.Cap.ROUND);  }}

 

  ①曲线

 

public class Path extends AbsShape {  private Rect mInvalidRect;  protected SerializablePath mPath;  private float mStartX = 0;  private float mStartY = 0;  public Path(ControlView view, int model) {    super(view, model);    mPath = new SerializablePath();    mInvalidRect = new Rect();  }  public void touchMove(int startX, int startY, int x, int y) {    // 判断是不是down事件    if (mStartX == 0 && mStartY == 0) {      mStartX = startX;      mStartY = startY;      mPath.moveTo(mStartX, mStartY);    }    int border = (int) mPaint.getStrokeWidth();    mInvalidRect.set((int) mStartX - border, (int) mStartY - border,        (int) mStartX + border, (int) mStartY + border);    float mCurveEndX = (x + mStartX) / 2;    float mCurveEndY = (y + mStartY) / 2;    // 使用贝赛尔曲线    mPath.quadTo(mStartX, mStartY, mCurveEndX, mCurveEndY);    mInvalidRect.union((int) mCurveEndX - border,        (int) mCurveEndY - border, (int) mCurveEndX + border,        (int) mCurveEndY + border);    mStartX = x;    mStartY = y;    mView.invalidate(mInvalidRect);  }  public void drawShape(Canvas canvas) {    canvas.drawPath(mPath, mPaint);  }}

 

  ②直线

  

public class Line extends AbsShape{  private Rect mInvalidRect;  protected SerializablePath mPath;  public Line(ControlView view, int model)  {    super(view, model);    mPath = new SerializablePath();    mInvalidRect = new Rect();  }  public void touchMove(int startX, int startY, int x, int y)  {    mPath.reset();    mPath.moveTo(startX, startY);    mPath.lineTo(x, y);    int border = (int) mPaint.getStrokeWidth() * 2;    mInvalidRect.set((int) startX - border, (int) startY - border, (int) startX + border, (int) startY + border);    mInvalidRect.union((int) x - border, (int) y - border, (int) x + border, (int) y + border);    mView.invalidate(mInvalidRect);  }  public void drawShape(Canvas canvas)  {    canvas.drawPath(mPath, mPaint);  }}

 

 

 

  ③矩形

 

 

public class Rectangle extends AbsShape{  private int mX;  private int mY;  private int mStartX;  private int mStartY;  private Rect mInvalidRect;  public Rectangle(ControlView view, int model)  {    super(view, model);    mInvalidRect = new Rect();  }  public void touchMove(int startX, int startY, int x, int y)  {    mStartX = startX;    mStartY = startY;    mX = x;    mY = y;    int border = (int) mPaint.getStrokeWidth();    mInvalidRect.set(mStartX - border, mStartY - border, mStartX + border, mStartY + border);    mInvalidRect.union(x - border, y - border, x + border, y + border);    mView.invalidate(mInvalidRect);  }  public void drawShape(Canvas canvas)  {    canvas.drawRect(mStartX, mStartY, mX, mY, mPaint);  }}

 

 

 

  ④正方形

  

public class Square extends AbsShape {  private int mStartX;  private int mStartY;  private int mX;  private int mY;  private Rect mInvalidRect;  public Square(ControlView view, int model) {    super(view, model);    mInvalidRect = new Rect();  }  public void touchMove(int startX, int startY, int x, int y) {    mStartX = startX;    mStartY = startY;    mX = x;    mY = y;    int border = (int) mPaint.getStrokeWidth();    mInvalidRect.set(mStartX - border, mStartY - border, mStartX + border,        mStartY + border);    mInvalidRect.union(x - border, y - border, x + border, y + border);    mView.invalidate(mInvalidRect);  }  public void drawShape(Canvas canvas) {    if ((mX > mStartX && mY > mStartY) || (mX < mStartX && mY < mStartY)) {      if (Math.abs(mX - mStartX) > Math.abs(mY - mStartY)) {        canvas.drawRect(mStartX, mStartY, mStartX + mY - mStartY, mY,            mPaint);      } else {        canvas.drawRect(mStartX, mStartY, mX, mStartY + mX - mStartX,            mPaint);      }    } else {      if (Math.abs(mX - mStartX) > Math.abs(mY - mStartY)) {        canvas.drawRect(mStartX, mStartY, mStartX + mStartY - mY, mY,            mPaint);      } else {        canvas.drawRect(mStartX, mStartY, mX, mStartY + mStartX - mX,            mPaint);      }    }  }}

 

 

 

  ⑤椭圆

  

public class Oval extends AbsShape{  private Rect mInvalidRect;  private RectF mDrawRect;  public Oval(ControlView view, int model)  {    super(view, model);    mInvalidRect = new Rect();    mDrawRect = new RectF();  }  public void touchMove(int startX, int startY, int x, int y)  {    int border = (int) mPaint.getStrokeWidth();    mInvalidRect.set(startX - border, startY - border, startX + border, startY + border);    mInvalidRect.union(x - border, y - border, x + border, y + border);    mDrawRect.set(startX, startY, x, y);    mView.invalidate(mInvalidRect);  }  public void drawShape(Canvas canvas)  {    canvas.drawOval(mDrawRect, mPaint);  }}

 

  ⑥圆

  

public class Circle extends AbsShape{  private Rect mInvalidRect;  private int cx;  private int cy;  private int radius;  public Circle(ControlView view, int model)  {    super(view, model);    mInvalidRect = new Rect();  }  public void touchMove(int startX, int startY, int x, int y)  {    cx = (int) ((x + startX) / 2);    cy = (int) ((y + startY) / 2);    radius = (int) Math.sqrt(Math.pow(x - startX, 2) + Math.pow(y - startY, 2)) / 2;    int border = (int) mPaint.getStrokeWidth();    mInvalidRect.set(cx - radius - border, cy - radius - border, cx + radius + border, cy + radius + border);    mView.invalidate(mInvalidRect);  }  public void drawShape(Canvas canvas)  {    canvas.drawCircle(cx, cy, radius, mPaint);  }}

 

  曲线和直线的SerializablePath:

  

public class SerializablePath extends Path implements Serializable{  private static final long serialVersionUID = 1L;  private ArrayList<float[]> pathPoints;  public SerializablePath()  {    super();    pathPoints = new ArrayList<float[]>();  }  public SerializablePath(SerializablePath path)  {    super(path);    pathPoints = path.pathPoints;  }  public void addPathPoints(float[] points)  {    pathPoints.add(points);  }  public void loadPathPointsAsQuadTo()  {    float[] initPoints = pathPoints.remove(0);    moveTo(initPoints[0], initPoints[1]);    for (float[] pointSet : pathPoints)    {      quadTo(pointSet[0], pointSet[1], pointSet[2], pointSet[3]);    }  }}

 

四.核心操作代码

  主界面WhiteBoardActivity.java

  

public class WhiteBoardActivity extends Activity {  private PopupWindow mPopupWindow;  private LayoutInflater mLayoutInflater;  private View mToolbox;  private ControlView drawView;  private ImageView mColorBlack;  private ImageView mColorBlue;  private ImageView mColorGreen;  private ImageView mColorRed;  private ImageView mColorYellow;  private ImageView mColor;  private ImageView mEdit;  private ImageView mEraser;  private ImageView mClear;  private ImageView mSettings;  private ImageView mShape;  View width1;  View width2;  View width3;  // 获取屏幕尺寸  DisplayMetrics dm;  @SuppressWarnings("deprecation")  @Override  public void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    // 保持屏幕常亮    getWindow().setFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON,        WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);    setContentView(R.layout.activity_ewhiteboard);    dm = new DisplayMetrics();    getWindowManager().getDefaultDisplay().getMetrics(dm);    int screenwWidth = dm.widthPixels; // 屏幕宽(dip,如:720dip)    int screenHeight = dm.heightPixels; // 屏幕宽(dip,如:1280dip)    drawView = new ControlView(this, screenwWidth, screenHeight);    ((ViewGroup) findViewById(R.id.container)).addView(drawView);    drawView.setPenColor(Color.BLACK);    drawView.setPenWidth(3f);    mLayoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);    mPopupWindow = new PopupWindow(new View(this));    mPopupWindow.setFocusable(true);    mPopupWindow.setBackgroundDrawable(new BitmapDrawable());    mToolbox = findViewById(R.id.toolbox);    mSettings = (ImageView) findViewById(R.id.settings);    mColor = (ImageView) findViewById(R.id.color);    mEdit = (ImageView) findViewById(R.id.edit);    mEraser = (ImageView) findViewById(R.id.eraser);    mClear = (ImageView) findViewById(R.id.clear);    mShape = (ImageView) findViewById(R.id.shape);    initToolbox();    initColor();    initPenSize();    initEraserSize();    initShape();  }  private void initToolbox() {    mEdit.setSelected(true);    drawView.setModel(ControlView.MODEL_NORMAL);    mClear.setOnClickListener(new View.OnClickListener() {      public void onClick(View v) {        new AlertDialog.Builder(WhiteBoardActivity.this)            .setMessage("确定要清除白板吗?")            .setPositiveButton("确定",                new DialogInterface.OnClickListener() {                  public void onClick(DialogInterface dialog,                      int which) {                    drawView.clear();                  }                })            .setNegativeButton("取消",                new DialogInterface.OnClickListener() {                  public void onClick(DialogInterface dialog,                      int which) {                  }                }).create().show();      }    });    mSettings.setSelected(false);    mSettings.setOnClickListener(new View.OnClickListener() {      public void onClick(View v) {        Intent intent = new Intent();        intent.setClass(WhiteBoardActivity.this, SettingsActivity.class);        startActivity(intent);      }    });  }  private void initShape() {    final int POP_WINDOW_WIDTH = WindowManager.LayoutParams.WRAP_CONTENT;    final int POP_WINDOW_HEIGHT = Utils.dip2px(this, 60);    final View popupView = mLayoutInflater.inflate(        R.layout.view_popup_shape, null);    final View width1 = popupView.findViewById(R.id.pen_width1);    final View width2 = popupView.findViewById(R.id.pen_width2);    final View width3 = popupView.findViewById(R.id.pen_width3);    final View width4 = popupView.findViewById(R.id.pen_width4);    final View width5 = popupView.findViewById(R.id.pen_width5);    final View width6 = popupView.findViewById(R.id.pen_width6);    mShape.setOnClickListener(new View.OnClickListener() {      public void onClick(View paramView) {        mPopupWindow.setContentView(popupView);        mPopupWindow.setWidth(POP_WINDOW_WIDTH);        mPopupWindow.setHeight(POP_WINDOW_HEIGHT);        mPopupWindow.setAnimationStyle(R.style.pop_settings);        mPopupWindow.showAtLocation(            mShape,            Gravity.LEFT | Gravity.TOP,            mToolbox.getRight(),            mToolbox.getTop() + mShape.getTop()                - Utils.dip2px(WhiteBoardActivity.this, 5));        int penSize = drawView.getShap();        if (penSize == ControlView.SHAPE_PATH) {          width1.setSelected(true);          width2.setSelected(false);          width3.setSelected(false);          width4.setSelected(false);          width5.setSelected(false);          width6.setSelected(false);        } else if (penSize == ControlView.SHAPE_LINE) {          width2.setSelected(true);          width1.setSelected(false);          width3.setSelected(false);          width4.setSelected(false);          width5.setSelected(false);          width6.setSelected(false);        } else if (penSize == ControlView.SHAPE_CIRCLE) {          width3.setSelected(true);          width1.setSelected(false);          width2.setSelected(false);          width4.setSelected(false);          width5.setSelected(false);          width6.setSelected(false);        } else if (penSize == ControlView.SHAPE_SQUARE) {          width4.setSelected(true);          width1.setSelected(false);          width2.setSelected(false);          width3.setSelected(false);          width5.setSelected(false);          width6.setSelected(false);        } else if (penSize == ControlView.SHAPE_RECT) {          width5.setSelected(true);          width1.setSelected(false);          width2.setSelected(false);          width3.setSelected(false);          width4.setSelected(false);          width6.setSelected(false);        } else if (penSize == ControlView.SHAPE_OVAL) {          width6.setSelected(true);          width1.setSelected(false);          width2.setSelected(false);          width3.setSelected(false);          width4.setSelected(false);          width5.setSelected(false);        }      }    });    width1.setOnClickListener(new View.OnClickListener() {      public void onClick(View v) {        drawView.setShape(ControlView.SHAPE_PATH);        mPopupWindow.dismiss();        mShape.setImageResource(R.drawable.ic_path);      }    });    width2.setOnClickListener(new View.OnClickListener() {      public void onClick(View v) {        drawView.setShape(ControlView.SHAPE_LINE);        mPopupWindow.dismiss();        mShape.setImageResource(R.drawable.ic_line);      }    });    width3.setOnClickListener(new View.OnClickListener() {      public void onClick(View v) {        drawView.setShape(ControlView.SHAPE_CIRCLE);        mPopupWindow.dismiss();        mShape.setImageResource(R.drawable.ic_circle);      }    });    width4.setOnClickListener(new View.OnClickListener() {      public void onClick(View v) {        drawView.setShape(ControlView.SHAPE_SQUARE);        mPopupWindow.dismiss();        mShape.setImageResource(R.drawable.ic_square);      }    });    width5.setOnClickListener(new View.OnClickListener() {      public void onClick(View v) {        drawView.setShape(ControlView.SHAPE_RECT);        mPopupWindow.dismiss();        mShape.setImageResource(R.drawable.ic_rect);      }    });    width6.setOnClickListener(new View.OnClickListener() {      public void onClick(View v) {        drawView.setShape(ControlView.SHAPE_OVAL);        mPopupWindow.dismiss();        mShape.setImageResource(R.drawable.ic_oval);      }    });  }  private void initColor() {    final int POP_WINDOW_WIDTH = WindowManager.LayoutParams.WRAP_CONTENT;    final int POP_WINDOW_HEIGHT = Utils.dip2px(this, 60);    final View popupView = mLayoutInflater.inflate(        R.layout.view_color_popup, null);    final View colorFrame = findViewById(R.id.color_frame);    colorFrame.setOnClickListener(new View.OnClickListener() {      public void onClick(View paramView) {        mPopupWindow.setContentView(popupView);        mPopupWindow.setWidth(POP_WINDOW_WIDTH);        mPopupWindow.setHeight(POP_WINDOW_HEIGHT);        mPopupWindow.setAnimationStyle(R.style.pop_settings);        mPopupWindow.showAtLocation(            colorFrame,            Gravity.LEFT | Gravity.TOP,            mToolbox.getRight(),            mToolbox.getTop() + colorFrame.getTop()                - Utils.dip2px(WhiteBoardActivity.this, 5));      }    });    mColor.setBackgroundColor(Color.BLACK);    mColorBlack = (ImageView) popupView.findViewById(R.id.color_black);    mColorBlack.setBackgroundColor(Color.BLACK);    mColorBlue = (ImageView) popupView.findViewById(R.id.color_blue);    mColorBlue.setBackgroundColor(Color.BLUE);    mColorGreen = (ImageView) popupView.findViewById(R.id.color_green);    mColorGreen.setBackgroundColor(Color.GREEN);    mColorRed = (ImageView) popupView.findViewById(R.id.color_red);    mColorRed.setBackgroundColor(Color.RED);    mColorYellow = (ImageView) popupView.findViewById(R.id.color_yellow);    mColorYellow.setBackgroundColor(Color.YELLOW);    mColorBlack.setOnClickListener(new View.OnClickListener() {      public void onClick(View v) {        mColor.setBackgroundColor(Color.BLACK);        drawView.setPenColor(Color.BLACK);        mPopupWindow.dismiss();      }    });    mColorBlue.setOnClickListener(new View.OnClickListener() {      public void onClick(View v) {        mColor.setBackgroundColor(Color.BLUE);        drawView.setPenColor(Color.BLUE);        mPopupWindow.dismiss();      }    });    mColorGreen.setOnClickListener(new View.OnClickListener() {      public void onClick(View v) {        mColor.setBackgroundColor(Color.GREEN);        drawView.setPenColor(Color.GREEN);        mPopupWindow.dismiss();      }    });    mColorRed.setOnClickListener(new View.OnClickListener() {      public void onClick(View v) {        mColor.setBackgroundColor(Color.RED);        drawView.setPenColor(Color.RED);        mPopupWindow.dismiss();      }    });    mColorYellow.setOnClickListener(new View.OnClickListener() {      public void onClick(View v) {        mColor.setBackgroundColor(Color.YELLOW);        drawView.setPenColor(Color.YELLOW);        mPopupWindow.dismiss();      }    });  }  private void initPenSize() {    final int POP_WINDOW_WIDTH = WindowManager.LayoutParams.WRAP_CONTENT;    final int POP_WINDOW_HEIGHT = Utils.dip2px(this, 60);    final View popupView = mLayoutInflater.inflate(R.layout.view_popup_pen,        null);    final View width1 = popupView.findViewById(R.id.pen_width1);    final View width2 = popupView.findViewById(R.id.pen_width2);    final View width3 = popupView.findViewById(R.id.pen_width3);    mEdit.setOnClickListener(new View.OnClickListener() {      public void onClick(View paramView) {        mEdit.setSelected(true);        mEraser.setSelected(false);        drawView.setModel(ControlView.MODEL_NORMAL);        mPopupWindow.setContentView(popupView);        mPopupWindow.setWidth(POP_WINDOW_WIDTH);        mPopupWindow.setHeight(POP_WINDOW_HEIGHT);        mPopupWindow.setAnimationStyle(R.style.pop_settings);        mPopupWindow.showAtLocation(mEdit, Gravity.LEFT | Gravity.TOP,            mToolbox.getRight(), mToolbox.getTop() + mEdit.getTop()                - Utils.dip2px(WhiteBoardActivity.this, 5));        float penSize = drawView.getPenWidth();        if (penSize == 1) {          width1.setSelected(true);          width2.setSelected(false);          width3.setSelected(false);        } else if (penSize == 3) {          width2.setSelected(true);          width1.setSelected(false);          width3.setSelected(false);        } else if (penSize == 6) {          width3.setSelected(true);          width1.setSelected(false);          width2.setSelected(false);        }      }    });    width1.setOnClickListener(new View.OnClickListener() {      public void onClick(View v) {        drawView.setPenWidth(1f);        mPopupWindow.dismiss();      }    });    width2.setOnClickListener(new View.OnClickListener() {      public void onClick(View v) {        drawView.setPenWidth(3f);        mPopupWindow.dismiss();      }    });    width3.setOnClickListener(new View.OnClickListener() {      public void onClick(View v) {        drawView.setPenWidth(6f);        mPopupWindow.dismiss();      }    });  }  private void initEraserSize() {    final View popupView = mLayoutInflater.inflate(        R.layout.view_popup_eraser, null);    width1 = popupView.findViewById(R.id.pen_width1);    width2 = popupView.findViewById(R.id.pen_width2);    width3 = popupView.findViewById(R.id.pen_width3);    mEraser.setOnClickListener(new View.OnClickListener() {      public void onClick(View paramView) {        mEdit.setSelected(false);        mEraser.setSelected(true);        drawView.setModel(ControlView.MODEL_ERASE);        // 默认30        drawView.setEraserWidth(30f);      }    });      }  @Override  protected void onResume() {    super.onResume();    SharedPreferences pref = PreferenceManager        .getDefaultSharedPreferences(this);    drawView.setOnlyPenInput(pref.getBoolean("only_pen_input", false));  }  @Override  public void onDestroy() {    super.onDestroy();  }}

 

 

  操作类ControlView.java

  

public class ControlView extends ViewGroup {  public static final int MODEL_NORMAL = 1;  public static final int MODEL_ERASE = 2;  public static String pointmsg;  protected int mModel = MODEL_NORMAL;  public static final int SHAPE_PATH = 1;  public static final int SHAPE_LINE = 2;  public static final int SHAPE_CIRCLE = 3;  public static final int SHAPE_SQUARE = 4;  public static final int SHAPE_RECT = 5;  public static final int SHAPE_OVAL = 6;  public static final int IMAGE = 8;  private int mShapeType = SHAPE_PATH;  public static final float scale = 210f / 297f;  private Context mContext;  public Hardware mHardware;  public boolean mOnlyPenInput;  protected Canvas mCanvas;  protected Bitmap mBitmap;  protected float mPenWidth = 3f;  protected float mEraserWidth = 10f;  protected int mColor = Color.BLACK;  private Paint mBitmapPaint;  private IShape mEraser;  private IShape mShape;  private int mStartX = 0;  private int mStartY = 0;  private int x = 0, y = 0;  protected boolean mIsCanvasMoving;  private boolean mIsTouchUp;  int index = 1;  int width = 0, height = 0; // 屏幕的宽高  public ControlView(Context context, int width, int height) {    super(context);    setWillNotDraw(false);    mContext = context;    mHardware = Hardware.getInstance(mContext);    this.width = width;    this.height = height;    mHardware.addPenButtonEvent(this);    mBitmapPaint = new Paint(Paint.DITHER_FLAG);    mBitmap = MainApplication.getBitmap();    mCanvas = new Canvas(mBitmap);  }  @Override  protected void onLayout(boolean changed, int l, int t, int r, int b) {    for (int i = 0; i < getChildCount(); i++) {      getChildAt(i).layout(l, t, r, b);    }  }  @Override  protected void onDraw(Canvas canvas) {    // 在View上绘制    canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);    if (mShape != null && !mIsTouchUp) {      mShape.drawShape(canvas);    }    }  @Override  public boolean onTouchEvent(MotionEvent event) {    if (mOnlyPenInput) {      if (mHardware.hasPenDigitizer() && mHardware.isPenEvent(event)) {        return touchEvent(event);      } else {        return false;      }    } else {      return touchEvent(event);    }  }  private boolean touchEvent(MotionEvent event) {    if ((mHardware.hasPenDigitizer() && mHardware.isPenEvent(event))        || !mOnlyPenInput) {      // 笔的按钮只有在move才能检测到,所以有可能在move时改变形状      // 所以所有的绘画都在move中去做      if (mModel == MODEL_ERASE || mHardware.isPenButtonPressed(event)) {        mShape = mEraser;      }      switch (event.getAction()) {      case MotionEvent.ACTION_DOWN:        mStartX = (int) event.getX();        mStartY = (int) event.getY();        // 创建一个橡皮        mEraser = new Path(this, MODEL_ERASE);        // 根据选择创建相应图形        switch (mShapeType) {        case SHAPE_PATH: // 随意曲线          mShape = new Path(this, MODEL_NORMAL);          break;        case SHAPE_LINE:// 直线          mShape = new Line(this, MODEL_NORMAL);          break;        case SHAPE_CIRCLE:// 圆          mShape = new Circle(this, MODEL_NORMAL);          break;        case SHAPE_SQUARE:// 正方形          mShape = new Square(this, MODEL_NORMAL);          break;        case SHAPE_RECT:// 矩形          mShape = new Rectangle(this, MODEL_NORMAL);          break;        case SHAPE_OVAL:// 椭圆形          mShape = new Oval(this, MODEL_NORMAL);          break;        default:          break;        }        return true;      case MotionEvent.ACTION_MOVE:        x = (int) event.getX();        y = (int) event.getY();        // 进入拖动模式        if (event.getPointerCount() >= 2) {          mIsCanvasMoving = true;          resetView();          return false;        }        // 虽然只有一个触摸点,但是没恢复绘画模式        if (!mIsCanvasMoving) {          // 是否结束绘画          mIsTouchUp = false;          mShape.touchMove(mStartX, mStartY, x, y);        }        return true;      case MotionEvent.ACTION_UP:        if (!mIsCanvasMoving) {          mIsTouchUp = true;          mShape.drawShape(mCanvas);          // 更新画布          invalidate();        } else {          // 恢复绘画模式          mIsCanvasMoving = false;        }        return true;      }    }    return false;  }  @Override  public boolean onKeyDown(int keyCode, KeyEvent event) {    if (mHardware.onKeyDown(keyCode, event)) {      return true;    }    return super.onKeyDown(keyCode, event);  }  @Override  public boolean onKeyUp(int keyCode, KeyEvent event) {    if (mHardware.onKeyUp(keyCode, event)) {      return true;    }    return super.onKeyUp(keyCode, event);  }  public void resetView() {    mIsTouchUp = true;    invalidate();  }  public void clear() {    restoreBitmap();    invalidate();  }  public void setPenWidth(float penWidth) {    mPenWidth = penWidth;  }  public float getPenWidth() {    return mPenWidth;  }  public void setEraserWidth(float penWidth) {    mEraserWidth = penWidth;  }  public float getEraserWidth() {    return mEraserWidth;  }  public void setPenColor(int color) {    mColor = color;  }  public int getPenColor() {    return mColor;  }  public void setModel(int model) {    mModel = model;  }  public void setShape(int shape) {    mShapeType = shape;  }  public int getShap() {    return mShapeType;  }  public boolean useForWriting(MotionEvent event) {    return !mOnlyPenInput || mHardware.isPenEvent(event);  }  public boolean useForTouch(MotionEvent event) {    return !mOnlyPenInput        || (mOnlyPenInput && !mHardware.isPenEvent(event));  }  private void restoreBitmap() {    mBitmap.eraseColor(Constants.BACK_COLOR);    mCanvas = new Canvas(mBitmap);  }  public void setOnlyPenInput(boolean b) {    mOnlyPenInput = b;  }}

 

 

  MainApplication类

 

  

public class MainApplication extends Application {  public static final float scale = 210f / 297f;  public static int CANVAS_WIDTH;  public static int CANVAS_HEIGHT;  public static int SCREEN_WIDTH;  public static int SCREEN_HEIGHT;  private static Bitmap curBitmap;  @SuppressWarnings("deprecation")  @Override  public void onCreate() {    super.onCreate();    Display display = ((WindowManager) getSystemService("window"))        .getDefaultDisplay();    if (display.getWidth() < display.getHeight()) {      SCREEN_HEIGHT = display.getWidth();      SCREEN_WIDTH = display.getHeight();    } else {      SCREEN_WIDTH = display.getWidth();      SCREEN_HEIGHT = display.getHeight();    }    CANVAS_WIDTH = MainApplication.SCREEN_WIDTH;    CANVAS_HEIGHT = (int) (MainApplication.SCREEN_WIDTH / scale);    createPage();  }  private static Bitmap createBitmap() {    Bitmap bitmap = Bitmap.createBitmap(CANVAS_WIDTH, CANVAS_HEIGHT,        Bitmap.Config.ARGB_8888);    bitmap.eraseColor(Constants.BACK_COLOR);    return bitmap;  }  public static Bitmap getBitmap() {    return curBitmap;  }  public static void createPage() {    curBitmap = createBitmap();  }  @Override  public void onTerminate() {    super.onTerminate();    curBitmap.recycle();    curBitmap = null;  }}

  

  下面是效果图:

 Android电子白板实现,Canvas画布images/loading.gif' data-original="http://images0.cnblogs.com/blog2015/785303/201507/171159048292778.png" />

 

Android电子白板实现,Canvas画布

 

Android电子白板实现,Canvas画布

 

 

  好了,以上就是这个白板的主要功能和核心代码,有任何好的建议或者不明白的可以在下方评论。

  源码就不上传了,其余就是一些布局和图片。

 




原标题:Android电子白板实现,Canvas画布

关键词:Android

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流