1

您好，我想制作一张欧洲的 Flash 地图，当您将鼠标悬停在每个国家/地区之外时，会发生一些事情，例如更改该国家/地区的颜色。

看到这张图片 欧洲地图

如果我先翻过挪威，然后翻过瑞典，瑞典不会被设置为蓝色，因为挪威的边界框在瑞典的顶部，所以我必须往低一点的地方翻过与挪威不相交的瑞典。

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

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

这是我的课

  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 文件

4

2 回答 2

1

我有一个类似的问题，但有一个交互式对象。解决方案是让一个图像充当点击的地图。这是 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;
}
于 2013-06-25T03:30:52.470 回答
1

无需将您的国家/地区图像转换为矢量，您将需要检查鼠标下方像素的 alpha 值以获得准确的交互。幸运的是，有人已经编写并开源了一个可以完成这项工作的实用程序：InteractivePNG。

您只需要将位图放入InteractivePNG实例而不是Sprite.

于 2013-06-23T13:57:40.113 回答