Android类似于美图秀秀的拼图实现

      这些天一直做类似于美图秀秀的拼图功能，一直没有达到自己理想的效果，不过还是有些成果，在这里分享一下。起初做到界面差不多，那个相机胶卷用到gridview和MediaStore类，用一个数组存储已选择的照片，并在下面显示，当下面的显示区域remove掉一个照片后就把数组减一，并且放入HorizontalScrollView实现水平滚动。

      拼图起初是实现的静态的，就是把图片按比例缩放后填入待拼图的区域，缩放用creatScaleBitmap,这样不可以拖动图片，就造成我们得不到自己想要的焦点，而且图片要是被压缩为长方形就会出现失真现象，作为产品，这个是万万不行的，后来千思万想，改为在一块大的画布上裁剪出要拼图的各个小区域，然后把图片填充，用坐标控制各个区域的可移动范围，之后刷新下整个屏幕，一切ok。（这里需要注意的是每次添加拼图照片的时候都得save（）和restore（）画布一次，不然只能画一张图）。

     话不多说先看效果图：

 

拼图实现源码：

public class threePic extends Activity {

 privateList imageChose = newArrayList();
 private TextView resultsave;
 private TextView share;
 // private View myView;
 private RelativeLayout relativelayout;
 public myView myView;
 public picResult picResult;
 private String filename = "";
 private ImageView iv1, iv2;

