Question

SAPUI5网站上有一个旧示例，用于创建具有可点击区域的图像。但是that example讨论了{推荐使用的} sap.ui.commons.Image元素。

如今我们在fiori风格的应用程序中使用移动库中的控件。我尝试使用ImageMap库中的commons控件以及sap.m.Image元素，但无法使其工作。

如何利用useMap控件的sap.m.Image属性？
如果没有足够的原生支持，我可以使用哪个外部库来显示可以点击（如果可能的话突出显示）部分的交互式图像？

这或多或少是我尝试过的 -

XML视图：

<mvc:View controllerName="myApp.view.Image" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" displayBlock="true">
    <Page title="Human Body">
        <Panel class="sapUiResponsiveMargin" width="auto">
            <content>
                <Image id="human" src="images/human_body.png" alt="" useMap="bodyFunctions"></Image>        
            </content>
        </Panel>
    </Page>
</mvc:View>

控制器：

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/commons/ImageMap",
    "sap/ui/commons/Area"
], function(Controller, ImageMap, Area) {
    "use strict";
    return Controller.extend("myApp.view.Image", {
        onInit: function() {
            this._oView = this.getView();
            this._humanImage = this._oView.byId("human");
            var oImageMap = new ImageMap({
                name: "bodyFunctions",
                areas: [new Area("Area1", {
                    shape: "rect",
                    alt: "Brain",
                    coords: "566,4,343,52"
                })],
                press: function(oEvent) {
                    alert("You've clicked on brain");
                }
            });
            this._oView.addContent(oImageMap);
        }
    });
});

感谢。

Answer 1

虽然不能回答您有关突出显示图像区域的问题，但是您可以通过以下方式为useMap提供地图作为sap.m.image参数：

<mvc:View controllerName="xy.controller.Master" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" >
  <App>
    <pages>
      <Page title="{i18n>title}">
        <content>
          <Image src="img/Blume.PNG" densityAware="false" width="" useMap="Map">
            <layoutData>
              <FlexItemData growFactor="1"/>
            </layoutData>
          </Image>

          <html:map name="Map" id="Map">
            <html:area alt="" title="" href="www.google.de" shape="poly" coords="384,505,444,507,444,528,390,527"/>
            <html:area alt="" title="" href="www.google.de" shape="poly" coords="426,582,494,583,494,636,426,632"/>
          </html:map>

        </content>
      </Page>
    </pages>
  </App>
</mvc:View>

请注意顶部html命名空间的声明：xmlns:html="http://www.w3.org/1999/xhtml"

积分：https://answers.sap.com/questions/290270/how-use-sapmimage-with-usemap-and-get-the-clicked.html

如何在sap.m.Image元素上创建可单击区域？

1 个答案: