javascript - Making KineticJS stage of variable width OR update stage on resize - Stack Overflow

admin管理员组

文章数量:1417097

I have created a small KineticJS animation, which you can see at this address:

.html

I would like to find a way for this animation to always be set to 100% of the window width. (It will be a "background" area for another element.)

I can do the initial set by setting the width to $(window).width() from jQuery (there are probably other ways of doing this, but jQuery will already be used), but I can't figure out how to redraw/reset the stage on resize or orientationchange.

So, is there a way to do any of the following to acplish this:

1. Can I set the stage to a variable width somehow (100%)? (I'm assuming the answer is no, but even if it was yes, I'm not sure that the animation would be able to scale relatively anyway.)
2. Can I just clear the animation and recreate it on resize or orientationchange? This doesn't sound like it'd be terribly efficient, and when I tried to use layer.remove() on resize and orientationchange, it nearly hung the browser.
3. Or is there an easy way to convert this image to an SVG file and then use jQuery SVG instead to acplish the same thing? (Provided that everything still works on resize and orientationchange.)
4. Or is there something else I'm not thinking of?

I have created a small KineticJS animation, which you can see at this address:

http://sandbox-ben.kimbiaservices./kineticjs/index.html

I would like to find a way for this animation to always be set to 100% of the window width. (It will be a "background" area for another element.)

I can do the initial set by setting the width to $(window).width() from jQuery (there are probably other ways of doing this, but jQuery will already be used), but I can't figure out how to redraw/reset the stage on resize or orientationchange.

So, is there a way to do any of the following to acplish this:

1. Can I set the stage to a variable width somehow (100%)? (I'm assuming the answer is no, but even if it was yes, I'm not sure that the animation would be able to scale relatively anyway.)
2. Can I just clear the animation and recreate it on resize or orientationchange? This doesn't sound like it'd be terribly efficient, and when I tried to use layer.remove() on resize and orientationchange, it nearly hung the browser.
3. Or is there an easy way to convert this image to an SVG file and then use jQuery SVG instead to acplish the same thing? (Provided that everything still works on resize and orientationchange.)
4. Or is there something else I'm not thinking of?

• javascript
• jquery
• canvas
• svg
• kineticjs

Share Improve this question Follow asked Jan 9, 2013 at 22:28 Ben DyerBen Dyer 1,66611 gold badge1212 silver badges2323 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

I think I found the solution. The problem with trying to detect .on('resize') is that the act of resizing a window causes the event to fire a zillion times, which drags the browser down.

Inspired by this answer: Detect when a window is resized using JavaScript ? -- I was able to create a jQuery event that detects (more or less) when the resize is pleted. Once that's done, I empty the container element and refire the initial draw script. The code below does the trick:

$(window).on('resize',function(){
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function(){
        $(this).trigger('resizeEnd');
    },500);
});

$(window).on('resizeEnd orientationchange',function(){
    $('#container').empty();
    RunHeaderAnim();
});

本文标签： javascriptMaking KineticJS stage of variable width OR update stage on resizeStack Overflow