js外公切线切点的计算

作者: CODERLIHAO | 来源:发表于2020-04-20 09:49 被阅读0次

js外公切线切点的计算
js内公切线切点的计算
Metaball变形球效果实现
aspectj注解方式创建切面
2018-09-17vue.js计算属性computed
js过圆外一点的直线与圆相切的切点坐标计算
2018-09-17vue.js计算属性computed
丢失的切点
说说 Spring AOP 中 @Aspect 的高级用法
AOP

image.png

方法一

令圆心之间的距离 d = C₁C₂
∴ ∠P₁C₁E = arccos((P₁C₁ - P₃C₂) / C₁C₂ ) = arccos( (r1 -r2 ) / d)
计算 C₂C₁ 与水平线夹角，然后加上∠P₁C₁E就是P₁的角度

parti.gif

let canvas =  document.getElementById("target");
   canvas.width = document.body.clientWidth;
   canvas.height = document.body.clientHeight;
   let ctx = canvas.getContext("2d");
   let isDrawing = false;
   //大圆圆心
   let pointC1 = {x:500,y:500};
   //大圆半径
   let radius1 = 250;

   //小圆圆心
   let pointC2 =  {x:800,y:300};
   //小圆半径
   let radius2 = 50;

   let eventC1 = false;



   canvas.addEventListener('mousedown', e => {
       let x = e.offsetX;
       let y = e.offsetY;
       isDrawing = true;
       if(Math.pow(x - pointC1.x,2) + Math.pow(y - pointC1.y,2) <= radius1*radius1){
           //移动大圆
           eventC1 = true;
           pointC1.x = x;
           pointC1.y = y;
       }else{
           pointC2.x = x;
           pointC2.y = y;
       }
       update();
   });

   canvas.addEventListener('mousemove', e => {
       if (isDrawing === true) {
           let x = e.offsetX;
           let y = e.offsetY;
           if(eventC1){
               pointC1.x = x;
               pointC1.y = y;
           }else{
               pointC2.x = x;
               pointC2.y = y;
           }
           update();
       }
   });

   canvas.addEventListener('mouseup', e => {
       if (isDrawing === true) {
           isDrawing = false;
           eventC1 = false;
       }
   });


   /**
    * @param c1 大圆
    * @param c2 小圆
    * @param r1 大圆半径
    * @param r2 小圆半径
    * */
   function calcQieDian(c1,c2,r1,r2) {
       //圆心之间的距离
       let d = Math.sqrt(Math.pow(c1.x - c2.x,2) + Math.pow(c1.y - c2.y,2));
       //外公切线与连心线夹角的角度
       let theta = Math.acos((r1 - r2)/d);
       let vc1c2 = {x:c2.x - c1.x,y:-c2.y + c1.y}; //屏幕坐标系与笛卡尔坐标系是y轴是反着的
       let radC1C2 = Math.acos(vc1c2.x / Math.sqrt(Math.pow(vc1c2.x,2) + Math.pow(vc1c2.y,2)));

       if(c2.y <= c1.y){
           //大圆上的切点
           let p1 = {x:c1.x + Math.cos(theta + radC1C2) * r1,y:c1.y - Math.sin(theta + radC1C2)* r1};
           let p2 = {x:c1.x + Math.cos(theta - radC1C2) * r1,y:c1.y + Math.sin(theta - radC1C2)* r1};
           //小圆上的切点
           let p3 = {x:c2.x + Math.cos(theta + radC1C2) * r2,y:c2.y - Math.sin(theta + radC1C2)* r2};
           let p4 = {x:c2.x + Math.cos(theta - radC1C2) * r2,y:c2.y + Math.sin(theta - radC1C2)* r2};
           return {p1:p1,p2:p2,p3:p3,p4:p4};
       }else{
           radC1C2 = Math.PI - radC1C2;
           //大圆上的切点
           let p1 = {x:c1.x + Math.cos(Math.PI - theta - radC1C2) * r1,y:c1.y + Math.sin(Math.PI - theta - radC1C2)* r1};
           let p2 = {x:c1.x + Math.cos(Math.PI - (theta - radC1C2)) * r1,y:c1.y - Math.sin(Math.PI - (theta - radC1C2))* r1};
           //小圆上的切点
           let p3 = {x:c2.x + Math.cos(Math.PI - theta - radC1C2) * r2,y:c2.y + Math.sin(Math.PI - theta - radC1C2)* r2};
           let p4 = {x:c2.x + Math.cos(Math.PI - (theta - radC1C2)) * r2,y:c2.y - Math.sin(Math.PI - (theta - radC1C2))* r2};
           return {p1:p1,p2:p2,p3:p3,p4:p4};
       }
   }


   function update() {
       ctx.clearRect(0,0,canvas.width,canvas.height);

       //大圆的圆心
       drawPoint(pointC1.x,pointC1.y,"#097734");
       //大圆
       drawCircle(pointC1.x,pointC1.y,radius1,"#097734");

       //大圆的圆心
       drawPoint(pointC2.x,pointC2.y,"#0a6292");
       //大圆
       drawCircle(pointC2.x,pointC2.y,radius2,"#0a6292");


       let p = calcQieDian(pointC1,pointC2,radius1,radius2);

       drawText("C1",pointC1.x,pointC1.y);
       drawText("C2",pointC2.x,pointC2.y);
       drawText("p1",p.p1.x,p.p1.y);
       drawText("p2",p.p2.x,p.p2.y);
       drawText("p3",p.p3.x,p.p3.y);
       drawText("p4",p.p4.x,p.p4.y);
       drawPoint(p.p1.x,p.p1.y,"#097734");
       drawPoint(p.p2.x,p.p2.y,"#097734");
       drawPoint(p.p3.x,p.p3.y,"#097734");
       drawPoint(p.p4.x,p.p4.y,"#097734");

       drawLine(pointC1,p.p1);
       drawLine(pointC1,p.p2);
       drawLine(pointC2,p.p3);
       drawLine(pointC2,p.p4);
       drawLine(p.p1,p.p2);
       drawLine(p.p3,p.p4);

       drawLine(p.p1,p.p3);
       drawLine(p.p2,p.p4);
       drawLine(pointC1,pointC2);
   }


   function drawText(text,x,y) {
       ctx.beginPath();
       ctx.font="40px Arial";
       ctx.fillText(text,x,y);
       ctx.stroke();
   }

   function drawCircle(x,y,radius,color){
       ctx.beginPath();
       ctx.fillStyle=color;
       ctx.arc(x,y,radius,0,2*Math.PI,true);
       ctx.stroke();
   }

   function drawPoint(x,y,color){
       ctx.beginPath();
       ctx.fillStyle=color;
       ctx.arc(x,y,5,0,2*Math.PI,true);
       ctx.fill();
   }

   function drawLine(pointStart,pointEnd) {
       ctx.beginPath();
       ctx.moveTo(pointStart.x,pointStart.y);
       ctx.lineTo(pointEnd.x,pointEnd.y);
       ctx.stroke();
   }
   update();

