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

Question

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

迷茫 · Answer

這個問題不難，在觸發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
*
*/

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

com.cyrus.demoboard;
android.annotation.SuppressLint;
android.content.Context;
android.graphics.Canvas;
android.graphics.Paint;
android.graphics.Path;
android.util.AttributeSet;
android.view.MotionEvent;
android.view.View;
/**
- @作者CyrusCao
  *
  */

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

com.cyrus.demoboard;
android.annotation.SuppressLint;
android.content.Context;
android.graphics.Canvas;
android.graphics.Paint;
android.graphics.Path;
android.util.AttributeSet;
android.view.MotionEvent;
android.view.View;

/**
- @作者CyrusCao
  *
  */

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;

   }

}

   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent" >

大家讲道理 · Answer

websocket可以實現，不過ie下面要用flash

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

全部回覆(2)我來回復