如何获得两条线的交点（ImageViews）

Question

我被要求完成一项任务，其中有两条线，我必须得到两条线的交点。这两条线是ImageViews，两条ImageViews 都可以拖动，每当这两条线相交时，我都必须得到那个交点。这是我到目前为止实现的代码：

ma​​in.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);

            }
        }
    }

}

图一：

图二：

图3：

如何得到这两条线的交点？

Answer 1

我会从纯数学开始！

假设 ImageView1 和 ImageView2 都没有裁剪（例如图片中的线条是 ImageView 的对角线），您可以使用两个图片的宽度和高度来表示公式中的两条线。这是一个例子。注意：我使用 Android 坐标系 -> 点 (0,0) 是左上角，y 递增到底部！！！

Click here for graphical representation

1号线

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

第2行

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

现在我们想要 line1 = line2 的点，所以我们得到

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

如果你重写方程，你会得到：

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

一旦你知道了 x 坐标，你就可以用它来找到 y 坐标... 下面是一些代码：

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);     
    }

注意：您可能希望将 ImageViews 设置为 android:width="wrap_content" 和 android:height="wrap_content"。否则，图像将固定为您输入的尺寸！ 我已经使用带有圆形背景的 ImageView 对其进行了测试。如果您使用计算出的 x-y 坐标，它会在交叉点处绘制球！祝你好运