在SAPUI5中设置页面内对象的坐标

Question

我想使用jquery.offset（）方法在sapui5中的特定位置的视图内的页面中添加图像。 但是，它不起作用。 调试器显示图像的默认偏移值。 请帮忙。

我有一个ID为“ id_image”的图像，并且使用以下代码来设置图像的偏移量：

var Image = new sap.m.Image("id_image",{
            src:"images/myImage.png"
        });
$("#id_image").offset({top:"200px", left:"300px"});
return new sap.m.Page("id_page",{
            title: "View",
            content: [Image

            ]
        });

Answer 1

如前所述，您的代码存在一些问题：

1. 您正在设置尚未在DOM中加载的元素的偏移量，因此在此阶段设置偏移量不会有任何效果。 最好的解决方案是在视图的onAfterRendering事件中进行设置。
2. 根据jQuery API ， offset()方法的坐标仅接受数字（10、20等），而您提供了CSS单位（“ 100px”等）

请参阅此工作jsbin示例http://jsbin.com/jafuk/1/edit ，其中在onAfterRendering事件中设置了偏移量。

既然您在另一个主题中问过动画，我就添加了它作为奖励。 我将把它留作练习，以了解如何将控件/图像从一个MatrixLayout（Cell）分离到另一个:-)

Answer 2

通常，使用JQuery进行HTML转换不是一个好主意。 为了您的目的，应使用sap.ui.commons.layout.AbsoluteLayout定义图像偏移。

var oImage = new sap.m.Image("id_image",{
        src:"images/myImage.png"
    });
var oLayout = new sap.ui.commons.layout.AbsoluteLayout({
        width: "" //Adjust width
        height: "" //and height for container
    }).addContent(oImage, {top:"200px",left:"300px"});
return new sap.m.Page("id_page",{
        title: "View",
        content: [oLayout

        ]
    });