Angular 中的图像放大镜 [英] Image magnifier in Angular

问题描述

我正在尝试在悬停时实现图像放大镜.我尝试复制 w3schools 中的代码，这纯粹是 Javascript.我正在尝试在 Angular 中实现以下代码

I am trying to implement a image maginfier on hover.I tried to replicate the code as in w3schools which is purely of Javascript.I am trying to implement the following code in Angular

https://www.w3schools.com/howto/tryit.asp?文件名=tryhow_js_image_magnifier_glass

我在打字稿中使用了上述方法，并从 Angular 中的 ngOnInit 调用它，但我无法从该方法中获得任何结果.我确保正确传递了 id 并验证了正在调用的方法.但仍然无法得到任何结果.我不希望将任何 npm 包用于放大镜，因为它们中的大多数都有错误.

I used the above method in typescript and called it from ngOnInit in Angular but i am not able to get any result from the method.I have ensured the id is passed correctly and validated the method is being called .But still not able to get any result .I wish not to use any npm packages for magnifier since most of them had bugs.

component.ts

ngOnInit(){

 this.magnify(imgID, zoom)

 }

magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  /*create magnifier glass:*/
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
  /*insert magnifier glass:*/
  img.parentElement.insertBefore(glass, img);
  /*set background properties for the magnifier glass:*/
  glass.style.backgroundImage = "url('" + img.src + "')";
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
  bw = 3;
  w = glass.offsetWidth / 2;
  h = glass.offsetHeight / 2;
  /*execute a function when someone moves the magnifier glass over the image:*/
  glass.addEventListener("mousemove", moveMagnifier);
  img.addEventListener("mousemove", moveMagnifier);
  /*and also for touch screens:*/
  glass.addEventListener("touchmove", moveMagnifier);
  img.addEventListener("touchmove", moveMagnifier);
  function moveMagnifier(e) {
    var pos, x, y;
    /*prevent any other actions that may occur when moving over the image*/
    e.preventDefault();
    /*get the cursor's x and y positions:*/
    pos = getCursorPos(e);
    x = pos.x;
    y = pos.y;
    /*prevent the magnifier glass from being positioned outside the image:*/
    if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
    if (x < w / zoom) {x = w / zoom;}
    if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
    if (y < h / zoom) {y = h / zoom;}
    /*set the position of the magnifier glass:*/
    glass.style.left = (x - w) + "px";
    glass.style.top = (y - h) + "px";
    /*display what the magnifier glass "sees":*/
    glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    /*get the x and y positions of the image:*/
    a = img.getBoundingClientRect();
    /*calculate the cursor's x and y coordinates, relative to the image:*/
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*consider any page scrolling:*/
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}

推荐答案

这是根据您的要求进行的有效堆栈闪电战.它显示了 w3school 上提到的图像缩放功能的实现.https://stackblitz.com/edit/angular-w3school-image-magnification

Here is a working stackblitz as per your requirements. It shows the implementation of image zoom functionality mentioned on w3school. https://stackblitz.com/edit/angular-w3school-image-magnification

您还没有显示您的 html 和 css 文件.所以，我不完全确定，但以下可能是缩放对您不起作用的原因.

You have not shown your html and css files. So, I am not totally sure but the following might be the reason why zoom is not working for you.

问题是 img-magnifier-glass div 元素是使用经典的 DOM 方法document.createElement"创建的.然后，类 'img-magnifier-glass' 应用于它，再次使用经典的 DOM 方法(setAttribute).但是，在 angular 中，样式是被封装的.因此，如果您在 app.component.css 中添加了 '.img-magnifier-glass' 的类定义，那么该类将不会应用于 glass div，因为模板 (app.component.html) 中未提及它.请参阅此了解更多信息 - https://github.com/angular/angular/issues/7845

Problem is that img-magnifier-glass div element is created using classical DOM method 'document.createElement'. And then, class 'img-magnifier-glass' is applied to it, again using a classical DOM method (setAttribute). But, in angular, styles are encapsulated. So, if you have added a class definition of '.img-magnifier-glass' in app.component.css then that class won't be applied to glass div since it is not mentioned in the template (app.component.html). See this for more info - https://github.com/angular/angular/issues/7845

要解决此问题，您可以将.img-magnifier-glass"类的定义移动到styles.css(定义全局样式的位置)

To fix this, you can either move definition of class '.img-magnifier-glass' to styles.css (Where global styles are defined)

或者你可以将类保留在 app.component.css 中，但使用伪选择器 ::ng-deep .将 ::ng-deep 伪类应用于任何 CSS 规则会完全禁用该规则的视图封装.任何应用了 ::ng-deep 的样式都会成为全局样式.

or you can keep the class in app.component.css but use pseudo-selector ::ng-deep with it. Applying the ::ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for that rule. Any style with ::ng-deep applied becomes a global style.

::ng-deep .img-magnifier-glass {
}

或者你可以通过指定

@Component({
// ...
encapsulation: ViewEncapsulation.None, //<<<<< this one!
styles: [
  // ...
]
})

如果你使用Renderer2会更好(https://angular.io/api/core/Renderer2) 而不是在这里创建像玻璃元素这样的动态元素.Renderer2 将负责正确封装应用于使用它创建的元素的类.

It will be better will be if you use Renderer2 (https://angular.io/api/core/Renderer2) instead for creating dynamic elements like glass element here. Renderer2 will take care of correctly encapsulating class applied on elements created using it.

这篇关于Angular 中的图像放大镜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！