我正在嘗試在 JavaScript 中以任意角度旋轉橢圓。但結果甚至不是一個橢圓

Question

我希望在圖表中顯示菲涅耳區域，我希望將橢圓旋轉任意角度。 我已經給出了開始和結束的 x 和 y 坐標，我希望橢圓不是在中心而是在起點旋轉。 我從下面的鏈接中獲得了幫助，但我仍然無法獲得一個正確的橢圓旋轉一個角度。 任何幫助將不勝感激。 此外，需要格式化 x 坐標以將橢圓組合在一起。 但我也無法做到這一點。

繪制（菲涅耳）橢圓和長軸

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
      .chart-container {
        width: 600px;
      }
    </style>
  </head>
  <body>
    <div class="chart-container">
      <canvas id="myChart"></canvas>
    </div>
    <script>
      var step = (2 * Math.PI) / 30;
      console.log("step", step);
      f = 217.25; // frequency
      x1 = 0;
      x2 = 15;
      y2 = 250;
      y1 = 130;
      fr = f * Math.pow(10, 6); // frequency in Hz
      c = 2.997925 * Math.pow(10, 8); // speed of light
      lambda = c / fr;
      xarr = [];
      yarr = [];
      a = (1 / 2) * Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); // radius of major axis
      r = Math.sqrt((lambda * a) / 2); // radius of the minor axis
      w = Math.atan2(y2 - y1, x2 - x1);
      console.log(w);
      for (i = 0; i <= 2 * Math.PI; i += step) {
        xval = a * Math.cos(i);
        yval = r * Math.sin(i);
        xnew = (x1 + x2) / 2 + xval * Math.cos(w) - yval * Math.sin(w);
        ynew = (y1 + y2) / 2 + xval * Math.sin(w) + yval * Math.cos(w);
        xarr.push(xnew);
        yarr.push(ynew);
      }
      console.log(xarr);
      const data = {
        labels: xarr,
        datasets: [
          {
            data: yarr,
            borderColor: "rgba(0,0,0,1)",
          },
        ],
      };
      const config = {
        type: "line",
        data: data,
        options: {
          scales: {
            x: {
              ticks: {
                maxTicksLimit: 5,
                beginAtZero: true,
              },
            },
            y: {
              beginAtZero: true,
              maxTicksLimit: 5,
              grid: {
                display: true,
              },
            },
          },
        },
      };
      const mychart = new Chart(document.getElementById("myChart"), config);
    </script>
  </body>
</html>````

Answer 1

您需要使您的 x 軸成為您的用例的線性比例。 默認情況下，它是一個類別軸，這意味着它只是將您的標簽數組作為標簽。 如果您將比例設為線性，它會將數據映射到軸上的正確點：

options: {
  scales: {
    x: {
      type: 'linear'
    }
  }
}

現場示例：

 var step = (2 * Math.PI) / 30; f = 217.25; // frequency x1 = 0; x2 = 15; y2 = 250; y1 = 130; fr = f * Math.pow(10, 6); // frequency in Hz c = 2.997925 * Math.pow(10, 8); // speed of light lambda = c / fr; xarr = []; yarr = []; a = (1 / 2) * Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); // radius of major axis r = Math.sqrt((lambda * a) / 2); // radius of the minor axis w = Math.atan2(y2 - y1, x2 - x1); for (i = 0; i <= 2 * Math.PI; i += step) { xval = a * Math.cos(i); yval = r * Math.sin(i); xnew = ((x1 + x2) / 2 + xval * Math.cos(w) - yval * Math.sin(w)) + 2.335; // Just add the max amount that it goes into negative so it shifts the elipse into a positive x values only ynew = (y1 + y2) / 2 + xval * Math.sin(w) + yval * Math.cos(w); xarr.push(xnew); yarr.push(ynew); } var options = { type: 'line', data: { labels: xarr, datasets: [{ label: '# of Votes', data: yarr, borderWidth: 1 }] }, options: { scales: { x: { type: 'linear' } } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);

 <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script> </body>

我正在嘗試在 JavaScript 中以任意角度旋轉橢圓。但結果甚至不是一個橢圓

問題描述

1 個解決方案

解決方案1
0 2022-06-23 07:45:54

我正在嘗試在 JavaScript 中以任意角度旋轉橢圓。 但結果甚至不是一個橢圓

問題描述

1 個解決方案

解決方案1 0 2022-06-23 07:45:54

我正在嘗試在 JavaScript 中以任意角度旋轉橢圓。但結果甚至不是一個橢圓

解決方案1
0 2022-06-23 07:45:54