时间戳

首页 > 解决方案 > Canavs 并没有画出所有的点。只有一个出现

javascript - Canavs 并没有画出所有的点。只有一个出现

问题描述

在这个脚本中，我试图用两个点/圆制作一个坐标平面。当我在代码中添加第二个点时，它只显示第二个。

带点的部分是这段代码：

point(AX, AY, false, 'red', 6)
point(BX, BY, false, 'red', 6)

有人可以帮我解决这个问题吗？非常感谢！

start();
function start() {
  console.clear();
  document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  var AX = document.getElementById("AX").value;
  var AY = document.getElementById("AY").value;
  var BX = document.getElementById("BX").value;
  var BY = document.getElementById("BY").value;

  var SQUARE_SIZE = 30;
  var XSCALE = 1;
  var YSCALE = 1;

  var centerX = 0;
  var centerY = 0;

  selected = [];
  points = [];
  lines = [];
  segments = [];
  history = [];
  circles = [];

  function point(x, y, isSelected, color, r) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.r = r;
    this.add = function () {
      plotPoint(this.x, this.y, this.color, this.r);
    };
    points.push(this);
    if (isSelected) {
      selected.push(this);
    }
    this.distance = function (gx, gy) {
      return Math.sqrt(Math.pow(this.x - gx, 2) + Math.pow(this.y - gy, 2));
    };
  }

  function point1(x, y, isSelected, color, r) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.r = r;
    this.add = function () {
      plotPoint(this.x, this.y, this.color, this.r);
    };
    points.push(this);
    if (isSelected) {
      selected.push(this);
    }
    this.distance = function (gx, gy) {
      return Math.sqrt(Math.pow(this.x - gx, 2) + Math.pow(this.y - gy, 2));
    };
  }

  function circle(x, y, color, r) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.r = r;
    this.add = function () {
      ctx.beginPath();
      ctx.arc(convertX(x), convertY(y), r, 0, 2 * Math.PI);
      ctx.stroke();
    };
  }

  function line(m, b, color, width) {
    this.m = m;
    this.b = b;
    this.color = color;
    this.width = width;
    lines.push(this);
  }

  function segment(a, b, color, width) {
    this.a = a;
    this.b = b;
    this.color = color;
    this.width = width;
    this.getSlope = function () {
      return (b.y - a.y) / (b.x - a.x);
    };
    this.getIntercept = function () {
      var m = this.getSlope();
      return a.y - m * a.x;
    };
    this.getLength = function () {
      return Math.sqrt(this.a.x - this.b.x + this.a.y - this.b.y);
    };
    this.distance = function (gx, gy) {
      //var m = (b.y-a.y)/(b.x-a.x)
      //var bb = a.y-m*a.x
      var m = this.getSlope();
      var bb = this.getIntercept();

      var pim = 1 / -m;
      var pib = gy - pim * gx;
      if (m === 0) {
        pix = gx;
        piy = this.a.y;
      } else if (Math.abs(m) === Infinity) {
        var pix = this.a.x;
        var piy = gy;
      } else {
        var pix = (pib - bb) / (m - pim); //((gy-(gx/m)-bb)*m)/(m*m-1)
        var piy = pim * pix + pib;
      }

      //console.log("m:"+m+" pim:"+pim+" pib:"+pib+" pix"+pix+" piy:"+piy)

      if (
        ((this.a.x <= pix && pix <= this.b.x) ||
          (this.b.x <= pix && pix <= this.a.x)) &&
        ((this.a.y <= piy && piy <= this.b.y) ||
          (this.b.y <= piy && piy <= this.a.y))
      ) {
        var d = Math.sqrt(Math.pow(gx - pix, 2) + Math.pow(gy - piy, 2));
        return d;
      } else {
        var d = Math.min(this.a.distance(gx, gy), this.b.distance(gx, gy));
        return d;
      }
    };
    this.add = function () {
      if (selected.indexOf(this) > -1) {
        plotLine(this.a.x, this.a.y, this.b.x, this.b.y, color, width, [5, 2]);
      } else {
        plotLine(this.a.x, this.a.y, this.b.x, this.b.y, color, width);
      }
    };
    segments.push(this);
  }

  // var a = new point(1,1)
  // var b = new point(3,4)
  // new segment(a,b)
  //var testline = new line(1, 2, 'red', 1)

  function drawLine(x1, y1, x2, y2, color, width, dash) {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    if (dash !== undefined) {
      ctx.setLineDash(dash);
    }
    ctx.stroke();
    ctx.restore();
  }

  function convertX(x) {
    return ((x - xmin - centerX) / (xmax - xmin)) * width;
  }

  function revertX(x) {
    return (x * (xmax - xmin)) / width + centerX + xmin;
  }

  function convertY(y) {
    return ((ymax - y - centerY) / (ymax - ymin)) * height;
  }

  function revertY(y) {
    return (y * (ymin - ymax)) / height - centerY - ymin;
  }

  function addAxis() {
    var TICK = 0;
    for (
      var i = Math.floor(xmin + centerX);
      i <= Math.floor(xmax + centerX);
      i += XSCALE
    ) {
      drawLine(
        convertX(i),
        convertY(0) + TICK,
        convertX(i),
        convertY(0) - TICK
      );
    }
    for (
      var i = Math.floor(ymin - centerY);
      i <= Math.floor(ymax - centerY);
      i += YSCALE
    ) {
      drawLine(
        convertX(0) - TICK,
        convertY(i),
        convertX(0) + TICK,
        convertY(i)
      );
    }
  }

  function addGrid() {
    for (
      var i = Math.floor(ymin - centerY);
      i <= Math.floor(ymax - centerY);
      i += YSCALE
    ) {
      drawLine(0, convertY(i), width, convertY(i), "lightgrey", 1);
    }
    for (
      var i = Math.floor(xmin + centerX);
      i <= Math.floor(xmax + centerX);
      i += XSCALE
    ) {
      drawLine(convertX(i), height, convertX(i), 0, "lightgrey", 1);
    }
  }

  function addPoints() {
    for (const p of points) {
      p.add();
    }
  }

  function addCircles() {
    for (const c of circles) {
      c.add();
    }
  }

  function addLines() {
    for (const l of lines) {
      plotLine(
        xmin + centerX,
        l.m * (xmin + centerX) + l.b,
        xmax + centerX,
        l.m * (xmax + centerX) + l.b,
        l.color,
        l.width
      );
    }
  }

  function addSegments() {
    for (const s of segments) {
      s.add();
    }
  }

  function plotPoint(x, y, color, r) {
    if (r === undefined) {
      r = 2;
    }
    if (color === undefined) {
      color = "black";
    }
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(convertX(x), convertY(y), r, 0, 2 * Math.PI);
    ctx.fill();
  }

  function plotCircle(x, y, color, r) {
    if (r === undefined) {
      r = 2;
    }
    if (color === undefined) {
      color = "black";
    }
    ctx.beginPath();
    ctx.arc(convertX(x), convertY(y), r, 0, 2 * Math.PI);
    ctx.stroke();
  }

  function plotLine(x1, y1, x2, y2, color, width, dash) {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(convertX(x1), convertY(y1));
    ctx.lineTo(convertX(x2), convertY(y2));
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    if (dash !== undefined) {
      ctx.setLineDash(dash);
    }
    ctx.stroke();
    ctx.restore();
  }

  function snap(x) {
    if ((x - Math.round(x)) * (x - Math.round(x)) < 0.01) {
      return Math.round(x);
    } else {
      return x;
    }
  }

  function mouseDown(evt) {
    x = evt.clientX;
    y = evt.clientY;
    ocx = centerX;
    ocy = centerY;
    if (evt.buttons === 2) {
      for (const p of points) {
        if (
          nx * nx - 2 * convertX(p.x) * nx + convertX(p.x) * convertX(p.x) <
            36 &&
          ny * ny - 2 * convertY(p.y) * ny + convertY(p.y) * convertY(p.y) < 36
        ) {
          s = new segment(p, new point(revertX(x), revertY(y), true));
          selected.push(s);
          return;
        }
      }
      new point(snap(revertX(x)), snap(revertY(y)));
    }
    if (evt.buttons === 1) {
      for (const p of points) {
        if (p.distance(revertX(x), revertY(y)) < 0.2) {
          selected.push(p);
        }
        console.log(p.distance(revertX(x), revertY(y)));
      }
      for (const s of segments) {
        if (s.distance(revertX(x), revertY(y)) < 0.2) {
          selected.push(s);
        }
        console.log(s.distance(revertX(x), revertY(y)));
      }
    }
    onresize();
  }

  function mouseUp() {
    selected = [];
  }

  function mouseMove(evt) {
    console.clear();
    nx = evt.clientX;
    ny = evt.clientY;
    gx = revertX(nx);
    gy = revertY(ny);

    if (evt.buttons === 1) {
      if (selected.length > 0) {
        for (const p of selected) {
          p.x = snap(gx);
          p.y = snap(gy);
        }
      } else {
        centerX = (x - nx) / SQUARE_SIZE + ocx;
        centerY = (y - ny) / SQUARE_SIZE + ocy;
      }
    }
    if (evt.buttons === 2) {
      for (const p of selected) {
        p.x = snap(gx);
        p.y = snap(gy);
      }
    }
    console.log("coords: " + gx + ", " + gy);
    console.log("points: " + points);
    console.log("segments:" + segments);
    console.log("selected: " + selected);
    onresize();
  }

  function keyPress(evt) {
    if ((evt.keyCode = 32)) {
      //space
      if (selected.length > 0) selected = [];
    }
    onresize();
  }
  
  point(AX, AY, false, "red", 6);
  point(BX, BY, false, "red", 6);
  
  window.onresize = function () {
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
    xmin = -width / SQUARE_SIZE / 2;
    xmax = width / SQUARE_SIZE / 2;
    ymin = -height / SQUARE_SIZE / 2;
    ymax = height / SQUARE_SIZE / 2;
    addGrid();
    addAxis();
    addPoints();
    addLines();
    addSegments();
    addCircles();

    ctx.font = "12px Arial";
    ctx.fillStyle = "black";
    ctx.fillText("Number of Points: " + points.length, 20, 30);
    ctx.fillText("Points Slected: " + selected.length, 20, 50);
  };

  onresize();
}
<h2>LocusCreator v1.0 - © Niels Langerak</h2>
<p>Use the inputboxes to fill in all the info to make the locus.</p>


<p>Circle A - X:</p>
<input type="number" id="AX" value="0">
<p>Circle A - Y:</p>
<input type="number" id="AY" value="0">

<p>Circle B - X:</p>
<input type="number" id="BX" value="1">
<p>Circle B - Y:</p>
<input type="number" id="BY" value="1">
<button onclick="start()">Reload</button>


<canvas width=600px height=600px id='canvas'>

标签： javascripthtml

解决方案

创建观点时应使用new关键字：

new point(AX, AY, false, 'red', 6)
new point(BX, BY, false, 'red', 6)

它会创建一个新的 point 实例，但不会覆盖它，因为它适用于您的代码。

推荐阅读