Question

我正在为自己设置一个Hud生成器，并在子元素上创建了可拖动的边界，并将其限制在父元素上，但是，例如，如果起点是0，最大值是点是200，如果滚动宽度，则X的缩放比例为0，X的缩放比例为200，1.00的缩放比例为200。 Y也一样，但高度要滚动。

到目前为止，我还没有尝试过任何关于比例的事情，因为我不知道如何做，所以我猜想如果我能够获得父元素的宽度和高度，我将能够以某种方式提出一个公式来这样的规模。我已经尝试通过指令和主机绑定来获取父级的宽度/高度，尽管这不是我想要的，因为我对它的理解不正确。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  onDragEnded(event) {
    let element = event.source.getRootElement();
    let boundingClientRect = element.getBoundingClientRect();
    console.log(boundingClientRect);
    let parentPosition = this.getPosition(element);
    console.log('x: ' + (boundingClientRect.x - parentPosition.left), 'y: ' + (boundingClientRect.y - parentPosition.top));

  }

  getPosition(el) {
    let x = 0;
    let y = 0;
    while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
      x += el.offsetLeft - el.scrollLeft;
      y += el.offsetTop - el.scrollTop;
      el = el.offsetParent;
    }
    return { top: y, left: x };
  }
}

代码显示了如何显示元素当前在控制台中的位置以及如何将元素绑定到父元素。

我目前想要实现的是创建上面提到的比例并获取父级的宽度/高度。第一个优先选择是获取父元素的宽度/高度，然后，如果我什么都没想到，将其升级到此处。

以角度获取父级的大小并重新缩放

0 个答案: