製作閃光國家地圖

Question

你好我想製作一個歐洲閃光地圖，當你將鼠標懸停在每個國家或者出於某個國家之外時，就會發生一些事情，比如改變國家的顏色。

看到該圖片

如果我翻身挪威，然後瑞典，瑞典將不會被設置爲藍色，因爲挪威的邊框是瑞典的頂部，所以我必須去低一點翻身瑞典與挪威沒有互動。

有沒有更好的方法來實現相同的功能？就像使用位圖像素一樣。

我有一個sprite表中所有的png格式的錢幣。我嵌入這個精靈表，並創建Sprite AS3類，它使用copyPixels（）從精靈表複製到innet變量BitmapData。

下面是使用copyPixels我的課

public class Country extends Sprite 
    { 
    private var newBitmap:Bitmap; 
    private var tintColor:Color = new Color(); 

    public function Country(bitmapData:BitmapData) 
    { 
     newBitmap = new Bitmap(bitmapData); 

     tintColor.setTint (0x0000ff, 0.6); 

     this.useHandCursor = true; 
     this.buttonMode = true; 

     addEventListener(Event.ADDED_TO_STAGE, init); 
    } 
    private function init(e:Event):void 
    { 
     addChild(newBitmap); 
     addEventListener(MouseEvent.MOUSE_OVER, onMouseOver); 
     addEventListener(MouseEvent.MOUSE_OUT, onMouseOut); 
    } 

    private function onMouseOver(e:MouseEvent = null):void 
    { 
     newBitmap.transform.colorTransform = tintColor; 
    } 

    private function onMouseOut(e:MouseEvent = null):void 
    { 
     newBitmap.transform.colorTransform = new ColorTransform(); 
    } 
    } 

位圖數據被創建在運行時（）這樣的

var countiresArray:Array = Resources.allCointriesJSON["frames"]; 
var newX:Number = countiresArray[i]["frame"]["x"]; 
var newY:Number = countiresArray[i]["frame"]["y"]; 
var newW:Number = countiresArray[i]["frame"]["w"]; 
var newH:Number = countiresArray[i]["frame"]["h"]; 
bitmapData .copyPixels(Resources.allCountries.bitmapData, new Rectangle(newX, newY, newW, newH), new Point(0, 0)); 

其中下一頁末，NewY，東西方婦女網絡和newH是從創建導出JSON文件中取出當使用TexturePacker

Answer 1

在不將您的國家圖像轉換爲矢量的情況下，您需要檢查鼠標下像素的alpha值以獲得準確的交互離子。幸運的是，有人已經編寫並公開了一個應該完成這項工作的實用程序：InteractivePNG。

你只需要把你的位圖放在InteractivePNG實例中，而不是Sprite。

Answer 2

我有一個類似的問題，但與交互式對象。解決方案是將圖片作爲點擊地圖。這是OpenGL中用於檢測3D對象和場景點擊的技術。

例如你的情況，你會有一個圖像與所有國家。該圖像不會被加載到顯示列表中。每個國家都會有完全不同的顏色。例如瑞典是0xff0000，挪威0x00ff00等讓我們把這種形象colored-map.jpg

然後點擊Europe-map.jpg，用戶可以看到的，你點擊鼠標的座標，然後去看看在colored-map.jpg一前一後瞭解點擊像素的顏色。然後你就會知道用戶點擊了哪個國家，並且可以覆蓋Norway.png。

這種技術在顯示列表中有很多PNG的性能方面會更好。在任何時候，只有Europe-map.jpg，可能是所選國家的1個PNG，然後colored-map.jpg加載到Bitmap對象中。如果您的目標是移動性能優化是必須的。

選中此功能。這只是一個讓你走的例子......這不是一個完整的實現。

var countriesArray = [{color:0xff0000, image:"Norway.png"},{color:0x00ff00, image:"Sweden.png"}]; 

public function checkPoint(mouseX,mouseY):String { 
    var testPixel:uint = coloredMap.bitmapData.getPixel(mouseX,mouseY); 

    for (var country in countriesArray) { 
     if(country.color == testPixel) { 
      return country.image; 
     } 
    } 

    return null; 
}