How to get intersection point of Two lines(ImageViews)

Question

I was asked to work upon a task in which there will be two lines and I have to get the intersection point of the two lines. The two lines are ImageViews and both ImageViews can be dragged and whenever these two lines intersect I have to get that intersection point. Here is the code which I implemented till now:

main.xml

---

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ImageView android:id="@+id/xImg1" android:layout_width="100sp"
        android:layout_height="100sp" android:layout_marginTop="50sp"
        android:layout_marginLeft="10sp"
        android:background="@drawable/line_6x10" />
    <ImageView android:id="@+id/xImg2" android:layout_width="100sp"
        android:layout_height="100sp" android:layout_marginTop="50sp"
        android:background="@drawable/line_10x10" android:layout_marginLeft="200sp" />

main.java

---

package sra.inter;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.RelativeLayout.LayoutParams;

public class Main extends Activity implements OnTouchListener {
    private ImageView mImg1, mImg2;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mImg1 = (ImageView) findViewById(R.id.xImg1);
        mImg2 = (ImageView) findViewById(R.id.xImg2);
        mImg1.setOnTouchListener(this);
        mImg2.setOnTouchListener(this);
    }

    int x1 = 100, y1 = 10, x2 = 200, y2 = 50;

    @Override
    public boolean onTouch(View v, MotionEvent event) {

        if (v == mImg1) {

            LayoutParams mLayoutParams = (LayoutParams) mImg1.getLayoutParams();
            if (event.getAction() == MotionEvent.ACTION_MOVE) {

                x1 = (int) event.getRawX();
                y1 = (int) event.getRawY();
                mLayoutParams.leftMargin = x1 - 5;
                mLayoutParams.topMargin = y1 - 60;
                mImg1.setLayoutParams(mLayoutParams);
                check();

            }
        } else if (v == mImg2) {

            LayoutParams mLayoutParams = (LayoutParams) mImg2.getLayoutParams();
            if (event.getAction() == MotionEvent.ACTION_MOVE) {
                x2 = (int) event.getRawX();
                y2 = (int) event.getRawY();
                mLayoutParams.leftMargin = x2 - 5;
                mLayoutParams.topMargin = y2 - 60;
                mImg2.setLayoutParams(mLayoutParams);
                check();
            }

        }

        return true;
    }

    boolean b = false;

    private void check() {

        if (x1 == x2 || y1 == y2) {
            if (!b) {
                b = true;
Log.w("---> x1 " + x1 + "   y1 :" + y1 + "   x2: " + x2+ " y2 :" + y2 + "", "-->");
        Toast.makeText(getApplicationContext(), " interected ", 0)
                        .show();
                mImg1.setOnTouchListener(null);
                mImg2.setOnTouchListener(null);

            }
        }
    }

}

Picture 1:

Picture 2:

Picture 3:

How do you get intersection point of these two lines ?

Answer 1

I would start this one with pure mathematics!

Assuming, that both ImageView1 and ImageView2 have no cropping (e.g. the lines in the pictures are the diagonal of the ImageView), you could use the width and the height of both pic's to express both lines in formulas. Here's an example. NOTE: I use the Android coordinate system -> point (0,0) is top left corner with y incrementing to the bottom!!!

Click here for graphical representation

Line1

y = h1/w1(x - a1) + b1

Line2

y = -h2/w2(x - a2) + b1 + h2

Now we want the point where line1 = line2, so we get

h1/w1(x - a1) + b1 = -h2/w2(x - a2) + b1 + h2

If you re-write the equation you'll get:

x = (w1*w2*(b2 + h2 - b1) + h1*w2*a1 + h2*w1*a2) / (h1*w2 + h2*w1);

Once you know the x-coordinate, you can use that to find the y-coordinate... Below is some code:

private void check() 
    {
        // Setup variables for shorter notation
        int w1 = mImg1.getWidth();
        int h1 = mImg1.getHeight();
        int a1 = mImg1.getLeft();
        int b1 = mImg1.getTop();

        int w2 = mImg2.getWidth();
        int h2 = mImg2.getHeight();
        int a2 = mImg2.getLeft();
        int b2 = mImg2.getTop();

        int x = 0;
        if(h1*w2 + h2*w1 == 0)
        {   // Return to avoid division by zero
            return;
        }
        else
        {   // Calculate the x-value using the re-written formula
            x = (w1*w2*(b2 + h2 - b1) + h1*w2*a1 + h2*w1*a2) / (h1*w2 + h2*w1);
        }

        // Now use the x-value to calculate the y-value
        int y = h1 / w1 * (x - a1) + b1;

        Log.d("Output", "x: " + x + " y:" + y);     
    }

NOTE: You might want to set your ImageViews to android:width="wrap_content" and android:height="wrap_content". Otherwise, the images are fixed to the size you enter! I've tested it with an ImageView with a circle background. If you use the calculated x-y coordinates, it draws the ball right at the intersection! Good luck