search

Home  >  Q&A  >  body text

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

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

天蓬老师天蓬老师2773 days ago704

reply all(2)I'll reply

  • 迷茫

    迷茫2017-04-17 16:53:30

    This problem is not difficult. When triggering the drawing of drawing board A, you have to invert the coordinates of point A. According to the conversion relationship, calculate the coordinates of point B and draw the points in 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;
 
 
/**

    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>

    reply
    0
  • 大家讲道理

    大家讲道理2017-04-17 16:53:30

    Websocket can be implemented, but you need to use flash under IE

    reply
    0
  • Cancelreply