方法二

利用atan2计算,先计算二个圆心之间的距离，利用atan2计算角度，剩下的就是求角度了，这种方法也是最简单的一种

atan2

let d = Math.sqrt(Math.pow(pointC1.x - pointC2.x,2) + Math.pow(pointC1.y - pointC2.y,2));
const angleBetweenCenters = angle(pointC2,pointC1);
const spread = Math.acos((radius1 - radius2) / d);
const angle1 = angleBetweenCenters + spread;
const angle2 = angleBetweenCenters - spread;
const angle3 = angleBetweenCenters + (Math.PI - (Math.PI - spread));
const angle4 = angleBetweenCenters - (Math.PI - (Math.PI - spread));
const p1 = getVector(pointC1.x,pointC1.y, angle1, radius1);
const p2 = getVector(pointC1.x,pointC1.y, angle2, radius1);
const p3 = getVector(pointC2.x,pointC2.y, angle3, radius2);
const p4 = getVector(pointC2.x,pointC2.y, angle4, radius2);

let canvas =  document.getElementById("target");
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    let ctx = canvas.getContext("2d");
    let isDrawing = false;
    //大圆圆心
    let pointC1 = {x:500,y:500};
    //大圆半径
    let radius1 = 250;

    //小圆圆心
    let pointC2 =  {x:800,y:300};
    //小圆半径
    let radius2 = 50;

    let eventC1 = false;



    canvas.addEventListener('mousedown', e => {
        let x = e.offsetX;
        let y = e.offsetY;
        isDrawing = true;
        if(Math.pow(x - pointC1.x,2) + Math.pow(y - pointC1.y,2) <= radius1*radius1){
            //移动大圆
            eventC1 = true;
            pointC1.x = x;
            pointC1.y = y;
        }else{
            pointC2.x = x;
            pointC2.y = y;
        }
        update();
    });

    canvas.addEventListener('mousemove', e => {
        if (isDrawing === true) {
            let x = e.offsetX;
            let y = e.offsetY;
            if(eventC1){
                pointC1.x = x;
                pointC1.y = y;
            }else{
                pointC2.x = x;
                pointC2.y = y;
            }
            update();
        }
    });

    canvas.addEventListener('mouseup', e => {
        if (isDrawing === true) {
            isDrawing = false;
            eventC1 = false;
        }
    });

    function angle(c1,c2) {
        return Math.atan2(c1.y - c2.y, c1.x - c2.x);
    }

    function getVector(cx, cy, a, r) {
        return {x:cx + r * Math.cos(a), y:cy + r * Math.sin(a)};
    }

    function update() {
        ctx.clearRect(0,0,canvas.width,canvas.height);

        //大圆的圆心
        drawPoint(pointC1.x,pointC1.y,"#097734");
        //大圆
        drawCircle(pointC1.x,pointC1.y,radius1,"#097734");

        //大圆的圆心
        drawPoint(pointC2.x,pointC2.y,"#0a6292");
        //大圆
        drawCircle(pointC2.x,pointC2.y,radius2,"#0a6292");

        let d = Math.sqrt(Math.pow(pointC1.x - pointC2.x,2) + Math.pow(pointC1.y - pointC2.y,2));
        const angleBetweenCenters = angle(pointC2,pointC1);
        const spread = Math.acos((radius1 - radius2) / d);
        const angle1 = angleBetweenCenters + spread;
        const angle2 = angleBetweenCenters - spread;
        const angle3 = angleBetweenCenters + (Math.PI - (Math.PI - spread));
        const angle4 = angleBetweenCenters - (Math.PI - (Math.PI - spread));
        const p1 = getVector(pointC1.x,pointC1.y, angle1, radius1);
        const p2 = getVector(pointC1.x,pointC1.y, angle2, radius1);
        const p3 = getVector(pointC2.x,pointC2.y, angle3, radius2);
        const p4 = getVector(pointC2.x,pointC2.y, angle4, radius2);

        drawText("C1",pointC1.x,pointC1.y);
        drawText("C2",pointC2.x,pointC2.y);

        drawText("p1",p1.x,p1.y);
        drawText("p2",p2.x,p2.y);
        drawText("p3",p3.x,p3.y);
        drawText("p4",p4.x,p4.y);

        drawPoint(p1.x,p1.y,"#097734");
        drawPoint(p2.x,p2.y,"#097734");
        drawPoint(p3.x,p3.y,"#097734");
        drawPoint(p4.x,p4.y,"#097734");

        drawLine(pointC1,p1);
        drawLine(pointC1,p2);
        drawLine(pointC2,p3);
        drawLine(pointC2,p4);
        drawLine(p1,p2);
        drawLine(p3,p4);

        drawLine(p1,p3);
        drawLine(p2,p4);
        drawLine(pointC1,pointC2);
    }


    function drawText(text,x,y) {
        ctx.beginPath();
        ctx.font="30px Arial";
        ctx.fillText(text,x,y);
        ctx.stroke();
    }

    function drawCircle(x,y,radius,color){
        ctx.beginPath();
        ctx.fillStyle=color;
        ctx.arc(x,y,radius,0,2*Math.PI,true);
        ctx.stroke();
    }

    function drawPoint(x,y,color){
        ctx.beginPath();
        ctx.fillStyle=color;
        ctx.arc(x,y,5,0,2*Math.PI,true);
        ctx.fill();
    }

    function drawLine(pointStart,pointEnd) {
        ctx.beginPath();
        ctx.moveTo(pointStart.x,pointStart.y);
        ctx.lineTo(pointEnd.x,pointEnd.y);
        ctx.stroke();
    }
    update();

js外公切线切点的计算
方法一令圆心之间的距离 d = C1C2∴ ∠P1C1E = arccos((P1C1 - P3C2) / C...
js内公切线切点的计算
之前讨论过外公切线切点的计算方法一很类似，主要就是计算∠P1C1C2 的角度△P1C1O与△P3C2O是相似三...
Metaball变形球效果实现
效果图一 .求出圆的外公切线两个圆心之间的距离,也就是两点之间的距离计算直线C C 与水平线的角度角P C...
aspectj注解方式创建切面
切点切点是一个接口，切点表达式定义的方法（切点的方法）执行的时候触发通知切点不需要使用 aspectj注解声明，只...
2018-09-17vue.js计算属性computed
计算属性computed:用于计算复杂逻辑案例：js部分： js部分：
js过圆外一点的直线与圆相切的切点坐标计算
由圆外一点P1（x1，y1）向圆(x - a)2 + (y - b)2 = R2作切线，切线与圆相切的切点是P0(...
2018-09-17vue.js计算属性computed
计算属性computed:用于计算复杂逻辑案例：js部分： js部分：效果图：计算属性练习 body部分： j...
丢失的切点
我是长江边的小圆粒你是行走在北方的直纬多么想哟将切点运行成美好的轨迹予你，我将贮存了几季的稻黍你说有砂砾...
说说 Spring AOP 中 @Aspect 的高级用法
1 切点复合运算支持在切点定义中加入以下运算符进行复合运算： 2 切点命名一般情况下，切点是直接声明在需要增强...
AOP
一个切面包含多个切点，为每个切点设置通知 1. 切面(aspect) 2. 切点(pointcut) 参考：Spr...