如何使用 Appcelerator 将 UI 元素的中心从 top/left 更改为中心？

Question

我有一个带有下面功能的滑块，应该可以减小圆视图的半径。更改半径有效，但 label/circle 向右 "moving" 因为左侧和顶部位置是 "center" 和静态并且不会更改。

如何更改标签的中心位置保持不变（而不是 left/top 角）？ 我试过 anchorPoint、animatedCenter 和 center但没有明显的效果。现在我没有动画，因为滑块正在触发半径的变化。

function showRadar(e){
    //$.radarIcon.anchorPoint = {x:0.5, y:0.5}; //no effect
    //$.radarIcon.animatedCenter = {x:0.5, y:0.5}; //no effect
    $.radarIcon.height = e.source.value;
    $.radarIcon.width = e.source.value;
    $.radarIcon.borderRadius = e.source.value / 2;
    $.radarIcon.center = {x:30, y:400}; //no effect
}

Answer 1

只需在另一个视图中绕圈即可：

index.xml

<Alloy>
    <Window>
        <View id="container">
            <View id="circle"/>
            <Label id="lbl" text="test"/>
        </View>
    </Window>
</Alloy>

index.tss

"Window" : {
    backgroundColor: "white"
}
"Label" : {
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    color: "#000"
}

"#circle" : {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: "red"
}
"#container" : {
    width: 200,
    height: 200
}

index.js

function showRadar(e) {
    $.circle.height = e;
    $.circle.width = e;
    $.circle.borderRadius = e / 2;
}

var i = 100;

$.circle.addEventListener("click", function() {
    showRadar(i);
    if (i < 200) {
        i += 20;
    }
})
$.index.open();

当您单击圆圈时，它会变大并且文本仍然居中。我把外层容器的最大宽度设置为200，这样它就不会变大了。

如何使用 Appcelerator 将 UI 元素的中心从 top/left 更改为中心？

How to change the center of a UI element from top/left to center with Appcelerator?

animation

layout

appcelerator

positioning