 @Override
 protected void onCreate(BundlesavedInstanceState) {
  // TODO Auto-generated methodstub
  super.onCreate(savedInstanceState);
  setContentView(R.layout.threeresult);

  iv1 = (ImageView)findViewById(R.id.imageaa);
  iv2 = (ImageView)findViewById(R.id.imagebb);
  resultsave = (TextView)findViewById(R.id.resultsave);
  share = (TextView)findViewById(R.id.threeShare);
  relativelayout =(RelativeLayout) findViewById(R.id.PintuView);

  Intent intent =getIntent();
  if(intent.hasExtra("imageChose")) {
   imageChose =(List) intent
     .getSerializableExtra("imageChose");
   Log.i("lyc","----333------lyc-image string =" + imageChose.size());
  }

  picResult = newpicResult(this);
  myView = newmyView(this);
  for (int i = 0; i< imageChose.size(); i++) {
   myView.path[i]= imageChose.get(i).get_data();
  }

  Log.i("lyc","-----333-------lyc-image myView.path1 =" + myView.path[0]);
  // another = newAnother(this);
  relativelayout.addView(myView);
  iv1.setEnabled(false);
  Log.i("lyc", "okokok");

  share.setOnClickListener(newOnClickListener() {

   @Override
   public voidonClick(View v) {
    //TODO Auto-generated method stub
    IntentshareIntent = new Intent(Intent.ACTION_SEND);
    Filefile = new File(filename);
    shareIntent.putExtra(Intent.EXTRA_STREAM,Uri.fromFile(file));
    shareIntent.setType("image
    public Bitmap mBitmap3;
    public String[] path = newString[imageChose.size()];
    boolean flag1 = false;
    boolean flag2 = false;
    boolean flag3 = false;
    boolean flag4 = false;
  
    Paint mPaint = null;
    int border = 5;

  
    int mPosX = 0;
    int mPosY = 0;
    int mPosX1 = 0;
    int mPosY1 = 0;
    int mPosX2 = 0, mPosY2 =0;
    // int mPosX3 = 0,mPosY3 =0;
    private int height = 660;
    private int width = 400;
  
    Long mActionTime = 0L;

   public myView(Contextcontext) {
    super(context);
   
    this.setFocusable(true);
   
    this.setFocusableInTouchMode(true);
    mPaint = newPaint();
  }

  public myView(Contextcontext, String[] path) {
    super(context);
    this.path =path;
  }

  protected void onDraw(Canvascanvas) {
   
   super.onDraw(canvas);
   Bitmap pic[]= new Bitmap[imageChose.size()];
   for (int i =0; i < pic.length; i++) {
    //压缩图片，获取压缩后图片总高度，true表示过滤，width：新图片的宽 height：新图片的高 产生一个可缩放的新图片
    pic[i]= Bitmap.createScaledBitmap(
      BitmapFactory.decodeFile(myView.path[i]),width, width,
      true);
   }
    mBitmap3 =Bitmap.createBitmap(width + border, height + border,
     Config.ARGB_8888);
    Canvas_recanvas = new Canvas(mBitmap3);
    _recanvas.drawColor(-1);
   for (int i =0; i < imageChose.size(); i++) {
    if(i == 0) {
     _recanvas.save();
     _recanvas.clipRect(border,border, width, height / 3);
     _recanvas.drawBitmap(pic[i],mPosX, mPosY, null);
     _recanvas.restore();
     Log.i("lyc","three draw 1");

    }else if (i == 1) {
     _recanvas.save();
     _recanvas.clipRect(border,height / 3 + border, width,
       2* height / 3);
     _recanvas.drawBitmap(pic[i],mPosX1, mPosY1 + 225, null);
     _recanvas.restore();
     Log.i("lyc","three draw 2");
     Log.i("lyc","mposx=" + mPosX + "mposy=" + mPosY);
    }else if (i == 2) {
     _recanvas.save();
     _recanvas.clipRect(border,2 * height / 3 + border, width,
       height);
     _recanvas.drawBitmap(pic[i],mPosX2, mPosY2 + 445, null);
     _recanvas.restore();
    }
   }
   Log.i("lyc","three  draw");
   canvas.drawBitmap(mBitmap3,60, 3, null);
  }

  @Override
  public booleanonTouchEvent(MotionEvent event) {
   int action =event.getAction();

   switch(action) {
   //触摸按下的事件
   caseMotionEvent.ACTION_DOWN:
    if(event.getY() < 220&& event.getX() <400) {
     flag1= true;
    }else if (event.getY() < 440&& event.getX() <400) {
     flag2= true;
    }else if (event.getY() < 660&& event.getX() <400) {
     flag3= true;
    }
    Log.i("lyc","ACTION_DOWN");
    Log.i("lyc","x = " + mPosX + "y=" + mPosX);
    break;
   //触摸移动的事件
   caseMotionEvent.ACTION_MOVE:
    if(flag1 == true) {
     mPosX= (int) event.getX() - 240;
     mPosY= (int) event.getY() - 150;
     if(mPosY>50|| mPosX>100 ){
      mPosX= 0;
      mPosY= 0;
     }
    }else if (flag2 == true) {
     mPosX1= (int) event.getX() - 240;
     mPosY1= (int) event.getY() - 370;
    }else if (flag3 == true) {
     mPosX2= (int) event.getX() - 240;
     mPosY2= (int) event.getY() - 570;
    }
    Log.i("lyc","ACTION_MOVE");
    Log.i("lyc","x2 = " + mPosX + "y2=" + mPosX);
    break;
   //触摸抬起的事件
   caseMotionEvent.ACTION_UP:
    flag1= false;
    flag2= false;
    flag3= false;
    flag4= false;
    Log.i("lyc","ACTION_UP");
    break;
   }

   
   //mActionTime = event.getEventTime();
   
   postInvalidate();
   returntrue;
  }
 }

 public class picResult extends View {

  
  public Bitmap mBitmap;
  public String[] path = newString[imageChose.size()];
  boolean flag1 = false;
  boolean flag2 = false;
  boolean flag3 = false;
  // boolean flag4 = false;
  
  Paint mPaint = null;
  int border = 5;

  
  int mPosX = 0;
  int mPosY = 0;
  int mPosX1 = 0;
  int mPosY1 = 0;
  int mPosX2 = 0, mPosY2 =0;
  // int mPosX3 = 0,mPosY3 =0;
  private int height = 660;
  private int width = 400;
  
  Long mActionTime = 0L;

  public picResult(Contextcontext) {
   super(context);
   
   this.setFocusable(true);
   
   this.setFocusableInTouchMode(true);
   mPaint = newPaint();
  }

  public picResult(Contextcontext, String[] path) {
   super(context);
   this.path =path;
  }

  protected void onDraw(Canvascanvas) {
   
   super.onDraw(canvas);
   Bitmap pic[]= new Bitmap[imageChose.size()];
   for (int i =0; i < pic.length; i++) {
    //压缩图片，获取压缩后图片总高度，true表示过滤，width：新图片的宽 height：新图片的高 产生一个可缩放的新图片
    if(i == 0) {
     pic[i]= Bitmap.createScaledBitmap(
       BitmapFactory.decodeFile(myView.path[i]),width,
       width,true);
    }else {
     pic[i]= Bitmap.createScaledBitmap(
       BitmapFactory.decodeFile(myView.path[i]),
       height/ 2, height / 2, true);
    }

   }
   mBitmap =Bitmap.createBitmap(width + border, height + border,
     Config.ARGB_8888);
   Canvas_recanvas = new Canvas(mBitmap);
   _recanvas.drawColor(-1);
   for (int i =0; i < imageChose.size(); i++) {
    if(i == 0) {
     _recanvas.save();
     _recanvas.clipRect(border,border, width, height / 2);
     _recanvas.drawBitmap(pic[i],mPosX, mPosY, null);
     _recanvas.restore();
     Log.i("lyc","three draw 1");

    }else if (i == 1) {
     _recanvas.save();
     _recanvas.clipRect(border,height / 2 + border, width / 2,
       height);
     _recanvas.drawBitmap(pic[i],mPosX1, mPosY1 + 335, null);
     _recanvas.restore();
     Log.i("lyc","three draw 2");
     Log.i("lyc","mposx=" + mPosX + "mposy=" + mPosY);
    }else if (i == 2) {
     _recanvas.save();
     _recanvas.clipRect(width/ 2 + border, height / 2 + border,
       width,height);
     _recanvas.drawBitmap(pic[i],mPosX2 + 200, mPosY2 + 335,
       null);
     _recanvas.restore();
    }
   }
   Log.i("lyc","three  draw");
   canvas.drawBitmap(mBitmap,60, 3, null);
  }

  @Override
  public booleanonTouchEvent(MotionEvent event) {
   int action =event.getAction();

   switch(action) {
   //触摸按下的事件
   caseMotionEvent.ACTION_DOWN:
    if(event.getY() < 330&& event.getX() <400) {
     flag1= true;
    }else if (event.getY() < 660&& event.getX() <200) {
     flag2= true;
    }else if (event.getY() < 660&& event.getX() <400) {
     flag3= true;
    }
    Log.i("lyc","ACTION_DOWN");
    Log.i("lyc","x = " + mPosX + "y=" + mPosX);
    break;
   //触摸移动的事件
   caseMotionEvent.ACTION_MOVE:
    if(flag1 == true) {
     mPosX= (int) event.getX() - 240;
     mPosY= (int) event.getY() - 150;
    }else if (flag2 == true) {
     mPosX1= (int) event.getX() - 160;
     mPosY1= (int) event.getY() - 480;
    }else if (flag3 == true) {
     mPosX2= (int) event.getX() - 340;
     mPosY2= (int) event.getY() - 480;
    }
    Log.i("lyc","ACTION_MOVE");
    Log.i("lyc","x2 = " + mPosX + "y2=" + mPosX);
    break;
   //触摸抬起的事件
   caseMotionEvent.ACTION_UP:
    flag1= false;
    flag2= false;
    flag3= false;
    //flag4 = false;
    Log.i("lyc","ACTION_UP");
    break;
   }

   
   //mActionTime = event.getEventTime();
   
   postInvalidate();
   returntrue;
  }
 }

}

若大家有其他更好的方法，欢迎分享谈论。