kineticjs文本溢出行爲

當使用kineticjs，如何模擬與指定的高度和寬度的DIV框的行爲與overflow:hidden，當文本超出DIV框的高度，耳提面命文本是隱藏的。kineticjs文本溢出行爲

見http://jsfiddle.net/8t9QV/，當我的高度設置爲1，第一行的「複雜文本」仍然顯示？

什麼是高度和寬度的kinetic.Text的行爲嗎？

2013-12-17 goh

你可以把你的文字在Kinetic.Group容器中，然後設置該組的clip屬性，以防止你的文字從集團外溢出：

enter image description here

這裏的代碼和一個小提琴：http://jsfiddle.net/m1erickson/M5m8P/

<!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>

來源

2013-12-17 05:10:58 markE

是有可能夾只是y軸和讓文本換爲寬度的下一行？ – goh

當然... Kinetic.Text的width屬性會導致文本如果超過該寬度，則會進行換行。然後使用剪輯刪除Y軸溢出：http://jsfiddle.net/m1erickson/SVSSM/ – markE

markE，多數民衆贊成我所需要的。但是我有一些一致性問題。 1.不包裝到dom中下一行的文本，在某些情況下包裝到kineticjs中的下一行，使用相同的高度，寬度度量值。任何想法是什麼導致這些問題？ – goh

kineticjs文本溢出行爲

回答

相關問題