js内公切线切点的计算

image.png

方法一

很类似，主要就是计算∠P₁C₁C₂ 的角度
△P₁C₁O与△P₃C₂O是相似三角形
令圆心之间的距离 d = C₁C₂
这样可以求出C₁O的距离
C₁O = d r1/(r1+r2 )

那么∠P₁C₁O = arccos(r1/C₁O) = arccos((r1+r2 )/d)

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 = 100;

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

  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.p4);
    drawLine(p.p2,p.p3);
    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计算

4169630-90a03fd4bafbe691.png

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 = 100;

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

    /**
     * @param c1 大圆
     * @param c2 小圆
     * @param r1 大圆半径
     * @param r2 小圆半径
     * */
    function calcQieDian(c1, c2, r1, r2) {
        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 = Math.PI - (spread - angleBetweenCenters);
        const angle4 = -Math.PI + angleBetweenCenters + 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);
        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.p4);
        drawLine(p.p2, p.p3);
        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();

结合之前的外公切线，这样内外公切线都有了

image.png

最后编辑于：2020.04.20 12:37:56

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,445评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,889评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,047评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,760评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,745评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,638评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,011评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,669评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,923评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,655评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,740评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,406评论 4赞 320
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,995评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,961评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,197评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,023评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,483评论 2赞 342

js内公切线切点的计算

方法一

方法二 利用atan2计算

推荐阅读更多精彩内容

方法二利用atan2计算