کتابخانه ی PhotoEditor در اندروید

یک کتابخانه ی آسان برای ویرایش عکس با پشتیبانی از نقّاشی، متن، فیلترها، ایموجی و استیکر.

امکانات

  • نقّاشی کشیدن روی عکس با قابلیت تغییر رنگ قلم مو، اندازه، شفّافیت و پاک کردن.
  • به کاربردن فیلتر افکت (Filter Effect) روی عکس با استفاده از MediaEffect.
  • اضافه کردن ایموجی با فونت ایموجی سفارشی.
  • اضافه کردن عکس یا استیکر.
  • قابلیت بزرگ و کوچک کردن عکس و چرخاندن آن با انگشت.
  • قابلیت undo و redo کردن. (جایگزین مناسب فارسی برای این دوتا کلمه پیدا نکردم. اگه شما می دونید تو قسمت نظرات در میان بگذارید)
  • حذف کردن ویوها.
  • ذخیره ی عکس بعد از ویرایش آن.




مزایا (الکی، صرفا برای ترجمه ی همه ی قسمت ها نوشتم)

  • برنامه نویسی بدون دردسر
  • افزایش کارایی
  • ویرایش آسان عکس



شروع

برای شروع باید خط زیررا به فایل build.gradle اضافه کنید.

implementation 'ja.burhanrashid52:photoeditor:0.3.3'

آماده سازی ویو:

اوّل باید PhotoEditorView را به لایه ی xml خود اضافه کنید.

<ja.burhanrashid52.photoeditor.PhotoEditorView
        android:id="@+id/photoEditorView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:photo_src="@drawable/got_s" />

شما می توانید مستقیما در xml با اتریبیوت app:photo_src رنگ یا drawable خود را تعریف کنید.


شما می توانید با برنامه نویسی عکس مورد نظر خود را در PhotoEditorView قرار دهید به این صورت که از PhotoEditorView متد getSource را فراخوانی کنید(که یک ImageView بر می گرداند) سپس شما می توانید عکس مورد نظر را در آن قرار دهید. ( از ریسورس ها یا فایل ها یا حتّی با استفاده از کتابخانه هایی مثل Picasso و Glide)

PhotoEditorView mPhotoEditorView = findViewById(R.id.photoEditorView);

mPhotoEditorView.getSource().setImageResource(R.drawable.got);

ساخت یک PhotoEditor

برای استفاده از قابلیت ویرایش تصویر باید یک PhotoEditor بسازید که به یک Context و PhotoEditorView (که در لایه ی xml ساختیم) نیاز دارد

//Use custom font using latest support library
Typeface mTextRobotoTf = ResourcesCompat.getFont(this, R.font.roboto_medium);

//loading font from assest
Typeface mEmojiTypeFace = Typeface.createFromAsset(getAssets(), "emojione-android.ttf");

mPhotoEditor = new PhotoEditor.Builder(this, mPhotoEditorView)
         .setPinchTextScalable(true)
         .setDefaultTextTypeface(mTextRobotoTf)
         .setDefaultEmojiTypeface(mEmojiTypeFace)
         .build();

شما می توانید ویژگی های مورد نیازتان را در PhotoEditor شخصی سازی کنید.

ـ ()setPinchTextScalable :

اگر ورودی این تابع را false قرار دهید قابلیت زوم متن اضافه شده غیر فعال می شود. مقدار آن به صورت پیش فرض true است.

ـ ()setDefaultTextTypeface :

تعیین کردن فونت پیش فرض متنی که به عکس اضافه می شود.

ـ ()setDefaultEmojiTypeface :

تنظیم فونت پیش فرض برای اضافه کردن ایموجی.

حلّه! کتابخانه را آماده کردیم.




نقّاشی یا Drawing :

ما می توانیم قلم موی(brush) خود را شخصی سازی کنیم و با مجموعه ای از ویژگی های متفاوت نقّاشی کنیم. برای شروع کشیدن روی عکس ما نیاز داریم حالت کشیدن یا drawing mode را فعال کنیم.

نقاشی کشیدن روی عکس
نقاشی کشیدن روی عکس

شخصی سازی(Customization)

  • فعال سازی و غیر فعال سازی (Enable/Disable) :
mPhotoEditor.setBrushDrawingMode(true/false);
  • اندازه ی قلم مو :
mPhotoEditor.setBrushSize(brushSize)
  • شفّافیت رنگ (به درصد) :
mPhotoEditor.setOpacity(opacity)
  • رنگ قلم مو :
mPhotoEditor.setBrushColor(colorCode)
  • پاک کن(Brush Eraser) :
mPhotoEditor.brushEraser()

