Question

我正在尝试编写在图像上调整SVG叠加层大小的代码。我正在使用的服务器返回图像和API，我需要在图像顶部叠加多边形点列表。

它应该是这样的（下图是正确对齐的SVG图层）。图像尺寸为1280x720（我将其缩小）

我需要在我的应用程序（离子v1应用程序）中执行的操作是确保在浏览器窗口调整大小时SVG叠加层调整大小并且看起来非常困难。这是我的方法：

我正在捕获一个窗口调整大小事件，当调整图像大小时，我相对于绘制窗口的大小缩放SVG多边形点，因为似乎没有办法通过浏览器“自动”缩放SVG它与图像有关。

Here is my code pen正如您所看到的那样，当我进行重新缩放时，它不会按预期工作（并且在其全尺寸时，叠加层不准确）。叠加看起来不准确，当我调整大小时，它们都搞砸了。有人可以帮忙吗？

鉴于SO需要一个codepen链接的代码块，但如果你想运行它就更容易查看代码集

CSS：

.imagecontainer{position:relative; margin:0 auto;}

.zonelayer
{
    position:absolute;
    top:0;
    left:0;
    background:none;

}

.zonelayer polygon {
    fill-opacity: 0.25;
    stroke-width: 2px;
}

.Active {
    stroke: #ff0000;
    fill: #ff0000;
}

HTML code：

<ion-content>
        image:{{disp}}<br/>
      <small>points: <span ng-repeat="item in zoneArray">{{item}}</span></small>
        <div class="imagecontainer">

            <img id="singlemonitor" style="width:100vw; height:100vh;object-fit:contain" ng-src="http://m9.i.pbase.com/o9/63/103963/1/164771719.2SfdldRy.nphzms.jpeg"  />
            <div class="zonelayer">
                <svg ng-attr-width="{{cw}}" ng-attr-height="{{ch}}" class="zonelayer" ng-attr-viewBox="0 0 {{cw}} {{ch}}">
                    <polygon ng-repeat="item in zoneArray"  ng-attr-points="{{item}}" class="Active"/> </polygon>

                </svg>
            </div>
        </div>

    </ion-content>

JS控制器：

window.addEventListener('resize', liveloaded);
  liveloaded();
  // credit: http://stackoverflow.com/questions/41411891/most-elegant-way-to-parse-scale-and-re-string-a-string-of-number-co-ordinates?noredirect=1#41411927
    function scaleCoords(string, sx, sy) {
        var f = [sx, sy];
        return string.split(' ').map(function (a) {
            return a.split(',').map(function (b, i) {
                return Math.round(b * f[i]);
            }).join(',');
        }).join(' ');
    }

  function liveloaded()
  {

        $timeout (function () {
                    console.log ("IMAGE LOADED");
                    var img =document.getElementById("singlemonitor");

                    //var offset = img.getBoundingClientRect();
                    $scope.cw = img.clientWidth;
                    $scope.ch = img.clientHeight;
                    $scope.vx = img.offsetWidth;
                    $scope.vy = img.offsetHeight;

                    var rect = img.getBoundingClientRect();
                    //console.log(rect.top, rect.right, rect.bottom, rect.left);
                    $scope.disp = img.clientWidth+ "x"+img.clientHeight + " with offsets:"+$scope.vx+"/"+$scope.vy;

                    $scope.zoneArray = [
                    "598,70 700,101 658,531 516,436",
                    "531,243 687,316 663,593 360,717 191,520",
                    "929,180 1108,248 985,707 847,676",
                    "275,17 422,45 412,312 271,235",
                    ];

                    var ow = 1280;
                    var oh = 720;

                    for (var i=0; i < $scope.zoneArray.length; i++)
                    {
                        var sx = $scope.cw/ow;
                        var sy = $scope.ch/oh;
                        $scope.zoneArray[i] = scaleCoords($scope.zoneArray[i],sx,sy);
                        console.log ("SCALED:"+$scope.zoneArray[i]);
                    }


                });
            }

Answer 1

您的代码存在一些问题。

主要问题是你不能使用ng-attr-viewBox，因为角度会使＃34;正常化＆＃34;小写的属性。它将属性转换为viewbox（小写B），它（当前）无效。 viewBox区分大小写。

解决方案是使用Angular的特殊技巧来保护驼峰式情况。如果您使用ng-attr-view_box，则会生成正确的驼峰式属性名称viewBox。

<svg width="100vw" height="100vh" class="zonelayer" ng-attr-view_box="0 0 {{cw}} {{ch}}">

另一件事是你使用了错误的宽度和高度值的viewBox。您需要在viewBox中使用自然/内在图像尺寸。

$scope.cw = img.naturalWidth;
$scope.ch = img.naturalHeight;

Link to updated code pen

SVG重新调整这个难度吗？我错过了什么？

1 个答案: