前言

上回講到將人民日報的首版圖片顯示出來，本次將實現點擊新聞對應區域，閱讀該新聞

熱區

熱區就是在網頁上進行了鏈接的一個區域

在人民日報電子版的版面圖片上，點擊想要看的新聞，右側就會出現該新聞的詳細報道，我們點擊的地方就是“熱區”，在網頁中可通過<map></map>標簽實現此項功能,但是小程序中未提供類似功能的組件，要腫么辦？

俗話說：只要思想不滑坡，辦法總比困難多

雖然沒有類似組件，可是我們只要知道區域的范圍就好啦，點擊版面圖片的某塊區域時，判斷觸點是否在該區域內就行了。那么如何判斷？

代碼實現

如上所述，版面圖片的熱區信息包含在map標簽內，正則匹配走起~
修改paper.js的onLoad方法為：

onLoad: function (options) {var self = this;//獲取系統寬高，并計算寬高比..........wx.request({url: url,success: function (res) {var html = res.data;//正則式-匹配版面圖片var pagePicImgReg = /<img[^>]+src=(.*)\s+border=0\s+usemap=#pagepicmap[^>]*>/i;//正則式-匹配熱區信息var pagePicMapReg = /<map[^>]+name=pagepicmap[^>]*>.*<\/map>/i;//版面圖片匹配結果var pagePicImgMatch = html.match(pagePicImgReg);//熱區信息匹配結果var pagePicMapMatch = html.match(pagePicMapReg);//中間變量，存放map標簽內容var mapHtml = "";//中間變量，存放img的src內容var imgSrc = "";pagePicMapMatch && (mapHtml = pagePicMapMatch[0]);pagePicImgMatch && (imgSrc = pagePicImgMatch[1].replace('../../..', imgUrl));//正則式-匹配map標簽里area信息，coords是區域定點信息，href是該區域所鏈接到的文章var areaReg = /<area\s+coords="(.*?)"[^>]+href="(.*?)"[^>]*>/ig;var area;//存放該版面圖片的area內容var areaArray = []while ((area = areaReg.exec(mapHtml)) != null) {areaArray.push({ "coords": area[1].split(",").map(self.computeCoords), "href": area[2] });//href為當前版面每條文章的鏈接}//console.log("areaArray ", areaArray);self.setData({paperInfo: [{ "imgSrc": imgSrc, "areaArray": areaArray}]});}})},

paper.js添加computeCoords方法： 由于響應的coords坐標信息對應的版面圖片默認為400*571px的，所以不同設備的coords要作等比例縮放

//計算適合該設備的coords大小computeCoords: function (coord, index) {var self = this;var tmpCoord = parseInt(coord);if (index % 2 == 1) {//代表x坐標tmpCoord = Math.ceil(tmpCoord * (400 / self.data.windowWidth));}if (index % 2 == 0) {//代表y坐標tmpCoord = Math.ceil(tmpCoord * (571 / self.data.windowHeight));}return tmpCoord;},

知道了版面圖片的熱區情況，如何判斷用戶點擊的是哪篇文章呢？
ray-crossing算法
1.簡單來說，該算法可以判斷一點是否在給定的某個不規則封閉區域內。（幸運的是版面圖片上畫的熱區是簡單的封閉圖形，且大多是矩形）
該算法的大致思路是：過被判斷的點（觸點）作一條向右的射線，若射線與區域的邊的交點為奇數，則認為該點在此區域內，若為偶數，則未在該區域內
對于邊界點（區域頂點和邊上的點），對于本應用來說，用戶點到邊界的概率很小，是可以忽略的
2.實現：在paper.js中添加以下方法

//point為用戶觸點的坐標，coords為某個熱區頂點情況pointInRegin: function (point, coords) {//coords中每兩個是一對坐標var count = 0;//統計目標點向右畫射線與多邊形相交次數var x = point[0];//用戶觸點x位置var y = point[1];//用戶觸點y位置var i = 0, j = 0;//j代表i的下一個坐標點//coords中確定一條直線的兩點的坐標var xi = 0;var yi = 0;var xj = 0;var yj = 0;for (i = 0, j = coords.length - 2; i < coords.length - 1; j = i, i = +2) {xi = coords[i];yi = coords[i + 1];xj = coords[j];yj = coords[j + 1];if (yi == yj) { continue; }//如果兩點水平，則跳過if (y < Math.min(yi, yj)||y > Math.max(yi, yj)) { continue; }//如果觸點低于該線段或高于該線段，則跳過if (x >= Math.max(xi, xj)) { continue; }//如果觸點在該線段的右邊，則跳過//該觸點與coords所確定的區域有交叉，求該交叉點的x坐標的值var intersection_x = (xj - xi) * (y - yi) / (yj - yi) + xi;if (x < intersection_x) { count++; }//如果交叉點在觸點的右邊，相交次數加1}if (count % 2 == 0) { return false; }//在多邊形外面或邊上if (count % 2 == 1) { return true; }//在多邊形里面},

paper.js添加確定觸點點擊的新聞鏈接方法：

/*** 確定觸點的文章* 返回文章的href* pagenum代表版面號（從1開始編號）*/getArticleHref: function (fingerx, fingery, pagenum) {var self = this;var currentPageAreas = self.data.paperInfo[pagenum - 1].areaArray;var aresLength = currentPageAreas.length;var i;var points = [];for (i = 0; i < aresLength; i++) {points = currentPageAreas[i].coords;if (self.pointInRegin([fingerx, fingery], points)) {console.log("找到href",currentPageAreas[i].href);return currentPageAreas[i].href;}else{console.log("未在當前coords內");}}},/*** 點擊跳轉到相關文章*記得在paper.wxml文件的img組件上綁定toArticle事件*/toArticle: function (e) {var self = this;var fingerx = e.detail.x;//x,y代表距離其父文檔左上角的距離var fingery = e.detail.y; //獲取觸點所在的文章href，目前只有第一版所以pagenum為1var href = self.getArticleHref(fingerx, fingery, pagenum);if (href) {console.log("獲取的文章鏈接為 ",href);}else{console.log("未找到文章鏈接");}},

編譯運行

按照上篇文章的方法，編譯運行程序，點擊版面圖片上的任意一條新聞，查看控制臺是否輸出該文章的href

總結

以上是生活随笔為你收集整理的微信小程序实践_3点击版面图片获取新闻链接的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。