KineticJS icon indicating copy to clipboard operation
KineticJS copied to clipboard

Stage not resizing on orientation change

Open minu-k opened this issue 10 years ago • 3 comments

Am creating an image editor library with the support of KinetiJS. In my html,

<div id="editorarea" class="fill">
<div id="imageContainerDiv" class="imageContainerDiv" >
    <div>....</div>
    <div>....</div>
    <div id='rotateouterDiv' class='rotateouterDiv' >
        <textarea placeholder='Enter You Text here' id='inputField' name='graffiti' class='textContainerMob'></textarea>
    </div>
    <div id='imageContainer'></div>
</div>

Then creating a stage

_kineticStage = new editor._Stage({
            container : 'imageContainer',
            width : $('#editorarea').width(),
            height : $('#editorarea').height()
        });

Kinetic.Util.extend(editor._Stage, Kinetic.Stage);

And adding an image,

  _kineticImage = new editor._Image({
                x : 0,
                image : img,
                y : 0,
                draggable : true,
            });
 layer.add(_kineticImage);

The CSS applied is,

#editorarea {
width: 100%;
height: 80%;
margin-top: .1%;

min-height: 70%%;
display: block;
border-width: 2px;
border-style: solid;
}

.fill {
min-height: 85%;
height: 90%;
}

.imageContainerDiv {
width: 100%;
height: 100%;
z-index: 0;
left: 0;
right: 0;
background-color: #FFF;
display: block;
background-image: url(../images/back_pattern.png);
background-repeat: repeat;
overflow: hidden;
}

The text area should be on the top of the image. In this case, I placed that div containing the text area using the @media queries, for supporting different screen size and orientation. The issue occurs when following the steps: load the page in portrait, then change the device orientation to landscape. Then the position of text area is not correct. This is because the kinetic stage is not properly resizing on orientation change (only the area with image). Can anyone help me to resize it properly? This should work in touch devices.

Thanks....

minu-k avatar Dec 09 '15 07:12 minu-k

similar issue here with fullscreen. did you find a solution?

ghost avatar Mar 18 '16 08:03 ghost

For the record, I could only reproduce it on iOS. It failed on all these:

macOS Simulator (iOS 9.2 Safari) iOS 10.2.1 Safari iOS 10.2.1 Chrome iOS 10.2.1 Firefox iOS 10.2.1 Firefox Focus iOS 10.2.1 Mercury

I tested it on a Samsung (Chrome) and could not reproduce the problem.

dreamyguy avatar Aug 02 '17 08:08 dreamyguy