制作flash国家地图

Question

您好我想制作一张欧洲的flash地图，当您将鼠标移到或移出每个国家时会发生一些事情，比如改变国家的颜色。

看到这张图片

如果我翻过挪威，然后是瑞典，那么瑞典将不会被设置为蓝色，因为挪威的边界框位于瑞典之上，所以我必须降低一点，以便在不与挪威接触的情况下滚过瑞典。

有没有更好的方法来实现相同的功能？就像使用Bitmap像素一样。

我有一张png格式的所有硬币的精灵表。我嵌入了这个精灵表，然后创建了Sprite AS3类，它使用copyPixels（）从精灵表复制到innet变量BitmapData。

这是我的班级

  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();
    }
   }

bitmapData是在运行时使用copyPixels（）创建的，如此

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

其中newX，NewY，newW和newH取自使用TexturePacker时创建的导出JSON文件

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;
}