Hi,
I have code that draws a triangle with draggable vertices. This works fine but I’d also like to be able to drag and drop the entire triangle. I keep running into two problems: either the draggable points don’t follow the triangle or if they do follow they reposition themselves when a vertex is dragged. Here’s the code for the working part. What do I need to do to make the entire triangle draggable? Thanks!
var nWidth:Number = 500;
var nHeight:Number = 360;
var nDistance:Number = 20;
var pointsH:Number = 24;
var pointsV:Number = 17;
var board:Sprite = new Sprite();
var triangle:Sprite = new Sprite();
var handle1:Sprite = new Sprite();
var handle2:Sprite = new Sprite();
var handle3:Sprite = new Sprite();
var vertex:Sprite = new Sprite();
function init():void
{
stage.addChild(board);
board.addChild(triangle);
board.addChild(handle1);
board.addChild(handle2);
board.addChild(handle3);
board.graphics.lineStyle(1,0);
board.graphics.beginFill(0xFFFFFF);
board.graphics.drawRect(0,0,nWidth,nHeight);
board.graphics.endFill();
board.x = 20;
board.y = 20;
board.graphics.beginFill(0x000000);
for (var i=1; i<=pointsV; i++)
{
for (var j=1; j<=pointsH; j++)
{
board.graphics.drawCircle(j*nDistance,i*nDistance, 2);
}
}
board.graphics.endFill();
handle1.graphics.lineStyle(1,0);
handle1.graphics.beginFill(0x990066);
handle1.graphics.drawCircle(0,0,5);
handle1.graphics.endFill();
handle1.x = 20;
handle1.y = 20;
handle2.graphics.lineStyle(1,0);
handle2.graphics.beginFill(0x990066);
handle2.graphics.drawCircle(0,0,5);
handle2.graphics.endFill();
handle2.x = 20;
handle2.y = 200;
handle3.graphics.lineStyle(1,0);
handle3.graphics.beginFill(0x990066);
handle3.graphics.drawCircle(0,0,5);
handle3.graphics.endFill();
handle3.x = 220;
handle3.y = 200;
handle1.addEventListener(MouseEvent.MOUSE_DOWN, dragPoints);
handle2.addEventListener(MouseEvent.MOUSE_DOWN, dragPoints);
handle3.addEventListener(MouseEvent.MOUSE_DOWN, dragPoints);
drawTriangle();
}
function drawTriangle():void
{
triangle.graphics.clear();
triangle.graphics.lineStyle(2,0x000000);
triangle.graphics.beginFill(0xCCCCCC,0.5);
triangle.graphics.moveTo(handle1.x,handle1.y);
triangle.graphics.lineTo(handle2.x,handle2.y);
triangle.graphics.lineTo(handle3.x,handle3.y);
triangle.graphics.lineTo(handle1.x,handle1.y);
triangle.graphics.endFill();
}
function dragPoints(evt:MouseEvent):void
{
vertex = Sprite(evt.currentTarget);
stage.addEventListener(MouseEvent.MOUSE_MOVE, movePoints);
stage.addEventListener(MouseEvent.MOUSE_UP, stopPoints);
}
function movePoints(evt:MouseEvent):void
{
vertex.x = getX(board.mouseX);
vertex.y = getY(board.mouseY);
drawTriangle();
evt.updateAfterEvent();
}
function stopPoints(evt:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, movePoints);
}
function getX(myX:Number):Number
{
if (myX > nDistance*pointsH)
{
return nDistance*pointsH;
}
if (myX < nDistance)
{
return nDistance;
}
return nDistance*Math.round(myX/nDistance);
}
function getY(myY:Number):Number
{
if (myY > nDistance*pointsV)
{
return nDistance*pointsV;
}
if (myY < nDistance)
{
return nDistance;
}
return nDistance*Math.round(myY/nDistance);
}
init();