0

我有一个文本文件，其内容如下所示：

    {x:-391.41900634766,y:35.793998718262},         
    {x:-391.15798950195,y:35.486000061035},
    {x:-390.94049072266,y:35.178001403809},
    {x:-390.67950439453,y:34.869998931885},
    {x:-390.46200561523,y:34.583999633789},
    {x:-390.20098876953,y:34.276000976562},
    {x:-389.94000244141,y:33.967998504639},
    {x:-389.67901611328,y:33.659999847412},
    {x:-389.46148681641,y:33.374000549316},
    {x:-289.20050048828,y:23.06600189209},
    {x:-288.93951416016,y:22.779998779297},
    {x:-288.67849731445,y:22.47200012207},

每个 xy 对表示 xy 平面中一个点的坐标。使用 PHP 或 Javascript，如何从该文件中提取坐标并绘制一条穿过所有点的线？

4

1 回答 1

0

使用 JavaScript 画布，您可以仅使用第一个和最后一个值绘制该线：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <canvas id="myCanvas"></canvas>
  <script>
    var canvas = document.body.querySelector("#myCanvas");
    var ctx = canvas.getContext('2d');

function drawLine (X1, Y1, X2, Y2){
  ctx.save();
  ctx.beginPath();
  ctx.translate(X1, Y1)
  ctx.moveTo(0, 0);
  ctx.lineTo(X2, Y2);
  ctx.stroke();
  ctx.restore();
}
drawLine(4, 4, 300, 300)
  </script>
</body>

您可以将 JavaScript 代码末尾的函数调用替换为您想要的任何 X1、Y1、X2 和 y2 值。因此，在您的情况下，函数调用将是第一个值和最后一个值的 X 和 Y，如下所示：

drawLine(-391.41900634766, 35.793998718262, -288.67849731445, 22.47200012207)

编辑：避免使用负值，因为它们不在 JavaScript 画布的视图框中。相反，只使用正值。

编辑 2：如果您真的想使用负值，请改用此代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <canvas id="myCanvas"></canvas>
  <script>
    var canvas = document.body.querySelector("#myCanvas");
    var ctx = canvas.getContext('2d');
    
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;

function drawLine (X1, Y1, X2, Y2){
  ctx.save();
  ctx.beginPath();
  ctx.translate(canvasWidth/2, canvasHeight/2)
  ctx.moveTo(X1, X2);
  ctx.lineTo(X2, Y2);
  ctx.stroke();
  ctx.restore();
}
drawLine(-50, 50, 70, 270)
  </script>
</body>
</html>

编辑 3：我刚刚意识到您想绘制椭圆形而不是直线，但是现在这个主题太大而无法在一个答案中涵盖，我强烈建议您查看有关“如何绘制和制作动画”的系列教程JavaScript 画布”：

https://www.youtube.com/playlist?list=PLpPnRKq7eNW3We9VdCfx9fprhqXHwTPXL

JavaScript 画布是一个非常强大的工具。您可以绘制任何您想要的几何形状，可以在其中插入图像和文本，还可以创建 2D 游戏等等。如果您可以将 JavaScript 画布与ES6 类一起使用，那么您将拥有一个非常有用的工具！

于 2018-09-08T12:13:18.060 回答