processing判断一个点（鼠标事件）是否在三角形、圆、椭圆、矩形内之第二章（超详细鼠标交互）

你好呀zws

已于 2022-11-01 14:28:51 修改

阅读量1.8k

点赞数 5

分类专栏： processing-arduino 文章标签：几何学嵌入式硬件

于 2022-05-31 00:27:44 首次发布

本文链接：https://blog.csdn.net/weixin_60418242/article/details/125048217

版权

processing-arduino 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

第二篇更新啦！！！！

上一篇我们详细地讲了processing判断点击是否在三角形和圆内，这一期我们主要讲如何判断点击在椭圆和矩形内部，喜欢就麻烦点赞加关注吧，谢谢噢，你的支持是我继续创作的动力！！！

上一期

圆和三角形看这里

最新一期：直接上processing+Arduino代码，实现软硬件结合

x轴——方法二代码：（|MF1|+|MF2|=2a实现）

y轴——方法一代码：（表达式实现）

y轴——方法二代码：（|MF1|+|MF2|=2a实现）

二、如何判断点击点是否在矩形内

强调一下噢，上一篇是重点讲解processing判断点击是否在三角形和圆内，这一篇重点讲解如何判断点击是否在椭圆和矩形内部，

话不多说，上干货：

一：如何判断点击是否在椭圆内：

我们在高中都学过椭圆的表达式： $b%5E2%3D1%2C%28a%3Eb%3E0%29%3B$ (焦点在x轴，后面我们都是以焦点在x轴作讲解，焦点在y轴同理)

那么我们是否可以根据此表达式算出点与椭圆的关系呢？

当然可以啦，如果大家忘记椭圆的相关信息了，没关系，下面我会详细讲解，不用担心！！！

（一）椭圆与点的关系：

无非就三点：1、点在椭圆上；2、点在椭圆内；3、点在椭圆外。

方法一：

1、点在椭圆上：

把点的坐标（x,y）代入椭圆表达式，如果结果等于1，那么就在椭圆的边上。

2、点在椭圆内：

把点的坐标（x,y）代入椭圆表达式，如果结果小于1，那么就在椭圆的里面。

3、点在椭圆外：

把点的坐标（x,y）代入椭圆表达式，如果结果大于1，那么就在椭圆的外面。

方法二：

除了用表达式，我们还可以用距离：

我们知道椭圆两个焦点F1(-c,0),F2(c,0)，如果此时有椭圆上一个点M（x1,y1）那么就有：

$|MF1|+|MF2|=2a$

如果一个点不在椭圆上即在椭圆外或内是什么样呢？

椭圆外：

明显当点在椭圆外：|MF1|+|MF2| > 2a

椭圆内：

明显当点在椭圆外：|MF1|+|MF2| < 2a

综合上述，我们也可以用椭圆的定义做

（二）实现

我们又知道在processing中画椭圆与画圆是同一个函数：

ellipse(x,y,2a,2b);//y轴：ellipse(x,y,2b,2a);

那么在（一）中叙述的方法，不管是方法一还是方法二，都只需要知道点击点的坐标（mouseX,mouseY）和椭圆的，a、b/c即可，那么这个我们能不能知道呢？当然可以

由上面那个代码我们看到第一二个参数是我们椭圆的中心点，而第三四个参数就是椭圆的2a,2b，（记住是二倍窝），又有： $a^2-b^2=c^2$ ,那么c我们也可以直接求出来啦，当然方法一并不需要求c，所以我这里的代码就重点展示方法一，对于方法二的话，各位朋友只需要代入公式求出c，然后再像我上一篇讲的那样，用两点距离公式求线段长度，再套入公式计算比较就可以啦，非常容易实现！！！

在这里有一个易错点：

我们的表达式是基于椭圆中心点是在原点，焦点是在x轴上实现的，而processing中的坐标原点是在左上角的，所以在编写代码的时候要注意把鼠标点击的坐标减去中心点的值也就是mouseX-x（中心点坐标）,mouseY-y（中心点坐标），可以理解就是将我们的抽象地认为我们已经把椭圆、鼠标挪回了原点，因为我们的a,b是一个静值，所以挪的只是鼠标点就可以了，mouseX-x（中心点坐标）,mouseY-y（中心点坐标）就是一个把点击点mouse往x轴移动了x，往y轴移动了y，从而回到了相对坐标系的原点，话不多说，上代码：

x轴——方法一代码：（表达式实现）

void setup(){
  size(300,300);//300*300的画布
}
void draw() {
  fill(0,0,255);//蓝色
  ellipse(150,150,80,50);//画了一个中心点在（150,150），a=40,b=25的椭圆
}
void mouseClicked(){
  float x1=mouseX-150;//抽象挪回原点，一定要用float
  float y1=mouseY-150;
  float tuo=sq(x1/40)+sq(y1/25);//表达式计算
  println(mouseX,mouseY,tuo);//输出鼠标点击位置，及计算结果
  if(tuo<=1){//在椭圆内
    println("Inside ellipse");
  }else{//在椭圆外
      println("Outside ellipse");
    }
  
}

