Question

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

    {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},

每个x-y对表示x-y平面中一个点的坐标。使用PHP或Javascript，如何从该文件中提取坐标并在所有点上画一条线？

Answer 1

使用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 canvas与ES6 classes一起使用，那么您将拥有一个非常有用的工具！

如何通过数组中x-y坐标给定的点画一条线？

1 个答案: