Question

我使用 NativeScript 来解决问题。

（普通网络应用的解决方案是：翻译（-50％， - 50％）但这对Nativescript不起作用）

我想要的是什么：在我触摸的地方居中的圆圈。

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

你有想法吗？

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

=====

ANSWER ：由原创乔希提供

我必须删除我的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 - 以tap为中心的显示元素

1 个答案: