NativeScript - 以点击为中心的显示元素

Question

我对 NativeScript 的 css 有疑问。

（普通 webapp 的解决方案是：translate(-50%, -50%) 但这不适用于 Nativescript）

我想要的：一个以我触摸为中心的圆圈。

我现在得到的：一个不在我触摸的中心的圆圈。

你有什么想法吗？

（当我只有一个 300px 的 Circle 时，我可以用“translate(-40%, -40%)”作弊，但我正在寻找 XXXpx 的解决方案）

=====

答案：由theOriginalJosh给出

我必须在我的 css 中删除：

• “像素”

在我的脚本中：

• 将 top 和 left 属性的宽度和高度缩小 50%。

====

HTML

<AbsoluteLayout #container>
</AbsoluteLayout>

组件

@ViewChild('container') absoluteLayout: ElementRef;

public onTap(args: TouchGestureEventData) {
    if (args && args.action === 'down') {
        let xCoord = args.getX();
        let yCoord = args.getY();

        let label3 = new Label();
        label3.top = yCoord;
        label3.left = xCoord;
        label3.className = "circle three";

        let label4 = new Label();
        label4.top = yCoord;
        label4.left = xCoord;
        label4.className = "circle four";


        this.absoluteLayout.nativeElement.addChild(label3);
        this.absoluteLayout.nativeElement.addChild(label4);
    }
}

CSS

.circle {
    color: blue ;
    border-style: solid;
    border-radius: 50%;
     transform: translate(-50%, -50%); 
}
.three {
    border-color: red;
    width: 50px;
    height: 50px;
    border-width: 20px;
} 
.four {
    border-color: blue;
    width: 300px;
    height: 300px;
    border-width: 20px;
} 

Answer 1

由于您知道放置在页面上的圆圈的高度和宽度，因此您可以从 X 和 Y 坐标中减去这些圆圈高度和宽度的一半。这应该使他们居中。

public onTap(args: TouchGestureEventData) {
    if (args && args.action === 'down') {
    let xCoord = args.getX();
    let yCoord = args.getY();

    let label3 = new Label();
    label3.top = yCoord - 25;
    label3.left = xCoord - 25;
    label3.className = "circle three";

    let label4 = new Label();
    label4.top = yCoord - 150;
    label4.left = xCoord - 150;
    label4.className = "circle four";


    this.absoluteLayout.nativeElement.addChild(label3);
    this.absoluteLayout.nativeElement.addChild(label4);
}

}

您可能想查看 Github 上的 nativescript-ng2-windchimes 应用程序，它大约有一年的历史，但有许多您正在尝试做的概念。 https://github.com/NathanWalker/nativescript-ng2-windchimes