تعریف لینک در عکس

اگه میخواین وقتی هر جایی از عکس کلیک شد به لینک خاصی بره. باید برای imageview مورد نظرتون onclicklistener بنویسید و کد زیر رو درش قرار بدید:

 			String url = "http://google.com";
			Intent i = new Intent(Intent.ACTION_VIEW);
			i.setData(Uri.parse(url));
			startActivity(i);

مجوز اینترنت هم یادتون نره.

ولی اگه می خواین فقط وقتی که روی ناحیه های خاصی از عکس تون کلیک میشه به url مورد نظر بره از همون لینکی که بالا قرار دادم استفاده کنید.

برای اینکه با استفاده از یک عکس ما بتونیم برای موقعیت های مختلف،  Onclick های مختلف تعریف کنیم نیاز هست زمانی که روی اون عکس کلیک میشه ما موقعیت  جایی که عمل تپ صورت گرفته رو به دست بیاریم .

پس نیاز داریم که برای اون عکس یک متد رو Override کنیم .

ما onTouch رو Override میکنیم و کد های زیر رو توش مینویسیم :

 public boolean onTouch (View v, MotionEvent evenet) {
    boolean handledHere = false;

    final int action = evenet.getAction();

    final int evenetX = (int) evenet.getX();
    final int evenetY = (int) evenet.getY();
}

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

ولی محاسبه اینکه اون منطقه مورد نظر خیلی سخته که دقیق در بیاد .

حالا میخوام روشی رو بکار ببندیم که این مشکل رو حل کنیم.

ما برای اینکه یه محدوده رو مشخص کنیم باید یک علامتی برای اون منطقه در نظر بگیریم .

در بازی سازی برای اینکه مثلا کارکتر زمانی که رسید توی اون محدوده مورد نظر یه اتفاق خاص رو نشون بدن ، مثل روشن شدن لامپ با ورود کارکتر بازی به اتاق میان و از Trigger استفاده میکنند ، در واقع با استفاده از اشکال مختلف  محدوده ای رو در بازی مشخص میکنن . این محدوده میتونه یه مکعب مستطیل باشه یا هر جسم دیگه . 

حالا ماهم به نوعی میخوایم از این روش استفاده کنیم و یه محدوده با استفاده از اشکال هندسی بسازیم ، اما روش کار ما با بازی سازی فرق میکنه .

برای شروع کار شما عکس مورد نظرتون رو توی Photoshop باز میکنید . روی عکستون یک لایه دیگه ایجاد میکنید و با استفاده از قلم مکان هایی که قرار هست کلیک بشن رو با رنگ های مختلف پر میکنید .

همونطور هم که در بالا مشخصه من 2 تا از جعبه هارو با رنگ سبز (0f0) و قرمز (f00) پر کردم.

توجه داشته باشید حتما رنگ هایی که انتخاب میکنید ، رنگ های ساده باشن و حتما هم با رنگ عکس ما متفاوت مثلا ما نمیتونیم از رنگ آبی توی این تصویر استفاده کنید .

حالا لایه مربوط به عکس رو پاک کنید و لایه که رنگ کردید رو ذخیره کنید .

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

حالا داخل لایه xml که برای نمایش این عکس ساختید به این صورت عمل کنید :

1- یک لایه با استفاده از FrameLayout ایجاد میکنید .

2- عکس اصلیتون رو داخل لایه قرار میدید .

3- عکسی که نقش ماسک یا همون تریگر ما رو داره رو روی عکس اصلی قررار میدید.

همونطور که میدونید در Frame Layout لایه های روی هم قرار میگیرند .

4-عکسی که مربوط به لایه تریگر یا ماسک شما هست رو از نظر Visibility روی invisible قرار بدید .

خب ، کار ما با لایه xml تموم شد و منو ما آماده هست میریم سراغ کد های java .

در ابتدا به ImageView اصلیتون دسترسی پیدا میکنید

  ImageView imageView = (ImageView) findViewById(R.id.image);
  imageView.setOnTouchListener(this);

و براش یک لیسنر Touch مینویسید ، میتونید لیسنرتون رو impelement هم بکنید مثل من .

حالا یه متد مینویسم که رنگ نقاطی که روی عکس کلیک شده رو بهمون برگردونه :

 
    public int getHotspotColor(int image, int x, int y) {
        ImageView imageView = (ImageView) findViewById(image);

        if (imageView == null) {
            return 0;
        }

        imageView.setDrawingCacheEnabled(true);

        Bitmap bitmap = Bitmap.createBitmap(imageView.getDrawingCache());

        if (bitmap == null) {
            return 0;
        }

        imageView.setDrawingCacheEnabled(false);
        return bitmap.getPixel(x, y);
    }

به یک متد دیگه هم نیاز داریم تا برای ما رنگ هارو تشخیص بده  :

  public boolean colorMatch(int color1, int color2, int tolerance) {

        if ((int) Math.abs(Color.red(color1) - Color.red(color2)) > tolerance) {
            return false;
        }

        if ((int) Math.abs(Color.green(color1) - Color.green(color2)) > tolerance) {
            return false;
        }

        if ((int) Math.abs(Color.blue(color1) - Color.blue(color2)) > tolerance) {
            return false;
        }

        return true;
    }

این متد 3 ورودی میگیره ، اولی رنگی که ما مد نظرمون هست ، دومی رنگی که از محل کلیک بدست آوردیم و سومی هم دامنه تغییرات .

خب حالا میریم سراغ OnTouch :

  @Override
    public boolean onTouch(View view, MotionEvent event) {
        final int action = event.getAction();

        final int eventX = (int) event.getX();
        final int eventY = (int) event.getY();

        switch (action) {
            case MotionEvent.ACTION_DOWN:
                return true;

            case MotionEvent.ACTION_UP:

                int touchColor = getHotspotColor(R.id.image_trigger, eventX, eventY);

                if (colorMatch(Color.RED, touchColor, 25)) {
                    /*
                     * Red Area 
                     */
                    Log.i("LOG", "Red");
                } else if (colorMatch(Color.GREEN, touchColor, 25)) {
                    /*
                     * Green Area 
                     */
                }

                return true;

            default:
                return false;
        }
    }

خب با این روش شما میتونید برای کلیک شدن روی هر قسمت از عکستون کاری که دوست دارید رو انجام بدید .

موفق باشید :)

من خواستم این کارو برای چند رنگ دیگه هم انجام بدم اما ارور داد عکسشو میذارم اگه میشه کمکم کنید

بعد میخوام با Color.parsecolor یک رنگو بنویسم ولی بازم نمی شه.
آخه رنگام زیاده و مجبورم رنگای اینجوری بذارم.

اینجوریه:

اینجا ینی؟اینجا ینی؟

درست نمیشه:(

این ارور: