1、需求背景：

用戶提供了某個(gè)廠區(qū)的底圖（就一張靜態(tài)圖片），在底圖中，劃分了10個(gè)不規(guī)則區(qū)域，給了10個(gè)區(qū)域的高亮、開(kāi)燈效果圖片（切好了圖），鼠標(biāo)滑過(guò)每個(gè)區(qū)域的時(shí)候，要高亮顯示，開(kāi)燈的時(shí)候，顯示開(kāi)燈效果；看到這個(gè)需求的時(shí)候，挺懵的，有點(diǎn)不知從何下手，但是分析后，有2種可以實(shí)現(xiàn)的方案，具體方案如下：

2、方案說(shuō)明

方案1：傳統(tǒng)的div去定位，絕對(duì)定位，用css實(shí)現(xiàn)hover效果，click的時(shí)候設(shè)置active效果。

這種方案會(huì)存在問(wèn)題。首先，劃分的區(qū)域是不規(guī)則的，如果強(qiáng)行用div去定位，可能會(huì)導(dǎo)致區(qū)域重疊的問(wèn)題；其次鼠標(biāo)劃過(guò)，鼠標(biāo)高亮效果要完全和底圖貼合，這一點(diǎn)其實(shí)不容易實(shí)現(xiàn)。而且瀏覽器全屏后，可能會(huì)導(dǎo)致位置出現(xiàn)偏差的問(wèn)題，基于以上的考慮，我放棄了此方案。

方案2：用Canvas和SVG的方式實(shí)現(xiàn)。不規(guī)則的區(qū)域，手動(dòng)取點(diǎn)，繪制路徑，鼠標(biāo)劃過(guò)或鼠標(biāo)點(diǎn)擊的時(shí)候，判斷鼠標(biāo)坐標(biāo)點(diǎn)是否在Path路徑內(nèi)，如果在某個(gè)區(qū)域內(nèi)，就顯示對(duì)應(yīng)效果。但是要考慮一個(gè)問(wèn)題，因?yàn)镻ath的點(diǎn)，我們是在某個(gè)分辨率基準(zhǔn)下取點(diǎn)的，這就導(dǎo)致在不同屏幕分辨率下，會(huì)導(dǎo)致，無(wú)法取到點(diǎn)的問(wèn)題，所以要重新計(jì)算鼠標(biāo)坐標(biāo)點(diǎn)。這種方案，全屏后，也不會(huì)說(shuō)出現(xiàn)位置偏差，后面采用了此種方案，具體實(shí)現(xiàn)過(guò)程如下：

1、找一個(gè)容器，放背景圖

<template>
  <div ref="container" class="canvas-container">
    <canvas
      ref="canvas"
      width="980px"
      height="675px"
      @mousemove.stop="handleMouseEnter"
      @click.stop="handleCanvasClick"
      @mouseout.stop="renderCanvas"
    ></canvas>
  </div>
</template>

2、?繪制canvas區(qū)域，并且在每個(gè)區(qū)域?qū)懮衔淖謽?biāo)識(shí)，繪制10個(gè)區(qū)域

    drawImage(cb) {
      const that = this
      const img = new Image()
      img.src = backImg
      img.onload = function() {
        // 在Canvas中繪制圖像
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
        for (let i = 0; i < that.svgShapeList.length; i++) {
          const shape = that.svgShapeList[i]
          ctx.fillStyle = '#ffff33' // 設(shè)置填充顏色
          ctx.font = 'bold 14px Arial'
          ctx.textBaseline = 'middle'     
          ctx.fillText(shape.name, shape.textX, shape.textY) // 繪制文本
        }
        if (cb) {
          cb()
        }
      }
    }

 /**
     * @description 鼠標(biāo)移出，移除效果,如果存在開(kāi)燈效果繼續(xù)顯示開(kāi)燈效果
     */
    renderCanvas() {
      this.drawImage(() => {
        for (let i = 0; i < this.svgShapeList.length; i++) {
          // 保存繪圖狀態(tài)
          ctx.save()
          const shape = this.svgShapeList[i]
          if (shape.switchState) {
            this.fetchFile(shape)
          }
          // 恢復(fù)到之前保存的繪圖狀態(tài)
          ctx.restore()
        }
      })
    },
    /**
     * @description 獲取外部文件
     */
    fetchFile(shape) {
      // ctx.fillStyle = 'rgb(255, 255, 0,0.2)'
      // ctx.fill(shape.path)
      var image = new Image()
      image.src = baseImg
      image.onload = async () => {
        var pattern = await ctx.createPattern(image, 'repeat')
        ctx.fillStyle = pattern
        ctx.fill(shape.path)
      }
    },

問(wèn)題點(diǎn)：通過(guò)mousemove實(shí)現(xiàn)圖片渲染的時(shí)候，由于會(huì)不斷的onload圖片，導(dǎo)致頁(yè)面閃爍的問(wèn)題

解決方法：把pattern 緩存起來(lái)，不要一致onload，可以在給ctx賦值后，同時(shí)給pattern賦值，那么fetchFile函數(shù)中，只需要做以下的操作即可：

/**
     * @description 獲取外部文件
     */
    fetchFile(shape) {
        ctx.fillStyle = pattern
        ctx.fill(shape.path)
    },

?完美??！

3、接下來(lái)就是處理鼠標(biāo)滑過(guò)、鼠標(biāo)點(diǎn)擊的問(wèn)題了

判斷坐標(biāo)點(diǎn)位置的核心代碼

const isInArea = ctx.isPointInPath(shape.path, mouseX, mouseY)

4、重新計(jì)算坐標(biāo)點(diǎn)位：

  setRatio() {
      const initialWidth = 1920  
      const initialHeight = 937
      const targetWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
      const targetHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      this.ratioX = initialWidth / targetWidth
      this.ratioY = initialHeight / targetHeight
    },

說(shuō)明1920,937為繪制路徑時(shí)，屏幕可視區(qū)域的基準(zhǔn)值，這個(gè)根據(jù)自己的情況來(lái)定

然后再鼠標(biāo)劃過(guò)，鼠標(biāo)點(diǎn)擊的時(shí)候，要注意用當(dāng)前坐標(biāo)點(diǎn)乘以一個(gè)系數(shù)ratioX，ratioY

基本上就這樣子了

反正就是要注意導(dǎo)入圖片時(shí)，不要用路徑，否則會(huì)出現(xiàn)閃爍的問(wèn)題，因?yàn)橐恢睆姆?wù)器請(qǐng)求資源，建議用base64。

完整代碼就不粘了，有疑問(wèn)或者有更好的方案，歡迎留言！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-590884.html

到了這里，關(guān)于Canvas、SVG實(shí)現(xiàn)鼠標(biāo)滑過(guò)某個(gè)區(qū)域高亮顯示的方案說(shuō)明的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！