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

Question

任何人都可以帮助提出以下解决方案：

我有一个大图像，将其视为地图，我想将此图像放在比图像小的查看器中，并且我必须能够通过单击并拖动它来滚动图像。我想在这张图片中放置一个指定的 x 和 y 坐标中的可点击点，并且能够点击这些点。

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

你能帮忙建议什么是加载图像的最佳对象并能够完成所有提到的点吗？提前致谢。

score 1 · Accepted Answer

您可以在查看窗口上捕获事件 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
}

避免为你的点精灵实现任何事件，否则你会得到意想不到的结果。

您可以查看这些以获取更多信息 http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Sprite.html#eventSummary

score 1 · Accepted Answer

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

“我想将此图像放在比图像小的查看器中”：您不需要任何特别的东西来做到这一点。这个概念很简单，你有一个蒙版覆盖，你希望大图像可见。

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

“我想在这张图片中放一个可点击的点在指定的 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
}

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

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

2 回答 2

Related

Reference