如何在不改变墙壁位置的情况下放大和缩小
How to zoom in and out without changing the position of a wall
我正在用 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");
};
我想也许有一种方法可以在不改变比例的情况下进行放大,这样即使用户放大和缩小,网格和背景图像的位置也始终保持一致。我真的需要你的帮助
您真的不想操纵 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")
));
我正在用 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");
};
我想也许有一种方法可以在不改变比例的情况下进行放大,这样即使用户放大和缩小,网格和背景图像的位置也始终保持一致。我真的需要你的帮助
您真的不想操纵 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")
));