หาระยะห่างระหว่างจุดสองจุดในผืนผ้าใบ

ฉันมีแท็บรูปวาดแคนวาสและต้องการให้ lineWidth เป็นไปตามระยะห่างระหว่างการอัปเดตพิกัด mousemove สองครั้งล่าสุด ฉันจะแปลระยะทางเป็นความกว้างเองฉันแค่ต้องรู้วิธีหาระยะห่างระหว่างจุดเหล่านั้น (ฉันมีพิกัดของจุดเหล่านั้นแล้ว)

คุณสามารถทำได้ด้วยทฤษฎีบทพีทาโกรัส

หากคุณมีสองจุด (x1, y1) และ (x2, y2) คุณสามารถคำนวณความแตกต่างของ x และความแตกต่างของ y เรียกมันว่า a และ b

var a = x1 - x2;
var b = y1 - y2;

var c = Math.sqrt( a*a + b*b );

// c is the distance

โปรดทราบว่าMath.hypotเป็นส่วนหนึ่งของมาตรฐาน ES2015 นอกจากนี้ยังมีโพลีฟิลที่ดีในเอกสาร MDNสำหรับคุณสมบัตินี้

Math.hypot(x2-x1, y2-y1)เพื่อรับระยะทางที่จะกลายเป็นเรื่องง่ายเหมือน

http://en.wikipedia.org/wiki/Euclidean_distance

หากคุณมีพิกัดให้ใช้สูตรคำนวณระยะทาง:

var dist = Math.sqrt( Math.pow((x1-x2), 2) + Math.pow((y1-y2), 2) );

หากแพลตฟอร์มของคุณรองรับ**โอเปอเรเตอร์คุณสามารถใช้สิ่งนั้นแทนได้:

const dist = Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);

ระยะห่างระหว่างสองพิกัด x และ y! x1 และ y1 คือจุด / ตำแหน่งแรก x2 และ y2 คือจุด / ตำแหน่งที่สอง!

function diff (num1, num2) {
  if (num1 > num2) {
    return (num1 - num2);
  } else {
    return (num2 - num1);
  }
};

function dist (x1, y1, x2, y2) {
  var deltaX = diff(x1, x2);
  var deltaY = diff(y1, y2);
  var dist = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
  return (dist);
};

ฉันมักจะใช้การคำนวณนี้บ่อยมากในสิ่งที่ฉันทำดังนั้นฉันจึงต้องการเพิ่มลงในวัตถุคณิตศาสตร์:

Math.dist=function(x1,y1,x2,y2){ 
  if(!x2) x2=0; 
  if(!y2) y2=0;
  return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)); 
}
Math.dist(0,0, 3,4); //the output will be 5
Math.dist(1,1, 4,5); //the output will be 5
Math.dist(3,4); //the output will be 5

อัปเดต:

วิธีนี้มีความสุขเป็นพิเศษเมื่อคุณอยู่ในสถานการณ์ที่คล้ายกับสิ่งนี้ (ฉันมักจะทำ):

varName.dist=Math.sqrt( ( (varName.paramX-varX)/2-cx )*( (varName.paramX-varX)/2-cx ) + ( (varName.paramY-varY)/2-cy )*( (varName.paramY-varY)/2-cy ) );

สิ่งที่น่าสยดสยองนั้นกลายเป็นสิ่งที่จัดการได้มากขึ้น:

varName.dist=Math.dist((varName.paramX-varX)/2, (varName.paramY-varY)/2, cx, cy);