devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

android中自定义画布Canvas的实现_android 自由画布 是不是从pointerlocation改造的?

作者：你好赵伟 | 2024-05-20 17:51:56

赞

踩

android 自由画布 是不是从pointerlocation改造的?
一、要求：
1.画布绘制控件的方法，控件应该是一个可以自定义的；
2.画布是可以缩放，且提供一个缩放的方法供外使用；
3.控件之间连线的方法；
4.画布缩放之后手势滑动的识别实现；

二、在github里面种找到了一个类似度挺高的开源项目：

github中的第三方的开源项目地址：

在第三方的FabricView的项目中已经实现了：

1.控件的可以绘制；
2.可以连线；
3.未实现的是缩放的实现？

4.手势滑动的识别？

5.缩放之后的滑动识别？

三、需求改造：
把开源项目经过修剪和添加来实现自己项目中的画布功能


1.在画板上连线已经实现：

  1. public boolean onTouchDrawMode(MotionEvent event)
  2.     {
  3.         // get location of touch
  4.         float eventX = event.getX();
  5.         float eventY = event.getY();
  6.  
  7.         // based on the users action, start drawing
  8.         switch (event.getAction()) {
  9.             case MotionEvent.ACTION_DOWN:
  10.                 // create new path and paint
  11.                 currentPath = new CPath();
  12.                 currentPaint = new Paint();
  13.                 currentPaint.setAntiAlias(true);
  14.                 currentPaint.setColor(mColor);
  15.                 currentPaint.setStyle(mStyle);
  16.                 currentPaint.setStrokeJoin(Paint.Join.ROUND);
  17.                 currentPaint.setStrokeWidth(mSize);
  18.                 currentPath.moveTo(eventX, eventY);
  19.                 currentPath.setPaint(currentPaint);
  20.                 // capture touched locations
  21.                 lastTouchX = eventX;
  22.                 lastTouchY = eventY;
  23.                 Log.i("Everbrilliant","点下去位置lastTouchX:"+lastTouchX+">>lastTouchY:"+lastTouchY);
  24.                 mDrawableList.add(currentPath);
  25.                 return true;
  26.             case MotionEvent.ACTION_MOVE:
  27.             case MotionEvent.ACTION_UP:
  28.                 currentPath.lineTo(eventX, eventY);
  29.                 // When the hardware tracks events faster than they are delivered, the
  30.                 // event will contain a history of those skipped points.
  31.                 int historySize = event.getHistorySize();
  32.                 for (int i = 0; i < historySize; i++) {
  33.                     float historicalX = event.getHistoricalX(i);
  34.                     float historicalY = event.getHistoricalY(i);
  35.                     Log.i("everb","存在缓存中的值historicalX:"+historicalX+">>historicalY:"+historicalY);
  36.                     if (historicalX < dirtyRect.left) {
  37.                         dirtyRect.left = historicalX;
  38.                     } else if (historicalX > dirtyRect.right) {
  39.                         dirtyRect.right = historicalX;
  40.                     }
  41.                     if (historicalY < dirtyRect.top) {
  42.                         dirtyRect.top = historicalY;
  43.                     } else if (historicalY > dirtyRect.bottom) {
  44.                         dirtyRect.bottom = historicalY;
  45.                     }
  46.                     currentPath.lineTo(historicalX, historicalY);
  47.                 }
  48.  
  49.                 // After replaying history, connect the line to the touch point.
  50.                 currentPath.lineTo(eventX, eventY);
  51.                 cleanDirtyRegion(eventX, eventY);
  52.                 break;
  53.             default:
  54.                 return false;
  55.         }
  56.  
  57.         // Include some padding to ensure nothing is clipped
  58.         invalidate(
  59.                 (int) (dirtyRect.left - 20),
  60.                 (int) (dirtyRect.top - 20),
  61.                 (int) (dirtyRect.right + 20),
  62.                 (int) (dirtyRect.bottom + 20));
  63.  
  64.         // register most recent touch locations
  65.         lastTouchX = eventX;
  66.         lastTouchY = eventY;
  67.         return true;
  68.     }
2.绘制控件只要一类实现CDrawable的接口并把这控件添加FabricView画布的onDraw方法中的数组中既可以 

  1. private ArrayList<CDrawable> mDrawableList = new ArrayList<>();
  2.     /*
  3.      * Called when there is the canvas is being re-drawn.
  4.      */
  5.     @Override
  6.     protected void onDraw(Canvas canvas) {
  7.         // check if background needs to be redrawn
  8.         mBackgroundMode=BACKGROUND_STYLE_NOTEBOOK_PAPER;
  9.         drawBackground(canvas, mBackgroundMode);
  10.  
  11.         // go through each item in the list and draw it
  12.         for (int i = 0; i < mDrawableList.size(); i++) {
  13.             try {
  14.                 mDrawableList.get(i).draw(canvas);
  15.             }
  16.  
  17.             catch(Exception ex)
  18.             {
  19.  
  20.             }
  21.         }
  22.     }

3.至于画布的缩放方法可以用view中的setScaleX、setScaleY来实现缩放。这里在放大后还要画布是可以拖动到：

  1. private void updateScaleStep(int newScaleIndex) {
  2.         if (newScaleIndex != mCurrentZoomScaleIndex) {
  3.             final float oldViewScale = mViewScale;
  4.  
  5.             mCurrentZoomScaleIndex = newScaleIndex;
  6.             mViewScale = ZOOM_SCALES[mCurrentZoomScaleIndex];
  7.             final float scaleDifference = mViewScale - oldViewScale;
  8.             scrollBy((int) (scaleDifference * getMeasuredWidth() / 2),
  9.                     (int) (scaleDifference * getMeasuredHeight() / 2));
  10.  
  11.             if (shouldDrawGrid()) {
  12.                 mGridRenderer.updateGridBitmap(mViewScale);
  13.             }
  14.  
  15.             mWorkspaceView.setScaleX(mViewScale);
  16.             mWorkspaceView.setScaleY(mViewScale);
  17.             mWorkspaceView.requestLayout();
  18.         }
  19.     }

4.手势的滑动识别：则在FabricView的onTouchEvent实现手势的滑动识别：
在view中GestrueDetector.OnGstureListener监听点击屏幕的接口和GestrueDetector.OnDoubleTapListener监听双击的接口实现这两个接口就可以实现手势的实现。 

  1. mTapGestureDetector = new GestureDetector(getContext(), new TapGestureListener());          //设置手势的监听
  2.  
  3. private class TapGestureListener implements GestureDetector.OnGestureListener, GestureDetector.OnDoubleTapListener {
  4.  
  5.         @Override
  6.         public boolean onDown(MotionEvent motionEvent) {
  7.             return false;
  8.         }
  9.  
  10.         @Override
  11.         public void onShowPress(MotionEvent motionEvent) {
  12.  
  13.         }
  14.  
  15.         @Override
  16.         public boolean onSingleTapUp(MotionEvent motionEvent) {
  17.             return false;
  18.         }
  19.  
  20.         @Override
  21.         public boolean onScroll(MotionEvent motionEvent, MotionEvent motionEvent1, float v, float v1) {
  22.             return false;
  23.         }
  24.  
  25.         @Override
  26.         public void onLongPress(MotionEvent motionEvent) {
  27.             // TODO: 2017/6/29 长按可以设置模式为连线
  28.             Toast.makeText(mContext,"实现了长按手势",Toast.LENGTH_SHORT).show();
  29.         }
  30.  
  31.         @Override
  32.         public boolean onFling(MotionEvent motionEvent, MotionEvent motionEvent1, float v, float v1) {
  33.             return false;
  34.         }
  35.  
  36.         @Override
  37.         public boolean onSingleTapConfirmed(MotionEvent motionEvent) {
  38.             return false;
  39.         }
  40.  
  41.         @Override
  42.         public boolean onDoubleTap(MotionEvent motionEvent) {
  43.             return false;
  44.         }
  45.  
  46.         @Override
  47.         public boolean onDoubleTapEvent(MotionEvent motionEvent) {
  48.             return false;
  49.         }
  50.     }

5.缩放后手势滑动识别的实现，同样是在view中有ScaleGestureDetector.SimpleOnScaleGestureListener的接口实现之后运用坐标系的改造，通过坐标的算出比例值设置setScaleX、setScaleY,就可以实现手势的缩放是实现： 
  1. mScaleGestureDetector = new ScaleGestureDetector(getContext(), new ScaleGestureListener());         //设置手势缩放的监听
  2.  
  3.  private class ScaleGestureListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
  4.         private float mStartFocusX;
  5.         private float mStartFocusY;
  6.         private float mStartScale;       
  7.         private int mStartScrollX;
  8.         private int mStartScrollY;
  9.  
  10.         @Override
  11.         public boolean onScaleBegin(ScaleGestureDetector detector) {
  12.             mStartFocusX = detector.getFocusX();
  13.             mStartFocusY = detector.getFocusY();
  14.             mStartScrollX = getScrollX();
  15.             mStartScrollY = getScrollY();
  16.  
  17.             mStartScale = mViewScale;
  18.             return true;
  19.         }
  20.  
  21.         @Override
  22.         public boolean onScale(ScaleGestureDetector detector) {
  23.             final float oldViewScale = mViewScale;
  24.  
  25.             final float scaleFactor = detector.getScaleFactor();
  26.             mViewScale *= scaleFactor;
  27.  
  28.             if (mViewScale < ZOOM_SCALES[0]) {
  29.                 mCurrentZoomScaleIndex = 0;
  30.                 mViewScale = ZOOM_SCALES[mCurrentZoomScaleIndex];
  31.             } else if (mViewScale > ZOOM_SCALES[ZOOM_SCALES.length - 1]) {
  32.                 mCurrentZoomScaleIndex = ZOOM_SCALES.length - 1;
  33.                 mViewScale = ZOOM_SCALES[mCurrentZoomScaleIndex];
  34.             } else {             
  35.                 float minDist = Float.MAX_VALUE;
  36.                 int index = ZOOM_SCALES.length - 1;
  37.                 for (int i = 0; i < ZOOM_SCALES.length; i++) {
  38.                     float dist = Math.abs(mViewScale - ZOOM_SCALES[i]);
  39.                     if (dist < minDist) {
  40.                         minDist = dist;
  41.                     } else {                       
  42.                         index = i - 1;
  43.                         break;
  44.                     }
  45.                 }
  46.                 mCurrentZoomScaleIndex = index;
  47.             }         
  48.            ActionEditorCanvasView.this.setScaleX(mViewScale);
  49.             ActionEditorCanvasView.this.setScaleY(mViewScale);           
  50.             final float scaleDifference = mViewScale - mStartScale;
  51.             final int scrollScaleX = (int) (scaleDifference * mStartFocusX);
  52.             final int scrollScaleY = (int) (scaleDifference * mStartFocusY);
  53.             final int scrollPanX = (int) (mStartFocusX - detector.getFocusX());
  54.             final int scrollPanY = (int) (mStartFocusY - detector.getFocusY());
  55.             scrollTo(mStartScrollX + scrollScaleX + scrollPanX,
  56.                     mStartScrollY + scrollScaleY + scrollPanY);
  57.             return true;
  58.         }
  59.     }
四.核心类的分析：
1.CDrawable接口，只要实现这个接口的控件就可以绘制到自定义的画布中： 
  1. CDrawable {
  2.     Paint getPaint();                   //获取Paint
  3.     int getXcoords();                   //获取X轴坐标
  4.     int getYcoords();                   //获取Y轴坐标
  5.     void setXcoords(int x);             //设置X轴坐标
  6.     void setYcoords(int y);             //设置Y轴坐标
  7.     void setPaint(Paint p);             //设置画笔
  8.     void draw(Canvas canvas);           //绘制画板
  9. }
  2.FabricView抽象类继承于View,主要功能是把控件绘制到这个画布中、绘制画布的背景、区分了几种绘制模式。 

  1. public abstract  class FabricView extends View {
  2.     // painting objects and properties
  3.     public ArrayList<CDrawable> mDrawableList = new ArrayList<>();
  4.     private int mColor = Color.BLACK;
  5.  
  6.     // Canvas interaction modes
  7.     private int mInteractionMode = DRAW_MODE;
  8.  
  9.     // background color of the library
  10.     private int mBackgroundColor = Color.WHITE;
  11.     // default style for the library
  12.     private Paint.Style mStyle = Paint.Style.STROKE;
  13.  
  14.     // default stroke size for the library    默认点击的尺寸
  15.     private float mSize = 5f;
  16.  
  17.     // flag indicating whether or not the background needs to be redrawn
  18.     private boolean mRedrawBackground;
  19.  
  20.     // background mode for the library, default to blank
  21.     private int mBackgroundMode = BACKGROUND_STYLE_BLANK;
  22.  
  23.     // Default Notebook left line color
  24.     public static final int NOTEBOOK_LEFT_LINE_COLOR = Color.RED;
  25.  
  26.     // Flag indicating that we are waiting for a location for the text
  27.     private boolean mTextExpectTouch;
  28.  
  29.     // Vars to decrease dirty area and increase performance
  30.     private float lastTouchX, lastTouchY;
  31.     private final RectF dirtyRect = new RectF();
  32.     
  33.     // keep track of path and paint being in use
  34.     CPath currentPath;
  35.     Paint currentPaint;
  36.  
  37.     /*********************************************************************************************/
  38.     /************************************     FLAGS    *******************************************/
  39.     /*********************************************************************************************/
  40.     // Default Background Styles         背景颜色
  41.     public static final int BACKGROUND_STYLE_BLANK = 0;
  42.     public static final int BACKGROUND_STYLE_NOTEBOOK_PAPER = 1;
  43.     public static final int BACKGROUND_STYLE_GRAPH_PAPER = 2;
  44.  
  45.     // Interactive Modes
  46.     public static final int DRAW_MODE = 0;
  47.     public static final int SELECT_MODE = 1; // TODO Support Object Selection.
  48.     public static final int ROTATE_MODE = 2; // TODO Support Object ROtation.
  49.     public static final int LOCKED_MODE = 3;
  50.  
  51.     /*********************************************************************************************/
  52.     /**********************************     CONSTANTS    *****************************************/
  53.     /*********************************************************************************************/
  54.     public static final int NOTEBOOK_LEFT_LINE_PADDING = 120;
  55.  
  56.     /*********************************************************************************************/
  57.     /************************************     TO-DOs    ******************************************/
  58.     /*********************************************************************************************/
  59.     private float mZoomLevel = 1.0f; //TODO Support Zoom                要去做支持放大缩小的功能
  60.     private float mHorizontalOffset = 1, mVerticalOffset = 1; // TODO Support Offset and Viewport  支持可以偏移的功能
  61.     public int mAutoscrollDistance = 100; // TODO Support Autoscroll
  62.  
  63.  
  64.     /**
  65.      * Default Constructor, sets sane values.
  66.      *
  67.      * @param context the activity that containts the view
  68.      * @param attrs   view attributes
  69.      */
  70.     public FabricView(Context context, AttributeSet attrs) {
  71.         super(context, attrs);
  72.         setFocusable(true);
  73.         setFocusableInTouchMode(true);
  74.         this.setBackgroundColor(mBackgroundColor);
  75.         mTextExpectTouch = false;
  76.  
  77.     }
  78.  
  79.     /**
  80.      * Called when there is the canvas is being re-drawn.
  81.      */
  82.     @Override
  83.     protected void onDraw(Canvas canvas) {
  84.         // check if background needs to be redrawn
  85.         mBackgroundMode=BACKGROUND_STYLE_NOTEBOOK_PAPER;
  86.         drawBackground(canvas, mBackgroundMode);
  87.  
  88.         // go through each item in the list and draw it
  89.         for (int i = 0; i < mDrawableList.size(); i++) {
  90.             try {
  91.                 mDrawableList.get(i).draw(canvas);
  92.             }
  93.  
  94.             catch(Exception ex)
  95.             {
  96.  
  97.             }
  98.         }
  99.     }
  100.  
  101.  
  102.     /*********************************************************************************************/
  103.     /*******************************     Handling User Touch    **********************************/
  104.     /*********************************************************************************************/
  105.  
  106.     /**
  107.      * Handles user touch event
  108.      *
  109.      * @param event the user's motion event
  110.      * @return true, the event is consumed.
  111.      */
  112.     @Override
  113.     public boolean onTouchEvent(MotionEvent event) {
  114.         // delegate action to the correct method
  115.         if (getInteractionMode() == DRAW_MODE)                  //绘画的模式
  116.             return onTouchDrawMode(event);
  117.         else if (getInteractionMode() == SELECT_MODE)           //选择的模式
  118.             return onTouchSelectMode(event);
  119.         else if (getInteractionMode() == ROTATE_MODE)
  120.             return onTouchRotateMode(event);
  121.         // if none of the above are selected, delegate to locked mode
  122.         else
  123.             return onTouchLockedMode(event);
  124.     }
  125.  
  126.     /**
  127.      * Handles touch event if the mode is set to locked
  128.      * @param event the event to handle
  129.      * @return false, shouldn't do anything with it for now
  130.      */
  131.     private boolean onTouchLockedMode(MotionEvent event) {
  132.         // return false since we don't want to do anything so far
  133.         return true;
  134.     }
  135.  
  136.     /**
  137.      * Handles the touch input if the mode is set to rotate
  138.      * @param event the touch event
  139.      * @return the result of the action
  140.      */
  141.     private boolean onTouchRotateMode(MotionEvent event) {
  142.         return false;
  143.     }
  144.  
  145.  
  146.     /**
  147.      * Handles the touch input if the mode is set to draw
  148.      * @param event the touch event
  149.      * @return the result of the action
  150.      */
  151.     public boolean onTouchDrawMode(MotionEvent event)
  152.     {
  153.         // get location of touch
  154.         float eventX = event.getX();
  155.         float eventY = event.getY();
  156.         Log.i("everb", "划线或的位置X信息："+ event.getX()+"划线或的位置Y信息："+eventY);
  157.  
  158.  
  159.         // based on the users action, start drawing
  160.         switch (event.getAction()) {
  161.             case MotionEvent.ACTION_DOWN:
  162.                 // create new path and paint
  163.                 currentPath = new CPath();
  164.                 currentPaint = new Paint();
  165.                 currentPaint.setAntiAlias(true);
  166.                 currentPaint.setColor(mColor);
  167.                 currentPaint.setStyle(mStyle);
  168.                 currentPaint.setStrokeJoin(Paint.Join.ROUND);
  169.                 currentPaint.setStrokeWidth(mSize);
  170.                 currentPath.moveTo(eventX, eventY);
  171.                 currentPath.setPaint(currentPaint);
  172.                 // capture touched locations
  173.                 lastTouchX = eventX;
  174.                 lastTouchY = eventY;
  175.                 mDrawableList.add(currentPath);
  176.                 return true;
  177.             case MotionEvent.ACTION_MOVE:
  178.             case MotionEvent.ACTION_UP:
  179.                 currentPath.lineTo(eventX, eventY);
  180.                 // When the hardware tracks events faster than they are delivered, the
  181.                 // event will contain a history of those skipped points.
  182.                 int historySize = event.getHistorySize();
  183.                 for (int i = 0; i < historySize; i++) {
  184.                     float historicalX = event.getHistoricalX(i);
  185.                     float historicalY = event.getHistoricalY(i);
  186.                     if (historicalX < dirtyRect.left) {
  187.                         dirtyRect.left = historicalX;
  188.                     } else if (historicalX > dirtyRect.right) {
  189.                         dirtyRect.right = historicalX;
  190.                     }
  191.                     if (historicalY < dirtyRect.top) {
  192.                         dirtyRect.top = historicalY;
  193.                     } else if (historicalY > dirtyRect.bottom) {
  194.                         dirtyRect.bottom = historicalY;
  195.                     }
  196.                     currentPath.lineTo(historicalX, historicalY);
  197.                 }
  198.  
  199.                 // After replaying history, connect the line to the touch point.
  200.                 currentPath.lineTo(eventX, eventY);
  201.                 cleanDirtyRegion(eventX, eventY);
  202.                 break;
  203.             default:
  204.                 return false;
  205.         }
  206.  
  207.         // Include some padding to ensure nothing is clipped
  208.         invalidate(
  209.                 (int) (dirtyRect.left - 20),
  210.                 (int) (dirtyRect.top - 20),
  211.                 (int) (dirtyRect.right + 20),
  212.                 (int) (dirtyRect.bottom + 20));
  213.  
  214.         // register most recent touch locations
  215.         lastTouchX = eventX;
  216.         lastTouchY = eventY;
  217.         return true;
  218.     }
  219.  
  220.     /**
  221.      * Handles the touch input if the mode is set to select
  222.      * @param event the touch event
  223.      */
  224.     private boolean onTouchSelectMode(MotionEvent event) {
  225.         // TODO Implement Method
  226.         return false;
  227.     }
  228.  
  229.  
  230.     /*******************************************
  231.      * Drawing Events
  232.      ******************************************/
  233.     /**
  234.      * Draw the background on the canvas
  235.      * @param canvas the canvas to draw on
  236.      * @param backgroundMode one of BACKGROUND_STYLE_GRAPH_PAPER, BACKGROUND_STYLE_NOTEBOOK_PAPER, BACKGROUND_STYLE_BLANK
  237.      */
  238.     public void drawBackground(Canvas canvas, int backgroundMode) {
  239.         canvas.drawColor(mBackgroundColor);
  240.         if(backgroundMode != BACKGROUND_STYLE_BLANK) {
  241.             Paint linePaint = new Paint();
  242.             linePaint.setColor(Color.argb(50, 0, 0, 0));
  243.             linePaint.setStyle(mStyle);
  244.             linePaint.setStrokeJoin(Paint.Join.ROUND);
  245.             linePaint.setStrokeWidth(mSize - 2f);
  246.             switch (backgroundMode) {
  247.                 case BACKGROUND_STYLE_GRAPH_PAPER:
  248.                     drawGraphPaperBackground(canvas, linePaint);
  249.                     break;
  250.                 case BACKGROUND_STYLE_NOTEBOOK_PAPER:
  251.                     drawNotebookPaperBackground(canvas, linePaint);
  252.                 default:
  253.                     break;
  254.             }
  255.         }
  256.         mRedrawBackground = false;
  257.     }
  258.  
  259.     /**
  260.      * Draws a graph paper background on the view
  261.      * @param canvas the canvas to draw on
  262.      * @param paint the paint to use
  263.      */
  264.     private void drawGraphPaperBackground(Canvas canvas, Paint paint) {
  265.         int i = 0;
  266.         boolean doneH = false, doneV = false;
  267.  
  268.         // while we still need to draw either H or V
  269.         while (!(doneH && doneV)) {
  270.  
  271.             // check if there is more H lines to draw
  272.             if (i < canvas.getHeight())
  273.                 canvas.drawLine(0, i, canvas.getWidth(), i, paint);
  274.             else
  275.                 doneH = true;
  276.  
  277.             // check if there is more V lines to draw
  278.             if (i < canvas.getWidth())
  279.                 canvas.drawLine(i, 0, i, canvas.getHeight(), paint);
  280.             else
  281.                 doneV = true;
  282.  
  283.             // declare as done
  284.             i += 75;
  285.         }
  286.     }
  287.  
  288.     /**
  289.      * Draws a notebook paper background on the view
  290.      * @param canvas the canvas to draw on
  291.      * @param paint the paint to use
  292.      */
  293.     private void drawNotebookPaperBackground(Canvas canvas, Paint paint) {
  294.         int i = 0;
  295.         boolean doneV = false;
  296.         // draw horizental lines
  297.         while (!(doneV)) {
  298.             if (i < canvas.getHeight())
  299.                 canvas.drawLine(0, i, canvas.getWidth(), i, paint);
  300.             else
  301.                 doneV = true;
  302.             i += 75;
  303.         }
  304.         // change line color
  305.         paint.setColor(NOTEBOOK_LEFT_LINE_COLOR);
  306.         // draw side line
  307.         canvas.drawLine(NOTEBOOK_LEFT_LINE_PADDING, 0,
  308.                 NOTEBOOK_LEFT_LINE_PADDING, canvas.getHeight(), paint);
  309.  
  310.  
  311.     }
  312.  
  313.     /**
  314.      * Draw text on the screen
  315.      * @param text the text to draw
  316.      * @param x the x location of the text
  317.      * @param y the y location of the text
  318.      * @param p the paint to use
  319.      */
  320.     public void drawText(String text, int x, int y, Paint p) {
  321.         mDrawableList.add(new CText(text, x, y, p));
  322.         invalidate();
  323.     }
  324.  
  325.     /**
  326.      * Capture Text from the keyboard and draw it on the screen
  327.      * //TODO Implement the method
  328.      */
  329.     private void drawTextFromKeyboard() {
  330.         Toast.makeText(getContext(), "Touch where you want the text to be", Toast.LENGTH_LONG).show();
  331.         //TODO
  332.         mTextExpectTouch = true;
  333.     }
  334.  
  335.     /**
  336.      * Retrieve the region needing to be redrawn
  337.      * @param eventX The current x location of the touch
  338.      * @param eventY the current y location of the touch
  339.      */
  340.     private void cleanDirtyRegion(float eventX, float eventY) {
  341.         // figure out the sides of the dirty region
  342.         dirtyRect.left = Math.min(lastTouchX, eventX);
  343.         dirtyRect.right = Math.max(lastTouchX, eventX);
  344.         dirtyRect.top = Math.min(lastTouchY, eventY);
  345.         dirtyRect.bottom = Math.max(lastTouchY, eventY);
  346.     }
  347.  
  348.     /**
  349.      * Clean the canvas, remove everything drawn on the canvas.
  350.      */
  351.     public void cleanPage() {
  352.         // remove everything from the list
  353.         while (!(mDrawableList.isEmpty())) {
  354.             mDrawableList.remove(0);
  355.         }
  356.         // request to redraw the canvas
  357.         invalidate();
  358.     }
  359.  
  360.     /**
  361.      * Draws an image on the canvas
  362.      *
  363.      * @param x      location of the image
  364.      * @param y      location of the image
  365.      * @param width  the width of the image
  366.      * @param height the height of the image
  367.      * @param pic    the image itself
  368.      */
  369.     public void drawImage(int x, int y, int width, int height, Bitmap pic) {
  370.         CBitmap bitmap = new CBitmap(pic, x, y);
  371.         bitmap.setWidth(width);
  372.         bitmap.setHeight(height);
  373.         mDrawableList.add(bitmap);
  374.         invalidate();
  375.     }
  376.  
  377.  
  378.     /*******************************************
  379.      * Getters and Setters
  380.      ******************************************/
  381.  
  382.  
  383.     /**
  384.      * Gets what has been drawn on the canvas so far as a bitmap
  385.      * @return Bitmap of the canvas.
  386.      */
  387.     public Bitmap getCanvasBitmap()
  388.     {
  389.         // build drawing cache of the canvas, use it to create a new bitmap, then destroy it.
  390.         buildDrawingCache();
  391.         Bitmap mCanvasBitmap = Bitmap.createBitmap(getDrawingCache());
  392.         destroyDrawingCache();
  393.  
  394.         // return the created bitmap.
  395.         return mCanvasBitmap;
  396.     }
  397.  
  398.     public int getColor() {
  399.         return mColor;
  400.     }
  401.  
  402.     public void setColor(int mColor) {
  403.         this.mColor = mColor;
  404.     }
  405.  
  406.     public int getBackgroundColor() {
  407.         return mBackgroundColor;
  408.     }
  409.  
  410.     public int getBackgroundMode() {
  411.         return mBackgroundMode;
  412.     }
  413.  
  414.     public void setBackgroundMode(int mBackgroundMode) {
  415.         this.mBackgroundMode = mBackgroundMode;
  416.         invalidate();
  417.     }
  418.  
  419.     public void setBackgroundColor(int mBackgroundColor) {
  420.         this.mBackgroundColor = mBackgroundColor;
  421.     }
  422.  
  423.     public Paint.Style getStyle() {
  424.         return mStyle;
  425.     }
  426.  
  427.     public void setStyle(Paint.Style mStyle) {
  428.         this.mStyle = mStyle;
  429.     }
  430.  
  431.     public float getSize() {
  432.         return mSize;
  433.     }
  434.  
  435.     public void setSize(float mSize) {
  436.         this.mSize = mSize;
  437.     }
  438.  
  439.  
  440.     public int getInteractionMode() {
  441.         return mInteractionMode;
  442.     }
  443.  
  444.     public void setInteractionMode(int interactionMode) {
  445.  
  446.         // if the value passed is not any of the flags, set the library to locked mode
  447.         if (interactionMode > LOCKED_MODE)
  448.             interactionMode = LOCKED_MODE;
  449.         else if (interactionMode < DRAW_MODE)
  450.             interactionMode = LOCKED_MODE;
  451.  
  452.         this.mInteractionMode = interactionMode;
  453.     }
  454. }

