javascript - 将 FlexBox 插入图像框架

Question

我想将 sap.m.FlexBox 控件放置在图像框架内，例如 THIS ONE例如。 该图像位于另一个 FlexBox 控件中:

var oContainer3 = new sap.m.FlexBox({
    id: "container3",
    direction: "Column",
    width: "70%",
    items: [
        new sap.m.Image({
            id: "tabletImg",
            src: "content/img/tabletVideoFrame.png"
        })
    ]
});

我需要放置以下控件:

var oSelectedFieldsContainer = new sap.m.FlexBox({
    id: "selectedFieldsContainer",
    direction: "Column",
    items: [
        new sap.m.Text({
            text: "This is a container for Selected Fields",
            textAlign: "Right",
            width: "100%",
            height: 100%
        })
    ]
});

在图像框架的空白区域内。

我尝试在 Controller 的 onAfterRendering() 函数中执行以下操作:

var imgPosition = $("#tabletImg").position();
$("#tabletImg").before("<div id='selectedFieldsDiv'></div>");
      oSelectedFieldsContainer.placeAt("selectedFieldsDiv");
      var x = imgPosition.left + 70;
      var y = imgPosition.top + 170;
 $("#selectedFieldsDiv").css({
      position: absolute,
      z-index: 5000,
      top:      y, 
      left:     x
 });

问题是图像的大小和位置会随着屏幕分辨率的变化而变化，而新 div 的位置不会变化，因此控件会在屏幕上到处乱跳。

提前谢谢您。

Answer 1

我将以下 css 属性添加到所需的容器中:

#container {
    border-image: url('../content/img/tabletVideoFrame.png') 175 110 175 110;
    border-width: 45px;
    width:550px;
    height: 600px;
};

添加图像作为边框解决了我的问题。

如果大家有更好的解决方案，欢迎分享。