Actionscript 3 带有可点击点的Actionscript图像

任何人都可以为以下问题提供解决方案：

我有一个大的图像，把它当作一张地图，我想把这个图像放在比图像小的阅读器中，并且我必须通过点击和拖拽来滚动图像。 我想在这张图片中，放置一个可点击的点，在指定的x和y坐标中，并且能够点击这些点

单击图像中的任何点时，图像将更改为新点。。等等

你能帮忙建议什么是载入图像的最佳对象，并且能够完成所有提到的要点吗。

---

提前感谢。

您可以在查看窗口上捕获MouseDown、MouseUp、MouseMove、MouseOut等事件，这样您就可以准确地控制要执行的操作。 以下是伪代码：

reset()
{
  isDown=false;
  downPointX=0;
  downPointY=0;
  distanceX=0;
  distanceY=0;
}

onMouseDown()
{
  isDown=true;
  downPointX=mouseX;
  downPointY=mouseY;
}

onMouseUp()
{
  if(distanceX+distanceY==0 and isDown)
    click(downPointX,downPointY);
  reset();
}

onMouseMove()
{
  if isDown then
    distanceX=mouseX-downPointX;
    distanceY=mouseY-downPointY;
    drag(distanceX,distanceY);
  endif;
}

onMouseOut()
{
  reset();
} 

drag(distanceX,distanceY)
{
  change your map coordinates
}

click(downPointX,downPointY)
{
  if(inSpot(downPointX,downPointY)==true)
    changeMap();
  endif;
}

changeMap()
{
  change your maps and spots
}

避免为spots sprites实现任何事件，否则可能会得到意外的结果

您可以查看这些以了解更多信息

---

这比你想象的要容易。您有几个目标需要考虑：

“我想把这个图像放在一个比图像小的查看器中”：你不需要任何特殊的东西。这个概念很简单，你有一个遮罩覆盖在你想要大图像可见的地方

var viewer:Sprite = new Sprite;             //200x200
var imageMask:Sprite = new Sprite;          //200x200
var imageContainer:Sprite = new Sprite;     //400x500

imageContainer.mask = imageMask;
viewer.addChild(imageContainer);

//this will allow you to visibly see only 200x200 of the 
//imageContainer at any time

“我必须能够通过单击并拖动图像来滚动图像”：这更符合逻辑，因为imageContainer必须沿鼠标的-（负）方向移动。添加一些侦听器以检查鼠标操作，并根据需要进行拖动

var allowDrag:Boolean = false;

imageContainer.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
imageContainer.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
imageContainer.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);

function onMouseDown(e:Event):void{
    allowDrag = true;
}

function onMouseUp(e:Event):void{
    allowDrag = false;
}

function onMouseMove(e:Event):void{

    //return if not dragging
    if(!allowDrag) return;

    //move the imageContainer in a -(negative) direction of the mouse
    //use an index relative to the size of the viewer and imageContainer
    var speed:Number = 0.5;
    imageContainer.x -= (viewer.width/imageContainer.width)*speed;
    imageContainer.y -= (viewer.height/imageContainer.height)*speed;

    //clean the positions so the image remains within the viewer
    if(imageContainer.x > 0) imageContainer.x = 0;
    if(imageContainer.x < -viewer.width) imageContainer.x = -viewer.width;
    if(imageContainer.y > 0) imageContainer.y = 0;
    if(imageContainer.y < -viewer.height) imageContainer.y = -viewer.height;
}

重要：

---

您可能希望保留一个创建的热点列表，以便进行垃圾清理，并计划为每个图像动态生成热点。。。然后，您必须保留一个活动的热点列表，并在不使用时将其删除。

谢谢，所以最好将主图像加载到sprite中？我将主图像加载到一个精灵（1）中，这个精灵是另一个精灵（2）的子对象，当我更改精灵（2）的宽度时，主图像会调整大小，但我想保持其初始大小，只查看精灵（2）查看的部分。你可以使用一个精灵（容器）和一个用遮罩剪裁的子对象（地图），看看这真的很接近你的需要，在这种情况下，是移动的遮罩，在你的情况下，它将是背景OK谢谢，我担心遮罩会阻止我点击斑点，但似乎遮罩只是一个“打开的窗口”谢谢你的回答我们可以使用startDrag（）和stopDrag（）是的，你可以在任何点使用开始/停止拖动。。。或者只是根据鼠标x/y更新元素的位置。。。或者。但是你应该考虑开始/停止绘制不会允许你增加速度，比如拖拽的速度和时间。

//USAGE

//define the click area coords
var clickCoords:Rectangle = new Rectangle();
clickCoords.x = 10;         //starts at x 10
clickCoords.y = 10;         //starts at y 10
clickCoords.width = 100;    //100 wide
clickCoords.height = 100;   //100 tall

//add the click listener
var clickArea:Sprite = hotSpot(imageContainer,clickCoords);
clickArea.addEventListener(MouseEvent.CLICK, onHotSoptClick);

//hot spot factory
function hotSpot(target:Sprite,coords:Rectangle):Sprite{

    //create the hotspot
    var hs:Sprite = new Sprite;
    hs.graphics.beginFill(0,0);
    hs.graphics.drawRect(0,0,coords.width,coords.height);
    hs.graphics.endFill();

    //add the hotspot to the target
    hs.x = coords.x;
    hs.y = coords.y;
    target.addChild(hs);

}

function onHotSoptClick(e:MouseEvent):void{
    //do something
}