android - 求问：2个画板A和B，在A上画的动作如何每时每刻在B上也自动画出？

Question

两个画板A和B，我在A画板上画画，然后在B上一步一步全部自动重绘出来，要有重绘过程。

Answer 1

这个问题不难，在触发A画板绘制的时候，得倒A的点的坐标，根据换算关系，算出B的点坐标，在绘制B里面的。https://segmentfault.com/n/1330000005040693

MainActivity
 
package com.cyrus.demoboard;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
 
import com.cyrus.demoboard.BoardView.OnPositionListener;
 
 
/**

• @author CyrusCao
  *
  */

1. class MainActivity extends Activity {

   
      private BoardView aView;
      private BoardViewB bView;
      
      
      private int wA,hA;
      private int wB,hB;
      
      private float sX = 0.0f;
      private float sY = 0.0f;
      
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
          aView = (BoardView)findViewById(R.id.a_boardview);
          bView = (BoardViewB)findViewById(R.id.b_boardview);
          
          aView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
              
              @Override
              public void onGlobalLayout() {
                  // TODO Auto-generated method stub
                  hA = aView.getHeight();
                  wA = aView.getWidth();
              }
          });
          
          bView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
              
              @Override
              public void onGlobalLayout() {
                  // TODO Auto-generated method stub
                  hB = bView.getHeight();
                  wB = bView.getWidth();
              }
          });
          
          aView.setOnPositionListener(new OnPositionListener() {
              
              @Override
              public void onPositionListener(float x,float y,int action) {
                  // TODO Auto-generated method stub
                  if (sX == 0 || sY == 0) {
                      sX = (wB*1.0f)/wA;
                      sY = (hB*1.0f)/hA;
                  }
                  bView.triggerDraw(x*sX,y*sY,action);
              }
          });
          
      }

   }

   Board A

2. com.cyrus.demoboard;

3. android.annotation.SuppressLint;

4. android.content.Context;

5. android.graphics.Canvas;

6. android.graphics.Paint;

7. android.graphics.Path;

8. android.util.AttributeSet;

9. android.view.MotionEvent;

10. android.view.View;
    /**

    • @author CyrusCao
      *
      */

11. class BoardView extends View {

       
       
       private float mX, mY;
       private Path mPath;
       private static final float TOUCH_TOLERANCE = 4;
       private Paint mPaint;
       private OnPositionListener mPositionListener;
    
       @SuppressLint("NewApi")
       public BoardView(Context context, AttributeSet attrs, int defStyleAttr,
               int defStyleRes) {
           super(context, attrs, defStyleAttr, defStyleRes);
           // TODO Auto-generated constructor stub
           initPaint();
       }
    
       public BoardView(Context context, AttributeSet attrs, int defStyleAttr) {
           super(context, attrs, defStyleAttr);
           // TODO Auto-generated constructor stub
           initPaint();
       }
    
       public BoardView(Context context, AttributeSet attrs) {
           super(context, attrs);
           // TODO Auto-generated constructor stub
           initPaint();
       }
    
       public BoardView(Context context) {
           super(context);
           // TODO Auto-generated constructor stub
           initPaint();
       }
       
       public void initPaint(){
           
           mPaint = new Paint();
           mPaint.setAntiAlias(true);
           mPaint.setDither(true);
           mPaint.setColor(0xFF00FF00);
           mPaint.setStyle(Paint.Style.STROKE);
           mPaint.setStrokeJoin(Paint.Join.ROUND);
           mPaint.setStrokeCap(Paint.Cap.ROUND);
           mPaint.setStrokeWidth(10);  
           
       }
    
       @SuppressLint("ClickableViewAccessibility")
       @Override
       public boolean onTouchEvent(MotionEvent event) {
           // TODO Auto-generated method stub
           float x = event.getX();
           float y = event.getY();
           if (mPositionListener != null) {
               mPositionListener.onPositionListener(x, y,event.getAction());
           }
           switch (event.getAction()) {
               case MotionEvent.ACTION_DOWN:
                   mPath = new Path();
                   touchStart(x, y);
                   break;
               case MotionEvent.ACTION_MOVE:
                   touchMove(x, y);
                   break;
               case MotionEvent.ACTION_UP:
                   touchUp();
                   break;
           }
           invalidate();
           return true;
       }
       
    
    
       @Override
       protected void onDraw(Canvas canvas) {
           // TODO Auto-generated method stub
           if (mPath != null) {
               canvas.drawPath(mPath, mPaint);
           }
       }
       
       private void touchStart(float x, float y) {
           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);
           mPath = null;
           
       }
       
       
       
       public void setOnPositionListener(OnPositionListener mPositionListener) {
           this.mPositionListener = mPositionListener;
       }
    
       public interface OnPositionListener {
           void onPositionListener(float x,float y,int action);
       }
       
    

    }

    Board B

