• 图片热地图——点击不同区域有不同反映+SVG热图问题


    <template>
      <div>
        <div class="popup" v-if="showPopup">
          <detail-dialog
            :visible="showPopup"
            :kind="season"
            @exitDialog="exitDialog"
          />
        </div>
    
        <img :src="imgSrc" border="0" usemap="#pmap" alt="baseImg" />
    
        <map name="pmap" id="pmap">
          <area
            v-for="(item, index) in areaData"
            :key="index"
            shape="rect"
            :coords="item.coords"
            @click="handleClick(item.alt)"
            :alt="item.alt"
          />
        </map>
      </div>
    </template>
    <script>
    import DetailDialog from "../components/detailDialog.vue";
    export default {
      components: {
        DetailDialog,
      },
      data() {
        return {
          imgSrc: require("../assets/img/cxxx.png"),
          showPopup: false,
          season: "",
          areaData: [
            {
              coords: "0,0,742,213",
              alt: "rawMaterial",
            },
            {
              coords: "0,231,307,476",
              alt: "fuel",
            },
            {
              coords: "334,332,786,623",
              alt: "clinker",
            },
          ],
        };
      },
      methods: {
        // close dialog
        exitDialog() {
          this.showPopup = false;
        },
        // mouseclick action
        handleClick(season) {
          this.season = season;
          this.showPopup = true;
        },
      },
    };
    </script>
    View Code

    参考网站——HTML图片热区map area的用法 -- 简明现代魔法 (nowamagic.net)

    SVG——SVG 图像入门教程 - 阮一峰的网络日志 (ruanyifeng.com)

    前端实现一个简单的svg定制地图_pipixx的博客-CSDN博客_前端自定义地图

    0.需求

    点击同一张图片不同区域有不同反馈

    1.思路

    用HTML的<map>与<area>标签来解决,因为有比较多的重复的就做了个数组扔进去。

     <img :src="imgSrc" border="0" usemap="#pmap" alt="baseImg" />
     
        <map name="pmap" id="pmap">
          <area
            v-for="(item, index) in areaData"
            :key="index"
            shape="rect"
            :coords="item.coords"
            @click="handleClick(item.alt)"
            :alt="item.alt"
          />
        </map>

    // data

    这个coords是x1,y1,x2,y2,左上角和右下角坐标值,用PS取值

     areaData: [
            {
              coords: "0,0,742,213",
              alt: "rawMaterial",
            },
    ]
    

    2.升级之SVG热图问题

    划区域用的AI

    <svg
          version="1.1"
          id="&#x56FE;&#x5C42;_1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          x="0px"
          y="0px"
          width="1373px"
          height="832px"
          viewBox="0 0 1373 832"
          style="enable-background: new 0 0 1373 832"
          xml:space="preserve"
        >
          <image
            style="overflow: visible"
            width="1373"
            height="832"
            xlink:href="../assets/carbonBg.png"
          ></image>
          <g @click="onSvg('group')">
            <rect
              class="tongAn"
              x="934"
              y="59"
              style="fill: #ffffff"
              width="40"
              height="42"
            />
            <rect
              class="tongAn"
              x="934"
              y="401"
              style="fill: #ffffff"
              width="40"
              height="41"
            />
            <rect
              class="tongAn"
              x="792"
              y="668"
              style="fill: #ffffff"
              width="49"
              height="40"
            />
            <rect
              class="tongAn"
              x="798"
              y="739"
              style="fill: #ffffff"
              width="43"
              height="39"
            />
          </g>
    
          <rect
            class="tongAn"
            y="7"
            @click="onSvg('origin')"
            style="fill: #ffffff"
            width="401"
            height="208"
          />
          <rect
            class="tongAn"
            x="296"
            y="300"
            @click="onSvg('rect')"
            style="fill: #ffffff"
            width="455"
            height="314"
          />
        </svg>
    View Code

    注意,实现边框线在CSS样式中

     #clipped {
        margin-bottom: 20px;
      }
      .tongAn {
        fill: #fefefe;
        fill-opacity: 0.01;
        &:hover {
          cursor: pointer;
          stroke: #d70000;
          stroke- 4px;
        }
      }

    如此便可实现,鼠标悬浮对应区域变化,还可以自己加动作。

      

    人生到处知何似,应似飞鸿踏雪泥。
  • 相关阅读:
    超级楼梯
    hdu1040
    hdu2033(惭愧)
    hdu2032杨辉三角
    hdu1013Digital Roots
    hdu2031
    Linux信号(signal) 机制分析
    android init重启service(进程)
    [android] init进程 .rc文件中service、action的parsing
    oom_adj
  • 原文地址:https://www.cnblogs.com/lepanyou/p/15421529.html
Copyright © 2020-2023  润新知