[英]I am trying to rotate an ellipse with an arbitrary angle in JavaScript. But the outcome is not even an ellipse
我希望在图表中显示菲涅耳区域,我希望将椭圆旋转任意角度。 我已经给出了开始和结束的 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>````
您需要使您的 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.