SAPUI5 中的图像映射

Question

我正在尝试在 SAPUI5 中获取 ImageMap 功能。

我已经完成了 html 和 core:html 标签 - 它工作正常，我可以按我感兴趣的区域，但它没有解决我的问题，因为我不能在特定区域创建自定义新闻事件。

我需要根据有人点击图片的哪一部分执行不同的操作。

我想知道 UI5 中是否有 ImageMap 和 Area 等效项（它在 sap.ui.commons 中，但该库已贬值）。

Answer 1

您可以通过将 Click 事件侦听器和 自定义数据 附加到 area 标签来实现

XML 视图使用自定义 class (areaMap) 和自定义数据 (data-areaSelected) 到 area 标签

XML 查看

<l:VerticalLayout class="sapUiContentPadding" width="100%">
  <l:content>
    <core:HTML content='&lt;img usemap="#aus-nz" src="assets/images/map.gif" width="200" height="142" alt="Map of Australia & New Zealand"&gt; &lt;map name="aus-nz"&gt;
      &lt;area class="areaMap" shape="poly" coords="3,47,45,12,105,7,140,60,120,125,12,90" data-areaSelected="Aus" alt="Australia"&gt;
      &lt;area class="areaMap" shape="poly" coords="180,85,200,98,167,142,157,138" data-areaSelected="NewZld" alt="New Zealand"&gt;
    &lt;/map&gt;' />
  </l:content>
</l:VerticalLayout>

初始化区域标签的 click 事件侦听器，一旦区域被点击，相应的区域自定义数据将用于执行操作

Controller.js

onAfterRendering: function() {
  this.initializeEventListener(this); 
},
initializeEventListener: function(that) {
  const aAreas = document.querySelectorAll('area.areaMap');
  aAreas.forEach(elem => elem.addEventListener('click', function(oEvent) { //Attach click event listener to areas
    that.takeAction(that, oEvent.target.dataset.areaselected);
  }));
},
takeAction: function(that, selectedArea) {
    //Your code 
},

SAPUI5 中的图像映射

ImageMap in SAPUI5

html

javascript

sapui5