JavsScriptを用いた画像中の2点間距離測定

27555 ワード
webdev tutorial javascript beginners テキストリンク
それは複雑な天体物理学についてではありませんが、我々はすべての空が好きですか?また、星、星雲、銀河などの画像が好きです.
だから、私はこのアイデアを思いついたのです:私たちは、画像に表示される2つの星の間の距離(楽しいだけ)を測定することができますか?

さて、それはイメージの星についてではないかもしれませんが、地図上の2つの都市のような何かかもしれません.
私の意見では、HTML、CSS、JavaScriptの基礎知識を実践するのにこのプロジェクトを使用するのは良い考えです.最も重要なことは、ここでHTMLキャンバスを使いたくないです.
さて、このプロジェクトは何をするのですか?
そこに星の夜空のイメージがあるので、ユーザーは、それらをクリックして画像に表示される2つ以上の星の間の距離を測定することができます.
それで、このプロジェクトをより小さな部分に分解しましょう.

1 . HTML :
クリエイトdiv 要素、
  • イメージコンテナ<div id="container">
  • 結果コンテナに計算された距離を表示します.<div id="results">
    • 
<body>
  <h1>Measure Distance</h1>

  <div id="container"></div>

  <h3>Results</h3>

  <div id="results">

    <div id="current-result"></div>

    <div id="total-result"></div>

  </div>

  <input id="reset" type="button" value="Reset" onclick="document.location.reload()">

</body>

    2 . CSS :
  • 星の夜空画像を設定しますbackground-image イメージコンテナの.
    • 
#container {
 width: 500px;
 height: 400px;
 border: 2px solid BurlyWood;

 background-image: url(https://images.unsplash.com/photo-1629898145005-5f0ff3ee4eed?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTk5NzM3MQ&ixlib=rb-1.2.1&q=85); 
 background-position: center; 
 background-repeat: no-repeat; 
 background-size: cover; 
}
  • 作成とスタイル.points and .lines JavaScriptで作成します.
  • メイクするposition: absolute; 両方の.points and .lines .
    • 
.points {
 position: absolute;
 border: 2px solid red;
 border-radius: 50%;
 opacity: 1;
}

.lines {
 position: absolute;
 border: 1px solid white;
 height: 0;
 opacity: 1;
}
  • あなたの好みとして追加のスタイリングを追加します.

    • JavaScript :

    ( 1 )変数を作成する
  • 絹篩で篩うたよう#container and #results DOMの使用
  • ユーザーのクリックポイントのx座標とy座標を格納する2つの配列を持つオブジェクトを作成します.
  • 作成する2つの配列を作成するdiv 元素points and lines .
    • 
let container = document.querySelector("#container");

let results = document.querySelector("#results");
let currentResult = document.querySelector("#current-result");
let totalResult = document.querySelector("#total-result");

let coordinates = {
  coordX: [],
  coordY: []
};

let points = [];
let lines = [];

    コンテナへのaddeventlistel ()
  • ストアxとy座標coordinates オブジェクト.
  • 関数の呼び出しcreatePoints() then createLines() コールバック関数内で.
    • 
container.addEventListener("click", (e) => {
  coordinates.coordX.push(e.x);
  coordinates.coordY.push(e.y);

  createPoints(e.x, e.y);

  let prevX = coordinates.coordX[coordinates.coordX.length - 2];

  let prevY = coordinates.coordY[coordinates.coordY.length - 2];

  if (coordinates.coordX.length > 1) {
    createLines(prevX, prevY, e.x, e.y);
  }
});

    ( 3 ) createPoint ()関数
  • クリエイトアfor-loop それは0からクリックポイントの数まで走ります.
  • クリエイトアdiv ループ内の各反復で.
  • 設定するclassName ASpoints .
  • 左と上の座標div ( e.x and e.y )
  • それを#container
    • 
function createPoints(posX, posY) {
  for (let i = 0; i < coordinates.coordX.length; i++) {
    points[i] = document.createElement("div");
    points[i].className = "points";
    points[i].style.left = `${coordinates.coordX[i]}px`;
    points[i].style.top = `${coordinates.coordY[i]}px`;

    container.appendChild(points[i]);
  }
}

    createlines ()関数
    さて、我々はこのプロジェクトのより重要な部分に達する.ここではいくつかの数学を使用する必要があります!私はあなたの数学の先生ではないと思いますが、これらは私たちがフォローするステップです.
  • つのポイント間の距離を取得します.
    • 
  let distance = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
  • つのポイントの中間点を見つける.
    • 
// X and Y coordinates of the middle point

    let midX = (x1+x2)/2;
    let midY = (y1+y2)/2;
  • 中点を横切ってその距離の水平線を描画します.
    • 
 lines[i].style.width = `${distance}px`;
 lines[i].style.left = `${(midX - (distance/2))}px`;
 lines[i].style.top = `${midY}px`;
  • 計算の角度は、実際の2つのポイントに合わせて中央点の周りに回転させる.
    • 
/* get the inclination in radian unit and then convert it into degree */

 let inclinationInRadian = Math.atan2(y1-y2, x1-x2);
 let inclinationInDegree = (inclinationInRadian * 180)/ Math.PI;
  • 行を回転します.
    • 
  lines[i].style.transform = 'rotate('+inclinationInDegree +'deg)';
    ここが完全createLines() 関数.
    
function createLines(x1, y1, x2, y2) {
  let distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));

  let midX = (x1 + x2) / 2;
  let midY = (y1 + y2) / 2;

  let inclinationInRadian = Math.atan2(y1 - y2, x1 - x2);
  let inclinationInDegree = (inclinationInRadian * 180) / Math.PI;

  for (let i = 0; i < coordinates.coordX.length; i++) {
    lines[i] = document.createElement("div");
    lines[i].className = "lines";

    lines[i].style.width = `${distance}px`;
    lines[i].style.left = `${midX - distance / 2}px`;
    lines[i].style.top = `${midY}px`;
    lines[i].style.transform = "rotate(" + inclinationInDegree + "deg)";

    container.appendChild(lines[i]);
  }

  currentResult.innerHTML = `<strong>Current Result:-</strong> <br>`;

  totalResult.innerHTML = `<strong>Total Result:-</strong> <br>`;

  getDistance(distance);
}

    getdistange ()関数
    今、我々はピクセルの距離を持っているので、我々はセンチメートルに変換する必要があります.
  • 1ピクセル＝0.0264583333 cm
  • センチメートルの距離=ピクセル×距離×26264583333
    • 
function getDistance(distance) {
  let pixelToCm = distance * 0.0264583333;
  pixelToCm = Number(pixelToCm.toFixed(2));

  totalDistance += pixelToCm;
  totalDistance = Number(totalDistance.toFixed(2));

  currentPath += `Line ${++lineCounter}:- ${pixelToCm}cm<br>`;

  totalPath += `${totalDistance}cm<br>`;

  currentResult.innerHTML += currentPath;

  totalResult.innerHTML += totalPath;

  results.scrollTop = results.scrollHeight;
}
    以下はライブデモ@ codepenです.
    注意:
    上で説明したこのプロジェクトは、実践目的のために使用することができますので、実際のWebプロジェクト、応答性、ブラウザの互換性などの付属のすべてのケースをカバーしていない可能性があります.

    結論
    おめでとう!我々は、プロジェクトを終えている、今だけの残りの星の間の距離を測定することです!
    だから星を数え、距離を測定し、楽しい.
    PS:この記事を楽しむ場合は、私をサポートすることができますko-fi . 私はいつもあなたのサポートに感謝します.
    ハッピーコーディング!
    [プログラマー]旅行ルート/43614号/Python/PSN/DFS
    Hibernate+Oracleによるプライマリ・キーの自己成長