如何在不改變牆壁的 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")
        ));