如何在不改变墙壁的 position 的情况下放大和缩小

Question

我正在使用 JS 创建平面图注释器，并希望将墙壁放在网格顶部以实现绘图的精确性。 另外，我想将平面图图像作为网格背景。 所以，为了更清楚，这里是以网格和平面图为背景的照片

因此，正如您在上面的照片中看到的那样，有一个网格和背景图像，用户也可以像这样在网格顶部放置墙壁

但主要问题涉及放大和缩小功能，也就是说，我想要的是当用户放大时，网格上的背景图像和墙的位置应该匹配。 但是现在如果用户放大，那么网格上墙的位置会像这样移动到不同的地方

这是我的放大和缩小功能代码：

FloorplanUI.prototype.adjustScale = function (sign) {
  var floorplan = this.floorplan;
  var myImg = document.getElementById("backImg");
  var currWidth = myImg.clientWidth;
  var el = document.getElementById(this.state.scaleDisplayId);
  floorplan.startTransaction("Change Scale");
  switch (sign) {
    case "-":
      floorplan.style.width -= "10px";

      if (currWidth == 2500) return false;
      else {
        myImg.style.width = currWidth - 10 + "px";
      }
      break;
    case "+":
      floorplan.style.width += "10px";
      if (currWidth == 2500) return false;
      else {
        myImg.style.width = currWidth + 10 + "px";
      }
      break;
  }
  floorplan.scale = parseFloat(
    (Math.round(floorplan.scale / 0.1) * 0.1).toFixed(2)
  );
  var scale = (floorplan.scale * 100).toFixed(2);
  el.innerHTML = "Scale: " + scale + "%";
  floorplan.commitTransaction("Change Scale");
};

我认为也许有一种方法可以在不改变比例的情况下进行放大，这样即使用户放大和缩小，网格和背景图像的位置也始终保持一致。 我真的需要你的帮助

Answer 1

您真的不想操纵 HTML DOM 以获得我认为您想要的行为。 相反，请执行https://gojs.net/latest/samples/kittenMonitor.html示例的操作：

      // the background image, a floor plan
      myDiagram.add(
        $(go.Part,  // this Part is not bound to any model data
          {
            layerName: "Background", position: new go.Point(0, 0),
            selectable: false, pickable: false
          },
          $(go.Picture, "https://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg")
        ));