有我没说明白的部分请后台私信我噢，也欢迎大家找我交流学习！！！谢谢！！！

运行效果：

x轴——方法二代码：（|MF1|+|MF2|=2a实现）

这个就不如方法一简单了，首先要用公式 $a^2-b^2=c^2$ 计算出c，从而确定F1,F2的坐标，再用公式 $gif.latex?s%3D%5Csqrt%7B%28x1-x2%29%5E2+%28y1-y2%29%5E2%7D$ 计算 |MF1| 和 |MF2| ，最后再用判断语句判断与2a的关系，这就是编程思路，当然还要注意坐标系的问题，上代码：

void setup(){
  size(300,300);
}
void draw() {
  fill(0,0,255);
  ellipse(150,150,80,50);
}
void mouseClicked(){
  float x1=mouseX-150;
  float y1=mouseY-150;
  float c=sqrt(sq(80/2)-sq(50/2));
  float MF1=sqrt(sq(x1+c)+sq(y1-0));
  float MF2=sqrt(sq(x1-c)+sq(y1-0));
  println(mouseX,mouseY,MF1,MF2,c);
  if(MF1+MF2<=80){
    println("Inside ellipse");
  }else{
      println("Outside ellipse");
    }
  
}

运行效果：

一样正常判断

以上就是基于processing判断鼠标点击点是否在一个焦点在x轴的过程啦！！！

y轴——方法一代码：（表达式实现）

表达式： $y^2/a^2+x^2/b^2=1;(a>b>0);$ 所以就只需要换一下x，y的计算位置就好啦！！！

void setup(){
  size(300,300);
}
void draw() {
  fill(0,0,255);
  //ellipse(150,150,80,50);
  ellipse(150,150,50,80);
}
void mouseClicked(){
  float a=mouseX-150;
  float b=mouseY-150;
  //float tuo=sq(a/40)+sq(b/25);
  float tuo=sq(b/40)+sq(a/25);//表达式计算改了
  println(mouseX,mouseY,tuo);
  if(tuo<=1){
    println("Inside ellipse");
  }else{
      println("Outside ellipse");
    }
  
}

运行效果：

y轴——方法二代码：（|MF1|+|MF2|=2a实现）

void setup(){
  size(300,300);
}
void draw() {
  fill(0,0,255);
  //ellipse(150,150,80,50);
  ellipse(150,150,50,80);
}
void mouseClicked(){
  float x1=mouseX-150;
  float y1=mouseY-150;
  float c=sqrt(sq(80/2)-sq(50/2));
  float MF1=sqrt(sq(x1-0)+sq(y1+c));//只改坐标即可
  float MF2=sqrt(sq(x1-0)+sq(y1-c));
  println(mouseX,mouseY,MF1,MF2,c);
  if(MF1+MF2<=80){
    println("Inside ellipse");
  }else{
      println("Outside ellipse");
    }
  
}

运行效果：

以上就是基于processing判断鼠标点击点是否在一个焦点在y轴的过程啦！！！

至此判断点击点是否在椭圆内部的讲解到此结束啦，有疑惑的记得私信我噢，进我主页说不定后面也有更新！！！

前调一次：想看判断一个点是否在三角形、圆内部的请看我的另一篇：http://t.csdn.cn/2gBLthttp://t.csdn.cn/2gBLt

二、如何判断点击点是否在矩形内

矩形就相对比较简单啦，不像前面介绍的那么复杂，因为矩形是一个非常规则的图形，只需要掌握其x，y坐标的范围就已经可以直接确定他的位置啦，直接上代码：

画矩形的两种方法：

rect(x, y, a, b);
quad(x1,y1,x2,y2,x3,y3,x4,y4);

说明：rect这个方法的第一二个参数是矩形左上角坐标值，a，b分别是x，y轴上的长度

quad：比较复杂，如图：

代码：

void setup(){
  size(300,300);
}
void draw() {
  fill(255,0,0);
  rect(100, 100, 10, 100);
}
void mouseClicked(){
  if((mouseX>=100)&(mouseX<=200)&(mouseY>=100)&(mouseY<=200)){
  println("Inside rectangle");
  }else{
      println("Outside rectangle");
    }
}

运行效果：

你好呀zws

关注

5
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
7
评论
processing判断一个点（鼠标事件）是否在三角形、圆、椭圆、矩形内之第二章（超详细鼠标交互）

本文主要讲解了从椭圆的定义及表达式多重入手判断一个点是否在椭圆内部，再结合processing编程编写判断程序，并且列出了processing如何画椭圆、圆、三角形、矩形的多种方法，图文并茂，
复制链接

扫一扫