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

【问题标题】：Setting coordinates of an object inside a page in SAPUI5在SAPUI5中设置页面内对象的坐标
【发布时间】：2014-03-14 07:19:50
【问题描述】：

我想使用 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

            ]
        });

【问题讨论】：

分享 HTML 代码或分享 jsfiddle URL！
@Venkat 它不是 html 页面。我使用的是 sapui5。我有一个看法。在视图中，我正在返回一个包含此图像的页面。
分享返回的 HTML 代码
这永远不会以这种方式工作。您正在将偏移量设置为尚未添加到 DOM 模型中的图像。您可以尝试视图的 onAfterRendering 事件，但即便如此我也怀疑这会起作用...
@Qualiture 它在 onAfterRendering 中也不起作用。您知道如何在页面加载时将图像设置在固定坐标处。

标签： javascript jquery sapui5

【解决方案1】：

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

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

查看这个工作 jsbin 示例 http://jsbin.com/jafuk/1/edit，其中偏移量在 onAfterRendering 事件中设置。

既然你问过关于动画in another topic 的问题，我把它作为奖励添加了。我将把它作为一个练习，讨论如何将控件/图像从一个 MatrixLayout(Cell) 分离到另一个 :-)

【讨论】：

【解决方案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

        ]
    });

【讨论】：