3.接下来在上述两个类和接口的基础上，定制自己的FabricCanvasView画布： 

  1. package com.lejurobot.aelos.aelosmini.view;
  2.  
  3. import android.content.Context;
  4. import android.graphics.Point;
  5. import android.util.AttributeSet;
  6. import android.util.Log;
  7. import android.view.GestureDetector;
  8. import android.view.MotionEvent;
  9. import android.view.ScaleGestureDetector;
  10. import android.widget.Toast;
  11.  
  12. import com.lejurobot.aelos.aelosmini.activities.ActionEditorActivity;
  13. import com.lejurobot.aelos.aelosmini.view.FabricView.CDrawable;
  14. import com.lejurobot.aelos.aelosmini.view.FabricView.FabricView;
  15.  
  16.  
  17. /**
  18.  * @author wangyao
  19.  * @package com.example.administrator.myapplication
  20.  * @date 2017/6/27  14:05
  21.  * @describe 实现一个画布的放置控件、缩放画布、控件之间的连线、画布的手势识别、缩放后手势滑动的识别
  22.  * @project
  23.  */
  24.  
  25. public class ActionEditorCanvasView extends FabricView {
  26.  
  27.     private Context mContext;
  28.     // Scale and zoom in/out factor.
  29.     private static final int INIT_ZOOM_SCALES_INDEX = 0;
  30.     private int mCurrentZoomScaleIndex = INIT_ZOOM_SCALES_INDEX;
  31.     private static final float[] ZOOM_SCALES = new float[]{1.0f, 1.25f, 1.5f, 1.75f, 2.0f};
  32.     private float mViewScale = ZOOM_SCALES[INIT_ZOOM_SCALES_INDEX];
  33.  
  34.     protected boolean mScrollable = true;
  35.     private ScaleGestureDetector mScaleGestureDetector;                 //缩放手势
  36.     private GestureDetector mTapGestureDetector;                        //手势监听类
  37.     private int mPanningPointerId = MotionEvent.INVALID_POINTER_ID;
  38.     private Point mPanningStart = new Point();
  39.     private int mOriginalScrollX;
  40.     private int mOriginalScrollY;
  41.     private float mOffSetViewScroll;
  42.  
  43.     // Default desired width of the view in pixels.
  44.     private static final int DESIRED_WIDTH = 2048;
  45.     // Default desired height of the view in pixels.
  46.     private static final int DESIRED_HEIGHT = 2048;
  47.     // Interactive Modes
  48.     public static final int DRAW_MODE = 0;              //可以绘制线段的模式
  49.     public static final int SELECT_MODE = 1; // TODO Support Object Selection.
  50.     public static final int ROTATE_MODE = 2; // TODO Support Object ROtation.
  51.     public static final int LOCKED_MODE = 3;              //空模式
  52.  
  53.     // Default Background Styles         背景颜色
  54.     public static final int BACKGROUND_STYLE_BLANK = 0;
  55.     public static final int BACKGROUND_STYLE_NOTEBOOK_PAPER = 1;
  56.     public static final int BACKGROUND_STYLE_GRAPH_PAPER = 2;
  57.  
  58.  
  59.     public ActionEditorCanvasView(Context context, AttributeSet attrs) {
  60.         super(context, attrs);
  61.         this.mContext=context;
  62.     }
  63.  
  64.     /**
  65.      * The method onFinishInflate() will be called after all children have been added.
  66.      * 这个方法是所有的子view被添加之后调用
  67.      */
  68.     @Override
  69.     public void onFinishInflate() {
  70.         super.onFinishInflate();
  71.  
  72.         // Setting the child view's pivot point to (0,0) means scaling leaves top-left corner in
  73.         // place means there is no need to adjust view translation.
  74.         this.setPivotX(0);
  75.         this.setPivotY(0);
  76.  
  77.         setWillNotDraw(false);
  78.         setHorizontalScrollBarEnabled(mScrollable);                 //水平滑动滚动条的设置
  79.         setVerticalScrollBarEnabled(mScrollable);                   //竖直滑动滚动条的设置
  80.         setBackgroundMode(BACKGROUND_STYLE_GRAPH_PAPER);
  81.         mScaleGestureDetector = new ScaleGestureDetector(getContext(), new ScaleGestureListener());         //设置手势缩放的监听
  82.  
  83.         mTapGestureDetector = new GestureDetector(getContext(), new TapGestureListener());          //设置手势的监听
  84.  
  85.     }
  86.  
  87.     public void setBackgroundMode(int mBackgroundMode) {
  88.         super.setBackgroundMode(mBackgroundMode);
  89.     }
  90.  
  91.     /**
  92.      * 设置画布所处在的模式,可以添加并设置其他的模式
  93.      */
  94.     public void setInteractionMode(int interactionMode) {
  95.         if (interactionMode == DRAW_MODE) {
  96.             super.setInteractionMode(DRAW_MODE);
  97.         } else if (interactionMode == LOCKED_MODE) {
  98.             super.setInteractionMode(LOCKED_MODE);
  99.         }else if (interactionMode==SELECT_MODE){
  100.             super.setInteractionMode(SELECT_MODE);
  101.         }
  102.  
  103.     }
  104.  
  105.     /**
  106.      * 增加画布里面的控件或其他实现了CDrawable接口的类
  107.      */
  108.     public boolean addCanvasDrawable(CDrawable cDrawable) {
  109.         super.mDrawableList.add(cDrawable);
  110.         return true;
  111.     }
  112.  
  113.     /**
  114.      * 清除画布里面的控件
  115.      */
  116.     public void cleanPager() {
  117.         super.cleanPage();
  118.     }
  119.  
  120.     /**
  121.      * 重置画布的大小尺寸
  122.      */
  123.     public void resetView() {
  124.         // Reset scrolling state.
  125.         mPanningPointerId = MotionEvent.INVALID_POINTER_ID;
  126.         mPanningStart.set(0, 0);
  127.         mOriginalScrollX = 0;
  128.         mOriginalScrollY = 0;
  129.         updateScaleStep(INIT_ZOOM_SCALES_INDEX);
  130.         scrollTo((int) this.getX(), (int) this.getY());
  131.     }
  132.  
  133.  
  134.     @Override
  135.     public boolean onTouchDrawMode(MotionEvent event) {
  136.         event.offsetLocation(getScrollX(), getScrollY());                //缩放后偏移的距离，保证缩放后触点跟缩放前对应
  137.         return super.onTouchDrawMode(event);
  138.     }
  139.  
  140.     @Override
  141.     public boolean onTouchSelectMode(MotionEvent event) {
  142.         return super.onTouchSelectMode(event);
  143.     }
  144.  
  145.     @Override
  146.     public boolean onTouchEvent(MotionEvent event) {
  147.         mScaleGestureDetector.onTouchEvent(event);
  148.         mTapGestureDetector.onTouchEvent(event);
  149.         // TODO: 2017/6/29 可根据触发事件做到动作控件的拖动
  150.         return super.onTouchEvent(event);
  151.     }
  152.  
  153.     /**
  154.      * 画布实现缩小的方法
  155.      *
  156.      * @return
  157.      */
  158.     public boolean zoomOut() {
  159. //        if (mScrollable && mCurrentZoomScaleIndex > 0) {
  160.         if (mCurrentZoomScaleIndex > 0) {
  161.             updateScaleStep(mCurrentZoomScaleIndex - 1);
  162.             return true;
  163.         }
  164.         return false;
  165.     }
  166.  
  167.  
  168.     /**
  169.      * 画布实现放大的方法
  170.      *
  171.      * @return
  172.      */
  173.     public boolean zoomIn() {
  174.         if (mCurrentZoomScaleIndex < ZOOM_SCALES.length - 1) {
  175.             updateScaleStep(mCurrentZoomScaleIndex + 1);
  176.             return true;
  177.         }
  178.         return false;
  179.     }
  180.  
  181.     /**
  182.      * 缩放的具体实现
  183.      *
  184.      * @param newScaleIndex
  185.      */
  186.     private void updateScaleStep(int newScaleIndex) {
  187.         if (newScaleIndex != mCurrentZoomScaleIndex) {
  188.             final float oldViewScale = mViewScale;
  189.  
  190.             mCurrentZoomScaleIndex = newScaleIndex;
  191.             mViewScale = ZOOM_SCALES[mCurrentZoomScaleIndex];
  192.  
  193.             final float scaleDifference = mViewScale - oldViewScale;
  194.             scrollBy((int) (scaleDifference * getMeasuredWidth() / 2),
  195.                     (int) (scaleDifference * getMeasuredHeight() / 2));
  196.  
  197.             this.setScaleX(mViewScale);
  198.             this.setScaleY(mViewScale);
  199.             this.requestLayout();
  200.         }
  201.     }
  202.  
  203.     @Override
  204.     public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  205.         setMeasuredDimension(
  206.                 getMeasuredSize(widthMeasureSpec, DESIRED_WIDTH),
  207.                 getMeasuredSize(heightMeasureSpec, DESIRED_HEIGHT));
  208.  
  209.     }
  210.  
  211.     private static int getMeasuredSize(int measureSpec, int desiredSize) {
  212.         int mode = MeasureSpec.getMode(measureSpec);
  213.         int size = MeasureSpec.getSize(measureSpec);
  214.  
  215.         if (mode == MeasureSpec.EXACTLY) {
  216.             return size;
  217.         } else if (mode == MeasureSpec.AT_MOST) {
  218.             return Math.min(size, desiredSize);
  219.         } else {
  220.             return desiredSize;
  221.         }
  222.  
  223.     }
  224.  
  225.  
  226.     private class TapGestureListener implements GestureDetector.OnGestureListener, GestureDetector.OnDoubleTapListener {
  227.  
  228.         @Override
  229.         public boolean onDown(MotionEvent motionEvent) {
  230.             return false;
  231.         }
  232.  
  233.         @Override
  234.         public void onShowPress(MotionEvent motionEvent) {
  235.  
  236.         }
  237.  
  238.         @Override
  239.         public boolean onSingleTapUp(MotionEvent motionEvent) {
  240.             return false;
  241.         }
  242.  
  243.         @Override
  244.         public boolean onScroll(MotionEvent motionEvent, MotionEvent motionEvent1, float v, float v1) {
  245.             return false;
  246.         }
  247.  
  248.         @Override
  249.         public void onLongPress(MotionEvent motionEvent) {
  250.             // TODO: 2017/6/29 长按可以设置模式为连线
  251.             Toast.makeText(mContext,"实现了长按手势",Toast.LENGTH_SHORT).show();
  252.         }
  253.  
  254.         @Override
  255.         public boolean onFling(MotionEvent motionEvent, MotionEvent motionEvent1, float v, float v1) {
  256.             return false;
  257.         }
  258.  
  259.         @Override
  260.         public boolean onSingleTapConfirmed(MotionEvent motionEvent) {
  261.             return false;
  262.         }
  263.  
  264.         @Override
  265.         public boolean onDoubleTap(MotionEvent motionEvent) {
  266.             return false;
  267.         }
  268.  
  269.         @Override
  270.         public boolean onDoubleTapEvent(MotionEvent motionEvent) {
  271.             return false;
  272.         }
  273.     }
  274.  
  275.     private class ScaleGestureListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
  276.         // Focus point at the start of the pinch gesture. This is used for computing proper scroll
  277.         // offsets during scaling, as well as for simultaneous panning.
  278.         private float mStartFocusX;
  279.         private float mStartFocusY;
  280.         // View scale at the beginning of the gesture. This is used for computing proper scroll
  281.         // offsets during scaling.
  282.         private float mStartScale;
  283.         // View scroll offsets at the beginning of the gesture. These provide the reference point
  284.         // for adjusting scroll in response to scaling and panning.
  285.         private int mStartScrollX;
  286.         private int mStartScrollY;
  287.  
  288.         @Override
  289.         public boolean onScaleBegin(ScaleGestureDetector detector) {
  290.             mStartFocusX = detector.getFocusX();
  291.             mStartFocusY = detector.getFocusY();
  292.             mStartScrollX = getScrollX();
  293.             mStartScrollY = getScrollY();
  294.  
  295.             mStartScale = mViewScale;
  296.             return true;
  297.         }
  298.  
  299.         @Override
  300.         public boolean onScale(ScaleGestureDetector detector) {
  301.             final float oldViewScale = mViewScale;
  302.  
  303.             final float scaleFactor = detector.getScaleFactor();
  304.             mViewScale *= scaleFactor;
  305.  
  306.             if (mViewScale < ZOOM_SCALES[0]) {
  307.                 mCurrentZoomScaleIndex = 0;
  308.                 mViewScale = ZOOM_SCALES[mCurrentZoomScaleIndex];
  309.             } else if (mViewScale > ZOOM_SCALES[ZOOM_SCALES.length - 1]) {
  310.                 mCurrentZoomScaleIndex = ZOOM_SCALES.length - 1;
  311.                 mViewScale = ZOOM_SCALES[mCurrentZoomScaleIndex];
  312.             } else {
  313.                 // find nearest zoom scale
  314.                 float minDist = Float.MAX_VALUE;
  315.                 // If we reach the end the last one was the closest
  316.                 int index = ZOOM_SCALES.length - 1;
  317.                 for (int i = 0; i < ZOOM_SCALES.length; i++) {
  318.                     float dist = Math.abs(mViewScale - ZOOM_SCALES[i]);
  319.                     if (dist < minDist) {
  320.                         minDist = dist;
  321.                     } else {
  322.                         // When it starts increasing again we've found the closest
  323.                         index = i - 1;
  324.                         break;
  325.                     }
  326.                 }
  327.                 mCurrentZoomScaleIndex = index;
  328.             }
  329.  
  330.           /*  if (shouldDrawGrid()) {
  331.                 mGridRenderer.updateGridBitmap(mViewScale);
  332.             }*/
  333.  
  334.            ActionEditorCanvasView.this.setScaleX(mViewScale);
  335.             ActionEditorCanvasView.this.setScaleY(mViewScale);
  336.  
  337.             // Compute scroll offsets based on difference between original and new scaling factor
  338.             // and the focus point where the gesture started. This makes sure that the scroll offset
  339.             // is adjusted to keep the focus point in place on the screen unless there is also a
  340.             // focus point shift (see next scroll component below).
  341.             final float scaleDifference = mViewScale - mStartScale;
  342.             final int scrollScaleX = (int) (scaleDifference * mStartFocusX);
  343.             final int scrollScaleY = (int) (scaleDifference * mStartFocusY);
  344.  
  345.             // Compute scroll offset based on shift of the focus point. This makes sure the view
  346.             // pans along with the focus.
  347.             final int scrollPanX = (int) (mStartFocusX - detector.getFocusX());
  348.             final int scrollPanY = (int) (mStartFocusY - detector.getFocusY());
  349.  
  350.             // Apply the computed scroll components for scale and panning relative to the scroll
  351.             // coordinates at the beginning of the gesture.
  352.             scrollTo(mStartScrollX + scrollScaleX + scrollPanX,
  353.                     mStartScrollY + scrollScaleY + scrollPanY);
  354.  
  355.             return true;
  356.         }
  357.     }
  358. }

五、自己根据这实现的基本实现的自定义的画布，来满足项目的需求：

  项目地址为：http://download.csdn.net/download/wangyongyao1989/9886503

六、关于所用的方法总结：

1.setScaleX、setScaleY：这是View中方法，设定View轴心点缩放能用于缩放View的大小；

2.offsetLocation(float deltaX,float deltaY)：调整event的位置，参数的含义是调整横纵坐标的在event的数值；

3.getScrollX(),getScrollY()：是View中的方法，返回View在坐标系中横纵坐标的数值；

4.getAction：获取触摸时间的类型值，比如说ACTION_DOWN、ACTION_MOVE、ACTION_UP等的动作；

5.getActionMask：返回正在执行被屏蔽的操作，没有指针索引信息。

6.getActionIndex：返回ACTION_POINTER_DOWN、ACTION_POINTER_MOVE、ACTION_POINTER_UP相关的指针；

7.getHistoricalX.getHistoricalY:返回在native中存储的坐标的值，比getX()/getY()获取得粒度更细。

8.


声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/598669
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号