Javascript kineticjs文本溢出行为_Javascript_Html_Kineticjs

Javascript kineticjs文本溢出行为

javascript html

Javascript kineticjs文本溢出行为,javascript,html,kineticjs,Javascript,Html,Kineticjs,在使用kineticjs时，我如何使用溢出：隐藏模拟具有指定高度和宽度的div框的行为，即当文本超出div框的高度时，将隐藏重新标记的文本看，当我的高度设置为1时，第一行“复杂文本”仍然显示 kinetic.Text中高度和宽度的行为是什么？您可以将文本放入kinetic.Group容器中，然后设置该组的clip属性以防止文本溢出组外：下面是代码和小提琴：原型正文{padding:20px；} #容器{ 边框：实心1px#ccc；边缘顶部：10px；宽度：350px；高度：35

在使用kineticjs时，我如何使用

溢出：隐藏模拟具有指定高度和宽度的div框的行为，即当文本超出div框的高度时，将隐藏重新标记的文本
看，当我的高度设置为1时，第一行“复杂文本”仍然显示
kinetic.Text
中高度和宽度的行为是什么？
您可以将文本放入kinetic.Group容器中，然后设置该组的clip
属性以防止文本溢出组外：

下面是代码和小提琴：

原型
正文{padding:20px；}
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：350px；
高度：350px；
}
$（函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：350，
身高：350
});
var layer=新的动能层（）；
阶段。添加（层）；
var组=新的动力学组({
宽度：100，
身高：50，
剪辑：[0,0100,50]
});
层。添加（组）；
var rect=新的动能.rect({
x:0,，
y:0，
宽度：group.getWidth（），
高度：group.getHeight（），
填充：“天蓝色”
});
添加组（rect）；
var text=新的dynamic.text({
x:5，
y:20，
文字：“红鼻子驯鹿鲁道夫……”，
填充：“红色”，
});
组。添加（文本）；
layer.draw（）；
$（“#myButton”）。单击（函数（）{}）；
}); // end$（函数（）{}）；
按钮
是否可以只剪切y轴，让文本换行到下一行的宽度？当然可以…Kinetic的width属性。如果文本超过该宽度，文本将导致文本换行。然后使用剪辑删除y轴溢出：马克，这是我所需要的。但是，我有一些一致性问题。1.在dom中没有换行到下一行的文本，在某些情况下会在kineticjs中换行到下一行，使用相同的高度、宽度测量值。有什么想法导致这些问题吗？在内部，Kinetic使用context.measureText计算包装的字宽。这与DOM计算不同。如果您确实需要DOM换行符，您必须像前面的问题中那样自己计算换行符：。干杯那么我应该在哪里替换context.measureText的行为呢？我尝试了var layer=new dynamic.layer（）；var context=layer.getContext（）；context.measureText=文本宽度；但它似乎没有接到电话
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>

<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    var group=new Kinetic.Group({
        width:100,
        height:50,
        clip:[0,0,100,50]
    });
    layer.add(group);

    var rect= new Kinetic.Rect({
        x:0,
        y:0,
        width:group.getWidth(),
        height:group.getHeight(),
        fill:"skyblue"
    });
    group.add(rect);

    var text = new Kinetic.Text({
        x:5,
        y:20,
        text:"Rudolph the Red Nosed Reindeer...",
        fill: 'red',
    });
    group.add(text);

    layer.draw();




    $("#myButton").click(function(){});


}); // end $(function(){});

</script>       
</head>

<body>
    <button id="myButton">Button</button>
    <div id="container"></div>
</body>
</html>