精靈圖的制作、精靈圖的使用，在開發(fā)的過程中，需要在精靈圖上選中一個圖標，地圖上使用這個選中的圖標進行POI創(chuàng)建，靈活的根據(jù)客戶端需求進行圖標的使用。以之前的精靈圖效果為例，達到選中的效果（紅框示意）：

使用canvas加載圖片

html5的canvas技術(shù)，能夠?qū)⒁粡垐D片加入進去，并按照圖片的實際尺寸進行顯示，示例代碼如下：

? ? ? let?_image?=?new?Image();

? ? ??//設(shè)置圖片支持跨域

??????_image.setAttribute("crossOrigin",?"Anonymous");

? ???//設(shè)置圖片的路徑

??????_image.src?=?"./image/sprite@2x.png";

??????_image.onload?=?function()?{

?? ? ??//在canvas顯示圖片

????????let?_context?=?_tmpcanvas.getContext("2d");

????????_context.drawImage(_image,?0,?0);?

??????};

加載的圖片作為背景進行顯示，同時加載精靈圖的位置、長寬配比信息的json文件。

覆蓋canvas顯示紅框

這里為了處理方便，直接在加載圖片的canvas上，覆蓋一個canvas，透明進行處理，根據(jù)鼠標在canvas上點擊的位置信息，判斷點擊的是精靈圖哪個圖標的位置，從json文件中取出圖標的位置、長寬信息，在canvas上標繪紅框，達到引言中的紅框效果。
關(guān)鍵代碼：? this.canvasContext.clearRect(0,?0,?this.imageWdith,?this.imageHeight);

??????this.canvasContext.strokeStyle??=?"red";

??????this.canvasContext.beginPath();

??????this.canvasContext.moveTo(styleinfo.x,?styleinfo.y);

??????this.canvasContext.lineTo(styleinfo.x?+?styleinfo.width,?styleinfo.y);

??????this.canvasContext.lineTo(

????????styleinfo.x?+?styleinfo.width,

????????styleinfo.y?+?styleinfo.height

??????);

??????this.canvasContext.lineTo(styleinfo.x,?styleinfo.y?+?styleinfo.height);

??????this.canvasContext.closePath();

??????this.canvasContext.stroke();

https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247485636&idx=1&sn=ab20551ccedf932705102dc1b51e8b55&chksm=fc8ba8f6cbfc21e0659f8a8e4a0ef77e65f17ef3cefd111b52fcd44ab460971194f84efd2459&token=1743499510&lang=zh_CN#rd