How to get the intersection point of two lines (ImageViews)

Question

I was asked to work on a task in which there will be two lines, and I need to get the intersection point of the two lines. Two lines: ImageView , and both ImageView can be dragged, and whenever these two lines intersect, I have to get this intersection point. Here is the code that I have executed so far:

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:

Figure 2:

Figure 3:

How do you get the intersection point of these two lines?

Answer 1

I would start this with pure math!

Assuming that both ImageView1 and ImageView2 do not have cropping (for example, the lines in the images are ImageView diagonal), you can use the width and height of both pic to express both lines in the formulas. Here is an example. NOTE. I use the coordinate system Android → point (0,0) - the upper left corner, while y increases to the bottom.

Click here for a graphical representation.

String1

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

Line 2

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

Now we need a point where line1 = line2, so we get

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

If you rewrite the equation you 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 this to find the y coordinate ... Below is the 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 tested it with ImageView with a circular background. If you use the calculated xy coordinates, he draws the ball right at the intersection! Good luck.