js 三点定位中心点问题

最新推荐文章于 2024-02-19 14:59:33 发布
原创 最新推荐文章于 2024-02-19 14:59:33 发布 · 2.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JS

这篇博客介绍了如何使用JavaScript解决已知三个圆的坐标和半径，找到它们相交中心点的问题。通过三角形重心法，实现了点击画布添加点、计算圆相交和画出相交线段，最后找出中心点的功能。涉及到的技术包括canvas画布、事件监听、坐标转换和几何计算。

最近有个小问题，已知三个点坐标，及其半径大小，求其三个圆相交的中心点。

利用各相交线段组成的三角形重心找出其中心点。

代码如下：

<div class="" align="center"style="position: absolute; z-index: 1; top: 250px; left: 100px;">    
        <canvas id="myCanvas" style="border: 1px solid #000000;" height="300px" width="600px">    
        </canvas>
</div>
        
 <div class=""align="left"style="position: absolute; z-index: 1; top: 30px; left: 100px;">    
          A点的距离：<input type="text" id="input_a" value="" />　　
          B点的距离：<input type="text" id="input_b" value="" />　　

          C点的距离：<input type="text" id="input_c" value="" /> <br /><br />

          <button id="but_draw" onclick="drawCircle()">画圆</button>

         <button id="but_clear" onclick="clearC()">清除</button>

</div>

