如何以角度4的百分比计算图像x和y坐标答案

【问题标题】：how to calculate image x and y coordinate as percentage in angular 4如何以角度4的百分比计算图像x和y坐标
【发布时间】：2018-04-19 12:51:03
【问题描述】：

如何将图像 x 和 y 坐标计算为角度 4 中的百分比。我在下面发布了我的代码。请帮我解决这个问题。

getPercentage(elem){
  this.xAxis = Math.floor((elem.pageX/elem.target.naturalWidth)*100);
  this.yAxis = Math.floor((elem.pageY/elem.target.naturalHeight)*100);
  console.log(this.xAxis);
  console.log(this.yAxis);
}



<img width="50%"   height="50%" class="img-thumbnail" src="https://imgd.aeplcdn.com/1056x594/n/3cpbpra_1422080.jpg?q=80" alt="" (click)="getPercentage($event)"/>

【问题讨论】：

请解释你想用 x 和 y 坐标的百分比来实现什么...
我必须根据角度 4 中的 x,y 坐标在图像上标记图标。x 和 y 坐标值应为百分比。
你的意思是你想在图像上显示一个图标。并且图标的位置将相对于图像？
是的，你的权利.. 我会在一小时内更新我在 stackblitz 中的代码并分享链接。请帮我解决这个问题。

标签： javascript angular angular-directive

【解决方案1】：

这是一个纯 CSS/HTML 的东西。

这里是 HTML：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<figure class="image-n-icon">
    <div class="heroimage"></div>
    <img src="placeholder.png" class="iconimage"></div>
</figure>
</body>
</html>

这里是 CSS (styles.css)

html {
    font-size: 62.5%;
}

body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.image-n-icon {
    padding: 0;
    margin: 0;
    position: relative;
    width: 50rem;
    height: 50rem;
}

.heroimage {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url(https://images.wesaturate.com/photos/ehfzab_peterofgh.jpg?w=1000&dpr=2&auto=compress&q=80&cs=tinysrgb&ixlib=js-1.0.6);
    background-position: center;    
}

.iconimage {
    position: absolute;
    top: 5rem;
    left: 5rem;
    width: 5rem;
}

你说百分比，我用rem。默认浏览器字体大小为 16 像素。我将 html font-size 设置为 62.5%。这转换为1rem = 10px。在整个代码中，您将使用 rem 并且您可以简单地操纵 html font-size 百分比来更改整个页面大小。即使您的用户更改了浏览器的字体大小，您的页面也会相应地缩放。

如下所示：

【讨论】：

我已经通过stackblitz链接stackblitz.com/edit/…更新了
我必须根据角度 4 中的 x,y 坐标在图像上标记图标。我必须在所有设备上工作。所以只有我将 x 坐标标记为左侧，y 坐标标记为最高百分比。
我是 angular 4 的新手，了解如何将此 jquery 代码转换为 angular 4
var position = $('#div').position(); var percentLeft = position.left/$(window).width() * 100; var percentTop = position.top/$(window).height() *100;