NativeScript

Question

我对 css 和 NativeScript 有问题。

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

我想要的：以我触摸的地方为中心的圆圈。

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

你有什么想法吗？

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

=====

答案：由原作者 Josh

提供

我必须在我的 css 中删除：

"px"

在我的脚本中：

将顶部和左侧属性的宽度和高度减去 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

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

NativeScript - display element centered on tap

css

angular2-nativescript