<script type="text/javascript">
    
        var points=[];
          function windowTocanvas(canvas, x, y) {
                var bbox = canvas.getBoundingClientRect();
                return {
                    x: x - bbox.left * (canvas.width / bbox.width),
                    y: y - bbox.top * (canvas.height / bbox.height)
                };

            }
         window.onload=function(){
            var canvas=document.getElementById("myCanvas");
            var ctx = canvas.getContext('2d');
            canvas.onclick=function(event){
            if(points.length>=3)
            {
                alert("只能画三个点坐标。");
                return;
            }
                        
            var loc=windowTocanvas(canvas,event.clientX,event.clientY);
                var x=parseInt(loc.x);
                var y=parseInt(loc.y);
            
                var pointName;
                if(points.length=="0")
                {
                    pointName="A";
                }
                else if(points.length=="1")
                {
                    pointName="B";
                }else
                {
                    pointName="C";
                }
                points.push({"id":pointName,"x":x,"y":y,"r":"0"});
            
                ctx.beginPath();//画实心圆
                ctx.arc(x,y,3,0,2*Math.PI,true);
                ctx.closePath();
                ctx.fillStyle="red";
                ctx.fill();
                //写字
                ctx.fillStyle = "#000000";//颜色
                ctx.font = "normal 20px 微软雅黑";//字体
                ctx.textBaseline = "middle";//竖直对齐
                ctx.textAlign = "center";//水平对齐　
                ctx.fillText(pointName, x+15, y, 20);//绘制文字
                
            }
        };
        
        function drawPoint_Text(x,y,pointName)
        {
            console.log("画点："+x+";"+y+";"+pointName);
            var canvas=document.getElementById("myCanvas");
            var ctx = canvas.getContext('2d');
            ctx.beginPath();//画实心圆
            ctx.arc(x,y,3,0,2*Math.PI,true);
            ctx.closePath();
            ctx.fillStyle="red";
            ctx.fill();
            //写字
            ctx.fillStyle = "#000000";//颜色
            ctx.font = "normal 20px 微软雅黑";//字体
            ctx.textBaseline = "middle";//竖直对齐
            ctx.textAlign = "center";//水平对齐　
            ctx.fillText(pointName, x+15, y, 20);//绘制文字
        }
        
        function drawCircle()
        {
            if(points.length!=3)
            {
                alert("需要在下图中首先画三个点。");
                return;
            }
            
            var Ra=document.getElementById("input_a").value;
            var Rb=document.getElementById("input_b").value;
            var Rc=document.getElementById("input_c").value;
            
            if(Ra==''||Ra==' '||Rb==''||Rb==' '||Rc==''||Rc==' ')
            {
                alert("半径值不能为空。");
                return;
            }
            var canvas=document.getElementById("myCanvas");
            var cxt=canvas.getContext("2d");
            //先清空画板，避免多次重复画点及圆圈
            cxt.clearRect(0,0,canvas.width,canvas.height);
            if(centerPoints.length>0)
            {
                centerPoints.splice(0,centerPoints.length);
            }
            //画点
            
             //画一个空心圆
            for(var i = 0,point;point = points[i]; i++){
                var cx=point.x;
                var cy=point.y;
                var cR;
                var pointName;
                if(point.id=='A')
                {pointName="A";
                    cR=Ra;
                    point.r=Ra;
                }else if(point.id=='B')
                {pointName="B";
                    cR=Rb;
                    point.r=Rb;
                }else{
                pointName="C";
                    cR=Rc;
                    point.r=Rc;
                }
                drawPoint_Text(cx,cy,pointName);//画点
                cxt.beginPath();
                cxt.arc(cx,cy,cR,0,360,false);
                cxt.lineWidth=3;
                cxt.strokeStyle="green";
                cxt.stroke();//画空心圆
                cxt.closePath();
            }
            P2PL();            
            
        };
        
        var centerPoints=[];
        //找圆相交点，画直线，并求线段中心点坐标
        function P2PL()
        {
            var info="";
            for(var i = 0,point;point = points[i]; i++){
                if(i<points.length-1)
                {
                    info +=juli(point.id,point.x,point.y,point.r,points[i+1].id,points[i+1].x,points[i+1].y,points[i+1].r);
                    
                    CirIntersect(point.id,point.x,point.y,point.r,points[i+1].id,points[i+1].x,points[i+1].y,points[i+1].r);
                }else{
                    info +=juli(point.id,point.x,point.y,point.r,points[i-2].id,points[i-2].x,points[i-2].y,points[i-2].r);
                    
                    CirIntersect(point.id,point.x,point.y,point.r,points[i-2].id,points[i-2].x,points[i-2].y,points[i-2].r);
                }
            }
        
            if(centerPoints.length==3)
            {
                var x1,y1,x2,y2,x3,y3;
                //for(var j = 0,cpoint;cpoint = centerPoints[j]; //j++){                }
                x1=centerPoints[0].Xc;
                y1=centerPoints[0].Yc;
                x2=centerPoints[1].Xc;
                y2=centerPoints[1].Yc;
                x3=centerPoints[2].Xc;
                y3=centerPoints[2].Yc;
                drawLine(x1,y1,x2,y2,"#000000");
                drawLine(x1,y1,x3,y3,"#000000");
                drawLine(x2,y2,x3,y3,"#000000");
                //求三角形重心心点位置
                var CX=(x1+x2+x3)/3;
                var CY=(y1+y2+y3)/3;
                drawPoint(CX,CY);
                console.log("最终点的位置为：X--"+CX+", Y--"+CY);            
            }
        }
        
        function juli(n1,x1,y1,r1,n2,x2,y2,r2) {       
            //var x1;   // 第一个点的横坐标
            //var y1;   // 第一个点的纵坐标
            //var x2;   // 第二个点的横坐标
            //var y2;   // 第二个点的纵坐标
            var xdiff = x2 - x1;// 计算两个点的横坐标之差
            var ydiff = y2 - y1;// 计算两个点的纵坐标之差
            var diff = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);   // 计算两点之间的距离，并将结果返回表单元素
            var info;
            var dis=Number(r1)+Number(r2);
            if(diff > dis)
            {
              info=n1+"与"+n2+"两个圆不相交,两圆心距离：";
            }else if(diff==dis)
            {
                info=n1+"与"+n2+"两个圆相切,两圆心距离：";
            }else{
                info=n1+"与"+n2+"两个圆相交,两圆心距离：";
            }
            console.log(info+diff+";  半径和："+dis);
            return info+diff+";  ";
        }
        
        function CirIntersect(n1,x1,y1,r1,n2,x2,y2,r2){
            var a,b,c;// 在一元二次方程中 a*x^2+b*x+c=0
            //x的两个根 x_1 , x_2
            //y的两个根 y_1 , y_2
            var x_1,x_2,y_1,y_2;
            //判别式的值
            //double delta = -1;
            var delta= Number(-1);
            //如果 y1!=y2
            if(y1!=y2){

                //为了方便代入
                var A = (x1*x1 - x2*x2 +y1*y1 - y2*y2 + r2*r2 - r1*r1)/(2*(y1-y2));
                var B = (x1-x2)/(y1-y2);

                a = 1 + B * B;
                b = -2 * (x1 + (A-y1)*B);
                c = x1*x1 + (A-y1)*(A-y1) - r1*r1;

                //下面使用判定式 判断是否有解    
                delta=b*b-4*a*c;

                if(delta >0)
                {

                    x_1=(-b+Math.sqrt(b*b-4*a*c))/(2*a);
                    x_2=(-b-Math.sqrt(b*b-4*a*c))/(2*a);
                    y_1 = A - B*x_1;
                    y_2 = A - B*x_2;
                }
                else if(delta ==0)
                {
                    x_1 = x_2 = -b/(2*a);
                    y_1 = y_2 = A - B*x_1;
                }else
                {
                    console.log("圆"+n1+"圆"+n2+"两个圆不相交");
                    return null;
                }
            }
            else if(x1!=x2){

                //当y1=y2时，x的两个解相等
                x_1 = x_2 = (x1*x1 - x2*x2 + r2*r2 - r1*r1)/(2*(x1-x2));

                a = 1 ;
                b = -2*y1;
                c = y1*y1 - r1*r1 + (x_1-x1)*(x_1-x1);

                delta=b*b-4*a*c;

                if(delta >0)
                {
                    y_1 = (-b+Math.sqrt(b*b-4*a*c))/(2*a);
                    y_2 = (-b-Math.sqrt(b*b-4*a*c))/(2*a);
                }
                else if(delta ==0)
                {
                    y_1=y_2=-b/(2*a);
                }else
                {
                    console.log("圆"+n1+"圆"+n2+"两个圆不相交;");
                    return null;
                }
            }
            else
            {
                console.log("圆"+n1+"圆"+n2+"无解;");
                return null;
            }
            console.log("圆"+n1+"圆"+n2+"的交点坐标：（"+x_1+","+y_1+"）,（"+x_2+","+y_2+"）");
            drawLine(x_1,y_1,x_2,y_2,"#FF0000");
            drawCenterPoint(x_1,y_1,x_2,y_2);
    };
    
    function drawLine(x1,y1,x2,y2,colors){
        var canvas=document.getElementById("myCanvas");
        var ctx = canvas.getContext('2d');
        //设置线条宽度  
        ctx.lineWidth = "1";  
        //起始一条路径，或重置当前路径  
        ctx.beginPath();  
        //设置画笔颜色  
        ctx.strokeStyle=colors;  
        //把路径移动到画布中的指定点，不创建线条  
        ctx.moveTo(x1,y1);  
        //添加一个新点，然后在画布中创建从该点到最后指定点的线条  
        ctx.lineTo(x2,y2);  
        //创建从当前点回到起始点的路径  
        ctx.closePath();  
        //绘制已定义的路径  
        ctx.stroke();
    }
    //相交线段求中心点位置
    function drawCenterPoint(x1,y1,x2,y2){
        var x,y;
        x=(x1+x2)/2;
        y=(y1+y2)/2;
        console.log("线段中心点："+x+", "+y);
        centerPoints.push({"Xc":x,"Yc":y});
        
        var canvas=document.getElementById("myCanvas");
        var ctx = canvas.getContext('2d');
        ctx.beginPath();//画实心圆
        ctx.arc(x,y,2,0,2*Math.PI,true);
        ctx.closePath();
        ctx.fillStyle="black";
        ctx.fill();        
    };
    //求三角形重心心点位置
    function drawPoint(x,y){        
        var canvas=document.getElementById("myCanvas");
        var ctx = canvas.getContext('2d');
        ctx.beginPath();//画实心圆
        ctx.arc(x,y,5,0,2*Math.PI,true);
        ctx.closePath();
        ctx.fillStyle="black";
        ctx.fill();        
    };
    
    function clearC()
    {
        console.log("开始清除动作");
        document.getElementById("input_a").value="";
        document.getElementById("input_b").value="";
        document.getElementById("input_c").value="";
        console.log("点集合长度："+points.length);
        if(points.length>0)
        {
            points.splice(0,points.length);
        }
        if(centerPoints.length>0)
        {
            centerPoints.splice(0,centerPoints.length);
        }
        
        var c=document.getElementById("myCanvas");  
        var cxt=c.getContext("2d");  
        cxt.clearRect(0,0,c.width,c.height);
    };
        
</script>

PS：第一次写，当然代码中有很多重复的东西，也是一次学习，也参考了很多网上的知识点，利用canvas画布技术写的，里面包含画点、画线、画圆等知识点，自己做个标记。

sunstar8921
关注
Openlayers中使用Image的rotation实现车辆定位导航带转角(判断车辆图片旋转角度)
BADAO_LIUMANG_QIZHI的博客
07-10 3802
场景 Openlayers中使用animate实现车辆定位导航效果(以当前车辆为中心移动)： https://blog.youkuaiyun.com/BADAO_LIUMANG_QIZHI/article/details/118634344 上面实现的导航效果，如果是车辆行驶的点位轨迹X和Y都会改变就会这样 怎样实现车辆的图片带旋转角度，即车辆行驶带转角的效果。 要实现的效果如下 注： 博客：https://blog.youkuaiyun.com/badao_liumang_qizhi 关注公..
Selenium2+python自动化65-js定位几种方法总结【转载】
anbaduay633369的博客
11-10 1059
前言 本篇总结了几种js常用的定位元素方法，并用js点击按钮，对input输入框输入文本 一、以下总结了5种js定位的方法 除了id是定位到的是单个element元素对象，其它的都是elements返回的是list对象 1.通过id获取 document.getElementById(“id”) 2.通过name获取 document.getElementsByNa...
三点定位
ddr66288的博客
05-25 421
根据三个坐标点以及三个坐标点的半径( x1 , y1 ) , d1 , ( x2 , y2 ) , d2 , ( x3 , y3 ) , d3，即可求得三个点的交点 ( x0 , y0 ) 。 通过勾股定理可得出： Math.power((x1 - x0), 2) + Math.power((y1 - y0), 2) = Math.power(d1, 2); ...
三角形垂点坐标js算法(三点定圆求圆心)
qq_45670012的博客
10-09 1453
已知平面三点坐标A(x1, y1）、B(x2, y2）、C(x3, y3），三点定圆也就是三角形的中垂线交点， //平面三点定位算法 function locate(x1, y1, x2, y2, ...
三点定位算法
09-05
javascript+html5实现三点定位算法。源码分享。基于rssi的三点定位算法，是已知三个点的坐标和未知点到这三个点的rssi的信号值，求解未知点的坐标。
【优秀课设】JavaScript利用高德地图开放平台实现精准三点定位（通过距离半径，绘制多个circle）
Mike Zhou的博客
01-05 5853
【基于JavaScript】利用高德地图开放平台实现精准三点定位（通过距离半径，绘制多个circle）
java 三点定位_三点定位的算法
weixin_39909859的博客
12-20 993
#include "stdio.h"#include "stdlib.h"#include //坐标double ax,ay,bx,by,cx,cy,zx,zy;//距离double la,lb,lc;double cx1,cy1,cx2,cy2,cx3,cy3,cx4,cy4;int main(void){int i = 0,j = 0,n = 0;int okflag = 0;int err ...
基于RSSI的三点定位算法原理与多语言实现
本文标题“RSSI三点定位算法[源码]”明确指出其核心内容是围绕这一算法展开，并提供了C语言和JavaScript两种编程语言的具体实现代码，具有极强的工程实践价值。 在描述中提到，文章首先指出了传统三点定位算法存在...
利用百度地图根据三点求位置
ShiKKing's BLOG
12-15 9721
效果图 操作流程设计 具体实现
基于三点变换的Three.js对象位置调整方法
值得注意的是，这种三点变换方法相较于传统的TRS（平移-旋转-缩放）逐属性设置更具整体性和鲁棒性，尤其适用于需要根据外部参考点自动对齐模型的场景，比如AR中标记物识别后的模型定位、医学图像配准、CAD装配模拟等...
人工智能|深度学习——基于对抗网络的室内定位系统
最新发布
也许有一天我们再相逢 睁开眼睛看清楚 我才是英雄！
02-19 2989
基于对抗网络的室内定位系统
superMap 3D webGL js计算面对象中心点坐标
12-10
js计算面对象中心点坐标
已知三点坐标求外接圆的直径、圆心坐标破解
11-13
已知三点坐标求外接圆的直径、圆心坐标破解 本人试用完全计算正确
JS中三个点（...）
Anson619的博客
01-26 2123
我们在看js代码时经常会出现（…）三个点的东西，它究竟是什么意思？又有何用处？ 下面我就给大家分享一下三个点的那些事 什么意思？ 三个点（…）真名叫扩展运算符，是在ES6中新增加的内容，它可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；还可以在构造字面量对象时将对象表达式按照key-value的方式展开 字面量一般指[1,2,3]或者{name:‘chuichui’}这种简洁的构造方式,多层嵌套的数组和对象三个点就无能为力了 说白了就是把衣服脱了，不管是大括号（[]）、花括号（{
原生js获取手机定位信息
weixin_30376163的博客
09-13 1562
<script type="text/javascript"> function Location() {}; Location.prototype.getLocation = function (callback) { var options = { enableHighAccuracy: true, maxim...
【原创】【算法】三点定位简述
热门推荐
VillaOning的博客
08-01 4万+
插叙：本想着每月都写呢，但是后来最近几个月工作和家庭太忙了，真是没时间写，且写且珍惜。 一、这是个什么玩意 望文生义一看名字肯定是用三个点来定位。先不说三点定位这个，由于我之前从来没在实际项目中搞过算法（面试刷题的不算，比如各种查找算法 https://www.cnblogs.com/leezx/p/5719012.html），简单说下对算法的肤浅理解，学习一个算法我个人觉得首先要弄清楚的就是...
js 三角形的正心，高度计算
Martin 的博客
12-23 774
三角形的正心，高度计算 使用输入的坐标值计算三角形的正交中心。三角形的正交中心被描述为三角形的高度相交的点，而三角形的高度是一条穿过三角形的顶点并垂直于相对侧的线，因此，可能存在三个高度，每个顶点一个。可以说所有三个高度总是在同一点相交，称为三角形的正中心。 function calslp() { var xa=document.getElementById("inptx1").value; var ya=document.getElementById("inpty1").value; var .
Unity骚操作：获取3个点的中心点坐标 或N个位置的中心点
weixin_39114763的博客
08-03 1897
假设3个点的坐标为（x1,y1)、(x2,y2)、（x3,y3） 其3个点的中心点为（(x1+x2+x3)/3 , (y1+y2+y3)/3 )
js已知多边形坐标点，求多边形的中心点坐标
小孩子
04-25 2645
js求多边形中心点坐标
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值