[英]How to zoom in and out without changing the position of a wall
I was creating floorplan annotator with JS and wanted to put walls on top of grid so as to achieve preciseness of drawing.我正在使用 JS 创建平面图注释器,并希望将墙壁放在网格顶部以实现绘图的精确性。 Also, I want to have an image of floorplan as a background of grid.
另外,我想将平面图图像作为网格背景。 So, to be more clear, here is the photo of grid and floorplan being as background
所以,为了更清楚,这里是以网格和平面图为背景的照片
So, as you can see the photo above there is a grid and background image and a user can also put walls on top of grid like this因此,正如您在上面的照片中看到的那样,有一个网格和背景图像,用户也可以像这样在网格顶部放置墙壁
But the main problem concerns zoom in and out functionality, that is, what I want is when a user zooms in, the background image and location of wall on the grid SHOULD MATCH.但主要问题涉及放大和缩小功能,也就是说,我想要的是当用户放大时,网格上的背景图像和墙的位置应该匹配。 But now if a user zooms in then the location of wall on grid moves to different place like this
但是现在如果用户放大,那么网格上墙的位置会像这样移动到不同的地方
Here is my code of zoom in and out functionality:这是我的放大和缩小功能代码:
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");
};
I assume maybe there is a way to zoom in without changing the scale so that grid and background image location always be consistent even if a user zooms in and out.我认为也许有一种方法可以在不改变比例的情况下进行放大,这样即使用户放大和缩小,网格和背景图像的位置也始终保持一致。 I really need your help
我真的需要你的帮助
You really don't want to manipulate HTML DOM in order to get the behavior that I think you want.您真的不想操纵 HTML DOM 以获得我认为您想要的行为。 Instead, do what the https://gojs.net/latest/samples/kittenMonitor.html sample does:
相反,请执行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")
));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.