Question

在KinetiJS的支持下创建图像编辑器库。

在我的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>
</div>

然后创建一个舞台

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

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

添加图片，

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

应用的CSS是，

#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;
}

textarea应位于图片的顶部。在这种情况下，我使用textarea查询放置了包含@media的div，以支持不同的屏幕大小和方向。

执行以下步骤时会出现此问题：以纵向方式加载页面，然后将设备方向更改为横向。然后textarea的位置不正确。这是因为动力学阶段没有正确调整方向变化（仅限图像区域）。

有人可以帮我正确调整大小吗？这应该适用于触摸设备。

...谢谢

阶段没有调整方向变化

0 个答案: