kineticjs text overflow behavior

Question

When using kineticjs, how do i simulate the behavior of a div box with specified height and width with overflow:hidden, that when the text goes beyond the height of the div box, the remainding text is hidden.

See http://jsfiddle.net/8t9QV/, when my height is set to 1, the first line "Complex Text" is still displayed?!

What is the behavior of height and width in kinetic.Text?

score 2 · Accepted Answer · answered Dec 17 '13 at 05:10

2

You can put your text in a Kinetic.Group container and then set that group's clip property to prevent your text from overflowing outside the group:

enter image description here

Here's code and a Fiddle: 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>

answered Dec 17 '13 at 05:10

markE

102,905
11
164
176

is it possible to clip just the y-axis and let the text wrap to the next line for the width? – goh Dec 17 '13 at 05:15
Sure...The width property of Kinetic.Text causes the text to wrap if it exceeds that width. Then use clip to remove the y-axis overflow: http://jsfiddle.net/m1erickson/SVSSM/ – markE Dec 17 '13 at 05:18
markE, thats what i required. however I have some consistency issues. 1. Text that does not wrap to next line in the dom, wraps to the next line in kineticjs in some cases, using the same measurements for height, width. Any ideas what causes these issues?? – goh Dec 17 '13 at 06:37
Internally, Kinetic uses context.measureText to calculate word widths for wrapping. That's different from DOM calculations. If you absolutely need DOM line breaks, you'll have to calculate the breaks yourself like in this previous SO question: http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript. Cheers! – markE Dec 17 '13 at 06:44
where should i replace the behavior of context.measureText in then? I've tried var layer = new Kinetic.Layer(); var context = layer.getContext(); context.measureText = textWidth; but it didn't seem to get called – goh Dec 17 '13 at 08:44
It's more complex than that. To get the DOM style line breaks, you'll have to use one Kinetic.Text for each line using the previous SO question to determine linebreak and lineheight. You could alternatively use a single Kinetic.Shape which gives you a context to work with. You can draw multiple lines of text in that single Kinetic.Shape, but you'll still need the previous SO question to do the linebreaks/lineheight. – markE Dec 17 '13 at 14:41
I upvoted the answer but it seems like it doesn't work in 5.1.0 --> https://github.com/ericdrowell/KineticJS/issues/910 (closed the issue immediately after as there is new syntax to it) – Mars Robertson Apr 30 '14 at 16:07
Yep, KineticJS is useful but it sure does a lot of breaking changes with each version--it can be frustrating(!). The newer versions use objects rather than simple arrays for some parameters: clip:{x:0, y:0, width:50, height:100} – markE Apr 30 '14 at 16:23

kineticjs text overflow behavior

1 Answers1