Question

我正在尝试理解其他人编写的代码，我必须完成。代码只是创建一个svg元素并将其附加到图像，然后在图像上硬编码多边形。这是代码：

function drawPolys() {

  var canvas;

  canvas = d3.select("#map")
    .append("svg")
      .attr("width", 500)
      .attr("height", 500)
      .attr("id", "firstFloor");

  var coverageAreaID = 'room1';
  var content = '<button class="btn btn-sm btn-primary view-cam-btn">View Camera</button> <button class="btn btn-sm btn-primary set-dest-btn">Set Destination</button> <input type="hidden" name="coverage-area-id" value="'+coverageAreaID+'">';
  var polygon1 = [[60, 210], [60, 250], [140, 250], [140, 210]];
  var room1 = canvas.append("polygon")
    .attr("points", polygon1)
    .attr("class", "coverage-area")
    .attr("id", coverageAreaID)
    .attr("data-toggle", "popover")
    .attr('data-placement', 'top')
    .attr("data-content", content);
}

我无法弄清楚的是我之前的开发人员如何在画布上找出坐标。我显然可以开始玩它并猜测它们，直到我把它们弄好，但是我必须画出大约40个，这需要几个小时...... 有没有办法可以访问画布（例如在JS控制台中）并找到多边形应该结束的坐标？

使用d3.js在svg元素上绘制对象

0 个答案: