Question

我有一个应用程序，我在办公室布局中找到所有员工。我有一个Office布局图像，每个员工的Json都有一个x和y坐标，用于指示员工在布局上的位置。图像放在面板中，当我调整窗口大小时，图像也会相应调整大小。但员工的位置不会调整大小。以下是我的代码：

<div class='col-lg-7 col-md-6 col-sm-12'>
            <div class='row'>
                <div class='col-xs-12'>
                    <div class='panel panel-default'>
                        <div class='panel-body'>
                            <div id="empMap">
                                <img  rel="prefetch" alt="Image is not found" ng-src="{{officeImage}}" id="empMap" style="width: 100%;height: 100%; z-index: -1" onerror="this.src='/img/OfficeImageNotAvailable.png'">
                                <div>
                                    <div ng-repeat="emp in employees">
                                        <span  class="glyphicon glyphicon-oil" id="{{emp.empId}}" ng-click="empDisplay($event)" ng-dblclick="empInfo($event)"
                                              ng-style="{'cursor': 'pointer','color':'green','position': 'absolute',
                                              'left': xValue + emp.location.xcoordinate, 'top': yValue - emp.location.ycoordinate, 'z-index': '2'}"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</div>

控制器中的代码：

$("#empMap").load(function() {//loading the image of the plant
            img_width = this.width;
            img_height = this.height;
            console.log("getting the values of the images");
            var img_left = $("#empMap").position().left;
            var img_top = $("#empMap").position().top;
            var y = img_height + img_top;
            $scope.xValue = img_left;
            $scope.yValue = y -14;
});

我在上面的代码中做的是我从图像的顶部，左侧高度和宽度值计算xValue和yValue，在我的html中，我将x和y坐标值添加到此值。

我不确定在调整图像大小时如何相应移动位置。此外，员工的位置也未正确显示。那么你能让我知道我在这里缺少什么，以及在这种情况下更好的方法。

Answer 1

您的功能仅在最初加载页面时运行，要在重新调整浏览器窗口大小时重新计算位置，您需要再次调用该功能。

$( window ).resize(function() {
  Actions Go Here
});

你最好的选择可能是将你的位置计算单独设置为函数，然后从.load和.resize调用它，以便你的代码是干的。

如何使图像上的span元素相对于图像大小调整？

1 个答案: