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