android imageView를 통해 페인트 응용 프로그램

Question

갤러리 사진을 사용하여 채워지는 imageview가 있습니다. 이제 이미지를로드 한 후 사용자가 이미지 위에 그릴 수있게하려고합니다. 어떻게이 일을 성취 할 수 있습니까? 나는 꽤 안드로이드에 대한 모든 포인터가 도움이 될 것입니다. 감사합니다.

Answer 1

핑거 페인트 API를 사용하여 이미지를 사용자 정의보기의 배경으로 설정하고 그립니다.

이미지 경로가 선택되면.

customview.setBackground(yourdrawable); 

옵션을 선택하기 위해 메뉴 버튼을 사용할 수 있습니다. 갤러리를 선택하여 이미지 양식을 갤러리에서 가져 와서보기의 배경으로 설정하십시오.

색상 선택기를 사용하여 그리기 색상을 선택할 수 있습니다.

전체 샘플

public class MainActivity extends Activity 
     implements ColorPickerDialog.OnColorChangedListener { 

    MyView mv; 
    Drawable d; 
    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     mv = new MyView(this); 
     setContentView(mv); 

     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(12); 

     mEmboss = new EmbossMaskFilter(new float[] { 1, 1, 1 }, 
             0.4f, 6, 3.5f); 

     mBlur = new BlurMaskFilter(8, BlurMaskFilter.Blur.NORMAL); 
    } 

    private Paint  mPaint; 
    private MaskFilter mEmboss; 
    private MaskFilter mBlur; 

    public void colorChanged(int color) { 
     mPaint.setColor(color); 
    } 

    public class MyView extends View { 

     private static final float MINP = 0.25f; 
     private static final float MAXP = 0.75f; 

     private Bitmap mBitmap; 
     private Canvas mCanvas; 
     private Path mPath,circlePath; 
     private Paint mBitmapPaint,circlePaint; 

     public MyView(Context c) { 
      super(c); 
      circlePaint = new Paint(); 
      circlePath = new Path(); 
      circlePaint.setAntiAlias(true); 
      circlePaint.setColor(Color.BLUE); 
      circlePaint.setStyle(Paint.Style.STROKE); 
      circlePaint.setStrokeJoin(Paint.Join.MITER); 
      circlePaint.setStrokeWidth(4f); 

      mPath = new Path(); 
      mBitmapPaint = new Paint(Paint.DITHER_FLAG); 
     } 

     @Override 
     protected void onSizeChanged(int w, int h, int oldw, int oldh) { 
      super.onSizeChanged(w, h, oldw, oldh); 
      mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888); 
      mCanvas = new Canvas(mBitmap); 
     } 

     @Override 
     protected void onDraw(Canvas canvas) { 


      canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint); 

      canvas.drawPath(mPath, mPaint); 
      canvas.drawPath(circlePath, circlePaint); 
     } 

     private float mX, mY; 
     private static final float TOUCH_TOLERANCE = 4; 

     private void touch_start(float x, float y) { 
      mPath.reset(); 
      mPath.moveTo(x, y); 
      mX = x; 
      mY = y; 
     } 
     private void touch_move(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; 
      } 
      circlePath.reset(); 
      circlePath.addCircle(mX, mY, 30, Path.Direction.CW); 
     } 
     private void touch_up() { 
      mPath.lineTo(mX, mY); 
      // commit the path to our offscreen 
      mCanvas.drawPath(mPath, mPaint); 
      // kill this so we don't double draw 
      circlePath.reset(); 
      mPath.reset(); 
     } 

     @Override 
     public boolean onTouchEvent(MotionEvent event) { 
      float x = event.getX(); 
      float y = event.getY(); 

      switch (event.getAction()) { 
       case MotionEvent.ACTION_DOWN: 
        touch_start(x, y); 
        invalidate(); 
        break; 
       case MotionEvent.ACTION_MOVE: 
        touch_move(x, y); 
        invalidate(); 
        break; 
       case MotionEvent.ACTION_UP: 
        touch_up(); 
        invalidate(); 
        break; 
      } 
      return true; 
     } 
    } 

    private static final int COLOR_MENU_ID = Menu.FIRST; 
    private static final int EMBOSS_MENU_ID = Menu.FIRST + 1; 
    private static final int BLUR_MENU_ID = Menu.FIRST + 2; 
    private static final int ERASE_MENU_ID = Menu.FIRST + 3; 
    private static final int SRCATOP_MENU_ID = Menu.FIRST + 4; 
    private static final int Image_gallery= Menu.FIRST + 5; 

    @Override 
    public boolean onCreateOptionsMenu(Menu menu) { 
     super.onCreateOptionsMenu(menu); 

     menu.add(0, COLOR_MENU_ID, 0, "Color").setShortcut('3', 'c'); 
     menu.add(0, EMBOSS_MENU_ID, 0, "Emboss").setShortcut('4', 's'); 
     menu.add(0, BLUR_MENU_ID, 0, "Blur").setShortcut('5', 'z'); 
     menu.add(0, ERASE_MENU_ID, 0, "Erase").setShortcut('5', 'z'); 
     menu.add(0, SRCATOP_MENU_ID, 0, "SrcATop").setShortcut('5', 'z'); 
     menu.add(0, Image_gallery, 0, "Gallery").setShortcut('5', 'z'); 
     /**** Is this the mechanism to extend with filter effects? 
     Intent intent = new Intent(null, getIntent().getData()); 
     intent.addCategory(Intent.CATEGORY_ALTERNATIVE); 
     menu.addIntentOptions(
           Menu.ALTERNATIVE, 0, 
           new ComponentName(this, NotesList.class), 
           null, intent, 0, null); 
     *****/ 
     return true; 
    } 

    @Override 
    public boolean onPrepareOptionsMenu(Menu menu) { 
     super.onPrepareOptionsMenu(menu); 
     return true; 
    } 

    @Override 
    public boolean onOptionsItemSelected(MenuItem item) { 
     mPaint.setXfermode(null); 
     mPaint.setAlpha(0xFF); 

     switch (item.getItemId()) { 
      case COLOR_MENU_ID: 
       new ColorPickerDialog(this, this, mPaint.getColor()).show(); 
       return true; 
      case EMBOSS_MENU_ID: 
       if (mPaint.getMaskFilter() != mEmboss) { 
        mPaint.setMaskFilter(mEmboss); 
       } else { 
        mPaint.setMaskFilter(null); 
       } 
       return true; 
      case BLUR_MENU_ID: 
       if (mPaint.getMaskFilter() != mBlur) { 
        mPaint.setMaskFilter(mBlur); 
       } else { 
        mPaint.setMaskFilter(null); 
       } 
       return true; 
      case ERASE_MENU_ID: 
       mPaint.setXfermode(new PorterDuffXfermode(
                 PorterDuff.Mode.CLEAR)); 
       return true; 
      case SRCATOP_MENU_ID: 
       mPaint.setXfermode(new PorterDuffXfermode(
                PorterDuff.Mode.SRC_ATOP)); 
       mPaint.setAlpha(0x80); 
       return true; 
      case Image_gallery: 
       setDrawingThemefrmGallery(); 
       return true; 
     } 
     return super.onOptionsItemSelected(item); 
    } 
    public void setDrawingThemefrmGallery() 
    { 
     // To open up a gallery browser 
     Intent intent = new Intent(); 
     intent.setType("image/*"); 
     intent.setAction(Intent.ACTION_GET_CONTENT); 
     startActivityForResult(Intent.createChooser(intent, "Select Picture"),1); 
     // To handle when an image is selected from the browser, add the following to your Activity 
    } 
     @Override 
     public void onActivityResult(int requestCode, int resultCode, Intent data) { 
     if (resultCode == RESULT_OK) { 
     if (requestCode == 1) { 
     // currImageURI is the global variable I�m using to hold the content:// URI of the image 
     Uri currImageURI = data.getData(); 
     System.out.println("Hello======="+getRealPathFromURI(currImageURI)); 
     String s= getRealPathFromURI(currImageURI); 
     File file = new File(s); 

     if (file.exists()) { 
     d = Drawable.createFromPath(file.getAbsolutePath()); 
     //mv.setBackgroundDrawable(d); 
     mv.setBackground(d); 
     } 
     else 
     { 
      System.out.println("File Not Found"); 
     } 



     } 
     } 
     } 
     // And to convert the image URI to the direct file system path of the image file 
     public String getRealPathFromURI(Uri contentUri) { 
     // can post image 

     String[] filePathColumn = { MediaStore.Images.Media.DATA }; 


     Cursor cursor = getContentResolver().query(contentUri, 
       filePathColumn, null, null, null); 
     cursor.moveToFirst(); 
     int columnIndex = cursor.getColumnIndex(filePathColumn[0]); 
     String picturePath = cursor.getString(columnIndex); 
     return picturePath ; 


    } 
} 