12. com.cyrus.demoboard;

13. android.annotation.SuppressLint;

14. android.content.Context;

15. android.graphics.Canvas;

16. android.graphics.Paint;

17. android.graphics.Path;

18. android.util.AttributeSet;

19. android.view.MotionEvent;

20. android.view.View;

    /**

    • @author CyrusCao
      *
      */

21. class BoardViewB extends View {

    
       private float mX, mY;
       private Path mPath;
       private static final float TOUCH_TOLERANCE = 4;
       private Paint mPaint;
    
       @SuppressLint("NewApi")
       public BoardViewB(Context context, AttributeSet attrs, int defStyleAttr,
               int defStyleRes) {
           super(context, attrs, defStyleAttr, defStyleRes);
           // TODO Auto-generated constructor stub
           initPaint();
       }
    
       public BoardViewB(Context context, AttributeSet attrs, int defStyleAttr) {
           super(context, attrs, defStyleAttr);
           // TODO Auto-generated constructor stub
           initPaint();
       }
    
       public BoardViewB(Context context, AttributeSet attrs) {
           super(context, attrs);
           // TODO Auto-generated constructor stub
           initPaint();
       }
    
       public BoardViewB(Context context) {
           super(context);
           // TODO Auto-generated constructor stub
           initPaint();
       }
    
       public void initPaint() {
    
           mPaint = new Paint();
           mPaint.setAntiAlias(true);
           mPaint.setDither(true);
           mPaint.setColor(0xFFFF0000);
           mPaint.setStyle(Paint.Style.STROKE);
           mPaint.setStrokeJoin(Paint.Join.ROUND);
           mPaint.setStrokeCap(Paint.Cap.ROUND);
           mPaint.setStrokeWidth(10);
    
       }
    
       public void triggerDraw(float x, float y, int action) {
           switch (action) {
           case MotionEvent.ACTION_DOWN:
               mPath = new Path();
               touchStart(x, y);
               break;
           case MotionEvent.ACTION_MOVE:
               touchMove(x, y);
               break;
           case MotionEvent.ACTION_UP:
               touchUp();
               break;
           }
           invalidate();
       }
    
       @Override
       protected void onDraw(Canvas canvas) {
           // TODO Auto-generated method stub
           if (mPath != null) {
               canvas.drawPath(mPath, mPaint);
           }
       }
    
       private void touchStart(float x, float y) {
           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);
           mPath = null;
    
       }
    

    }

22. <RelativeLayout 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" >
    
       <com.cyrus.demoboard.BoardViewB
           android:id="@+id/b_boardview"
           android:layout_width="300dp"
           android:layout_height="250dp"
           android:background="#fff000" />
    
       <com.cyrus.demoboard.BoardView
           android:id="@+id/a_boardview"
           android:layout_width="200dp"
           android:layout_height="200dp"
           android:layout_alignParentBottom="true"
           android:background="#fff000" />
    

    </RelativeLayout>

Answer 2

websocket可以实现，不过ie下面要用flash