dorado 圆形/环形文字居中

最新推荐文章于 2021-06-16 17:12:34 发布

原创最新推荐文章于 2021-06-16 17:12:34 发布 · 248 阅读

0 ·

CC 4.0 BY-SA版权

dorado 专栏收录该内容

61 篇文章

订阅专栏

本文介绍了如何在 Dorado 框架中实现圆形和环形的文字居中显示，包括单行和双行文本的处理。通过使用布局管理器的 align 和 pack 属性，可以有效地调整子元素的排列方式，确保文字在图形区域内居中对齐。

文章目录

圆形文字居中
环形文字居中
圆形两行文字居中
环形两行文字居中
使用布局的align和pack

圆形文字居中

在这里插入图片描述

view.get("label").set({
	width:"80px",
	height:"80px",
	style:{
		background:"red",
		borderRadius:"50%",//圆形
		lineHeight:"80px",//行高和高度一样，可使得该行文字居中
		textAlign:"center",
	},
	text:"哈哈",
});

环形文字居中

view.get("label").set({
	width:"100px",
	height:"100px",
	style:{
		background:"red",
		borderRadius:"50%",//圆形
		//此时label的可用范围100-20=80直径的圆
		lineHeight:"80px",//行高和高度一样，可使得该行文字居中
		textAlign:"center",
		
		border:"10px blue solid",//环形
	},
	text:"哈哈",
});

圆形两行文字居中

在这里插入图片描述

self.set({
	width:"100px",
	height:"100px",
	style:{
		borderRadius:"50%",
		background:"red",
	}
});
view.get("#labela").set({
	style:{
		textAlign:"center",
	},
	text:"aaa",
});
view.get("#labelb").set({
	style:{
		textAlign:"center",
	},
	text:"bbb",
});

环形两行文字居中

在这里插入图片描述
比较麻烦，暂无头绪

Container[hbox].set({
	width:"200px",
	height:"200px",
}
Container[vbox].set(
{
	//pack="center"
	style:{
		width:"100px",
		height:"100px",
	},
	
	
});
view.get("#labela").set({
	style:{
		textAlign:"center",
	}
});
view.get("#labelb").set({
	style:{
		textAlign:"center",
	}
});