如何使用 Appcelerator 将 UI 元素的中心从 top/left 更改为中心?
How to change the center of a UI element from top/left to center with Appcelerator?
我有一个带有下面功能的滑块,应该可以减小圆视图的半径。更改半径有效,但 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
}
只需在另一个视图中绕圈即可:
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,这样它就不会变大了。
我有一个带有下面功能的滑块,应该可以减小圆视图的半径。更改半径有效,但 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
}
只需在另一个视图中绕圈即可:
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,这样它就不会变大了。