توجّه: اگر شما هر ویژگی ای قلم مو(brush) قرار دهید، حالت کشیدن(drawing mode) به طور خودکار فعال خواهد شد.



اثر فیلتر (Filter Effect) :

شما می توانید با استفاده از کد زیر فیلترهای درون ساخت کتابخانه را به عکس خود اضافه کنید :

mPhotoEditor.setFilterEffect(PhotoFilter.BRIGHTNESS);
قرار دادن افکت برای عکس.
قرار دادن افکت برای عکس.

شما می توانید با استفاده از Custom.Builder افکت شخصی سازی شده هم به کار ببرید.

برای اطّلاعات بیشتر می توانید این لینک را ببینید.



اضافه کردن متن به عکس
اضافه کردن متن به عکس

شما می توانید متن خود را با کد رنگ به عکس اضافه کنید مثل زیر :

mPhotoEditor.addText(inputText, colorCode);

اگر مانند خط بخواهید متن اضافه کنید با فونت پیش فرض ارایه شده در builder(که در ابتدای کار مقدار دهی کردیم) اضافه خواهد شد، اگر می خواهید برای متن های مختلف فونت های مختلفی داشته باشید می توانید هنگام اضافه کردن متن typeface را هم مشخّص کنید مثل زیر:

mPhotoEditor.addText(mTypeface,inputText, colorCode);

برای ویرایش متن نیاز است شما ویو را از callback مربوطه بگیرید. این callback زمانی فراخوانی می شود که روی متن اضافه شده کلیک طولانی(Long press) شود.

mPhotoEditor.setOnPhotoEditorListener(new OnPhotoEditorListener() {
           @Override
           public void onEditTextChangeListener(View rootView, String text, int colorCode) {
               
           }
       });

حالا شما می توانید متن مورد نظر را مانند زیر ویرایش کنید:

mPhotoEditor.editText(rootView, inputText, colorCode);



ایموجی

اضافه کردن ایموجی به عکس
اضافه کردن ایموجی به عکس

شما می توانید از متد زیر برای دریافت لیست ایموجی ها استفاده کنید و سپس با متدی که در پایین تر گفته شده آن را به عکس اضافه کنید :

PhotoEditor.getEmojis(getActivity());

برای اضافه کردن ایموجی به عکس از متد زیر استفاده کنید :

mPhotoEditor.addEmoji(emojiUnicode);

در این صورت از فونت پیش فرض ارایه شده در builder استفاده خواهد شد، اگر می خواهید ایموجی های مختلف فونت های مختلفی داشته باشند می توانید برای آن typeface قرار دهید مانند زیر :

mPhotoEditor.addEmoji(mEmojiTypeface,emojiUnicode);



اضافه کردن عکس یا استیکر

شما باید برای اضافه کردن عکس ها از bitmap استفاده کنید :

mPhotoEditor.addImage(bitmap);




ـ undo و redo کردن (بازم بگم واژه ی فارسی مناسب برای این دوتا کلمه پیدا نکردم)

undo and redo
undo and redo

برای undo و redo کردن خیلی راحت از دو متد زیر استفاده کنید.

 mPhotoEditor.undo();
  mPhotoEditor.redo();



حذف کردن

برای حذف کردن یک متن یا ایموجی یا عکس شما(شما که می گم منظورم کاربره) باید روی ویوی مربوطه کلیک کنید و سپس یک آیکون ضربدر می بینید که باید روی آن کلیک کنید. به همین راحتی!



ذخیره کردن

برای ذخیره ی عکس شما باید از متد ()saveAsFile استفاده کنید و یک مسیر فایل(filePath) به آن بدهید و مانند زیر یک اینترفیس برای گرفتن نتیجه ی کار پیاده سازی کنید. اگر ذخیره موفّقیت آمیز بود onSuccess فراخوانی می شود و در غیر این صورت onFailure فراخوانی خواهد شد.

mPhotoEditor.saveAsFile(filePath, new PhotoEditor.OnSaveListener() {
                 @Override
                 public void onSuccess(@NonNull String imagePath) {
                    Log.e("PhotoEditor","Image Saved Successfully");
                 }

                 @Override
                 public void onFailure(@NonNull Exception exception) {
                     Log.e("PhotoEditor","Failed to save Image");
                 }
             });

برای اطّلاعات بیشتر درباره ی ذخیره کردن به این لینک مراجعه نمایید.


لطفا 💓 و نظر یادتون نره!

سایر کتابخانه های اندروید را در این 👈 انتشارات ببینید. همچنین اگر دوست داشتید مرا در تلگرام دنبال کنید.

و در آخر اگر این نوشته براتون مفید بود یک فنجان قهوه ☕️ مهمونم کنید.


منبع انگلیسی زبان : https://android-arsenal.com/details/1/6736#user-content-drawing