ColorPickerDialog 당신은 또한 추첨을 절약 할 수 있습니다 그릴 마친 후

public class ColorPickerDialog extends Dialog { 

    public interface OnColorChangedListener { 
     void colorChanged(int color); 
    } 

    private OnColorChangedListener mListener; 
    private int mInitialColor; 

    private static class ColorPickerView extends View { 
     private Paint mPaint; 
     private Paint mCenterPaint; 
     private final int[] mColors; 
     private OnColorChangedListener mListener; 

     ColorPickerView(Context c, OnColorChangedListener l, int color) { 
      super(c); 
      mListener = l; 
      mColors = new int[] { 
       0xFFFF0000, 0xFFFF00FF, 0xFF0000FF, 0xFF00FFFF, 0xFF00FF00, 
       0xFFFFFF00, 0xFFFF0000 
      }; 
      Shader s = new SweepGradient(0, 0, mColors, null); 

      mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
      mPaint.setShader(s); 
      mPaint.setStyle(Paint.Style.STROKE); 
      mPaint.setStrokeWidth(32); 

      mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
      mCenterPaint.setColor(color); 
      mCenterPaint.setStrokeWidth(5); 
     } 

     private boolean mTrackingCenter; 
     private boolean mHighlightCenter; 

     @Override 
     protected void onDraw(Canvas canvas) { 
      float r = CENTER_X - mPaint.getStrokeWidth()*0.5f; 

      canvas.translate(CENTER_X, CENTER_X); 

      canvas.drawOval(new RectF(-r, -r, r, r), mPaint); 
      canvas.drawCircle(0, 0, CENTER_RADIUS, mCenterPaint); 

      if (mTrackingCenter) { 
       int c = mCenterPaint.getColor(); 
       mCenterPaint.setStyle(Paint.Style.STROKE); 

       if (mHighlightCenter) { 
        mCenterPaint.setAlpha(0xFF); 
       } else { 
        mCenterPaint.setAlpha(0x80); 
       } 
       canvas.drawCircle(0, 0, 
            CENTER_RADIUS + mCenterPaint.getStrokeWidth(), 
            mCenterPaint); 

       mCenterPaint.setStyle(Paint.Style.FILL); 
       mCenterPaint.setColor(c); 
      } 
     } 

     @Override 
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
      setMeasuredDimension(CENTER_X*2, CENTER_Y*2); 
     } 

     private static final int CENTER_X = 100; 
     private static final int CENTER_Y = 100; 
     private static final int CENTER_RADIUS = 32; 

     private int floatToByte(float x) { 
      int n = java.lang.Math.round(x); 
      return n; 
     } 
     private int pinToByte(int n) { 
      if (n < 0) { 
       n = 0; 
      } else if (n > 255) { 
       n = 255; 
      } 
      return n; 
     } 

     private int ave(int s, int d, float p) { 
      return s + java.lang.Math.round(p * (d - s)); 
     } 

     private int interpColor(int colors[], float unit) { 
      if (unit <= 0) { 
       return colors[0]; 
      } 
      if (unit >= 1) { 
       return colors[colors.length - 1]; 
      } 

      float p = unit * (colors.length - 1); 
      int i = (int)p; 
      p -= i; 

      // now p is just the fractional part [0...1) and i is the index 
      int c0 = colors[i]; 
      int c1 = colors[i+1]; 
      int a = ave(Color.alpha(c0), Color.alpha(c1), p); 
      int r = ave(Color.red(c0), Color.red(c1), p); 
      int g = ave(Color.green(c0), Color.green(c1), p); 
      int b = ave(Color.blue(c0), Color.blue(c1), p); 

      return Color.argb(a, r, g, b); 
     } 

     private int rotateColor(int color, float rad) { 
      float deg = rad * 180/3.1415927f; 
      int r = Color.red(color); 
      int g = Color.green(color); 
      int b = Color.blue(color); 

      ColorMatrix cm = new ColorMatrix(); 
      ColorMatrix tmp = new ColorMatrix(); 

      cm.setRGB2YUV(); 
      tmp.setRotate(0, deg); 
      cm.postConcat(tmp); 
      tmp.setYUV2RGB(); 
      cm.postConcat(tmp); 

      final float[] a = cm.getArray(); 

      int ir = floatToByte(a[0] * r + a[1] * g + a[2] * b); 
      int ig = floatToByte(a[5] * r + a[6] * g + a[7] * b); 
      int ib = floatToByte(a[10] * r + a[11] * g + a[12] * b); 

      return Color.argb(Color.alpha(color), pinToByte(ir), 
           pinToByte(ig), pinToByte(ib)); 
     } 

     private static final float PI = 3.1415926f; 

     @Override 
     public boolean onTouchEvent(MotionEvent event) { 
      float x = event.getX() - CENTER_X; 
      float y = event.getY() - CENTER_Y; 
      boolean inCenter = java.lang.Math.sqrt(x*x + y*y) <= CENTER_RADIUS; 

      switch (event.getAction()) { 
       case MotionEvent.ACTION_DOWN: 
        mTrackingCenter = inCenter; 
        if (inCenter) { 
         mHighlightCenter = true; 
         invalidate(); 
         break; 
        } 
       case MotionEvent.ACTION_MOVE: 
        if (mTrackingCenter) { 
         if (mHighlightCenter != inCenter) { 
          mHighlightCenter = inCenter; 
          invalidate(); 
         } 
        } else { 
         float angle = (float)java.lang.Math.atan2(y, x); 
         // need to turn angle [-PI ... PI] into unit [0....1] 
         float unit = angle/(2*PI); 
         if (unit < 0) { 
          unit += 1; 
         } 
         mCenterPaint.setColor(interpColor(mColors, unit)); 
         invalidate(); 
        } 
        break; 
       case MotionEvent.ACTION_UP: 
        if (mTrackingCenter) { 
         if (inCenter) { 
          mListener.colorChanged(mCenterPaint.getColor()); 
         } 
         mTrackingCenter = false; // so we draw w/o halo 
         invalidate(); 
        } 
        break; 
      } 
      return true; 
     } 
    } 

    public ColorPickerDialog(Context context, 
          OnColorChangedListener listener, 
          int initialColor) { 
     super(context); 

     mListener = listener; 
     mInitialColor = initialColor; 
    } 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     OnColorChangedListener l = new OnColorChangedListener() { 
      public void colorChanged(int color) { 
       mListener.colorChanged(color); 
       dismiss(); 
      } 
     }; 

     setContentView(new ColorPickerView(getContext(), l, mInitialColor)); 
     setTitle("Pick a Color"); 
    } 
} 

.

스냅는 또한 이미지 뷰를 확장하고 onDraw을 무시하고 이미지를 통해 그릴 수

편집

촬영.

Answer 2

이렇게하는 한 가지 방법은 ImageView 클래스를 확장하여 사용자 지정 뷰를 그릴 수 있도록하는 것입니다. onTouchEvent를 재정 의하여 터치 입력을 읽고이를 데이터 구조에 저장합니다 (단순한 선을 그리려면 Path). onDraw를 재정 의하여 부모 클래스에서 onDraw를 먼저 호출 한 다음 (이미지를 그리는 데 사용) 저장된 데이터에서 사용자 입력을 그리면됩니다.

내 제안을 구현하는 방법에 대해 논의 할 수있는 몇 가지 사항을 읽어 보시기 바랍니다. 행운

Custom components

Canvas and Drawables

좋은!