Question

我有一个带有下面功能的滑块，它应该在 - 并且减小圆形视图的半径。改变半径是有效的，但标签/圆圈是＆＃34;移动＆＃34;向右，因为左侧和顶部位置是＆＃34;中心＆＃34;和静态，不要改变。

如何更改标签的中心位置保持不变（而不是左/上角）？我尝试过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元素的中心从顶部/左侧更改为中心？

1 个答案: