KineticJS 调整文本大小以适应带有一些填充的矩形
Posted
技术标签:
【中文标题】KineticJS 调整文本大小以适应带有一些填充的矩形【英文标题】：KineticJS resize text to fit inside rectangle with some padding 【发布时间】：2012-12-29 02:28:21 【问题描述】：这是一个链接：http://jsfiddle.net/6VRxE/11/
我有一个固定大小的文本框，我想动态更改文本、文本大小和填充，以便文本适合矩形并垂直对齐。
var messageText = new Kinetic.Text(
x: .25*stage.getWidth(),
y: .25*stage.getHeight(),
width: .5*stage.getWidth(),
height: .5*stage.getHeight(),
fontSize: 10,
fontFamily: 'Lucida Grande',
text: 'Hello, click to continue',
align: 'center',
textFill: '#006400',
stroke: 'gray',
draggable: true,
fill: 'white',
);
我想用这样的事件或函数更改文本：
messageText.on('click',function()
messageText.setText('hi');
messageText.setFontSize(messageText.getHeight()/2);
messageText.setPadding(messageText.getHeight()/5); //this was one possibility to do some alignment but doesn't work great
stage.draw();
);
有没有人有一个很好的解决方案来计算取决于长度的文本大小？
【问题讨论】：
jsfiddle.net/6VRxE/12 这让我更接近了 jsfiddle.net/6VRxE/25 还没有 【参考方案1】：看看下面的padText 函数是否实现了你想要的：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Text Container Test</title>
</head>
<body>
<div id="container"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.0.6/kinetic.min.js"></script>
<script>
var layer = new Kinetic.Layer,
text = new Kinetic.Text(
text: 'Fit Me',
fill: 'black',
align: 'center'
),
rect = new Kinetic.Rect(
width: 400,
height: 200,
stroke: 'red'
),
stage = new Kinetic.Stage(
width: rect.width(),
height: rect.height(),
container: 'container'
);
layer.add( text );
layer.add( rect );
stage.add( layer );
padText( text, rect, 10 );
layer.draw();
function padText( text, container, amount )
while (( text.width() * 1.001 ) < container.width() - ( amount * 2 ))
text.fontSize( text.fontSize() * 1.001 );
text.y(( container.height() - text.height() ) / 2 );
text.width( container.width() );
text.height( container.height() );
</script>
</body>
</html>
Example
【讨论】：
以上是关于KineticJS 调整文本大小以适应带有一些填充的矩形的主要内容，如果未能解决你的问题，请参考以下文章
WPF TextBlock 字体调整大小以填充网格中的可用空间
如何在 React Native for Android 中调整字体大小以适应视图？