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

使用canvas加載圖片

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

? ? ? 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);?

??????};

加載的圖片作為背景進(jìn)行顯示，同時(shí)加載精靈圖的位置、長(zhǎng)寬配比信息的json文件。

覆蓋canvas顯示紅框

這里為了處理方便，直接在加載圖片的canvas上，覆蓋一個(gè)canvas，透明進(jìn)行處理，根據(jù)鼠標(biāo)在canvas上點(diǎn)擊的位置信息，判斷點(diǎn)擊的是精靈圖哪個(gè)圖標(biāo)的位置，從json文件中取出圖標(biāo)的位置、長(zhǎng)寬信息，在canvas上標(biāo)繪紅框，達(dá)到引言中的紅框效果。
關(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