Drag a point in flash, and have lines, connected other points move
I have a set of dots displayed on the canvas (key bits of code pulled out):
// 开发者_C百科Drop points based on x y coords
for (var i = 0; i < 50; i++) {
itemPoint[i] = new mcDot();
itemPoint[i].x = 500*Math.random();
itemPoint[i].y = 500*Math.random();
// Set up drag & drop
initDragger(itemPoint[i]);
itemPoint[i].buttonMode = true;
addChild(itemPoint[i]);
}
I then connect the dots - one dot could have 50 connections
// Draw connections
for (i = 0; i < 50; i++) {
for (j = 0; j < 50; j++) {
// Is there a connection in the matrix?
if (connectMatrix[i][j] > 0) {
itemConnect[k] = new Shape();
itemConnect[k].graphics.lineStyle(1, 0x000000);
// Connect the line to the dots
itemConnect[k].graphics.moveTo(itemPoint[i].x, itemPoint[i].y);
itemConnect[k].graphics.lineTo(itemPoint[j].x, itemPoint[j].y);
addChild(itemConnect[k++]);
}
}
}
I have drag and drop working for the dot:
/** Drag and drop functions */
function initDragger(mc:MovieClip):void {
mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
mc.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
function mouseDownHandler(e:MouseEvent):void {
e.currentTarget.startDrag();
}
function mouseUpHandler(e:MouseEvent):void {
e.currentTarget.stopDrag();
}
However, I am really stuck on how to redraw the lines as I move a dot. Also there could be many lines connected to any single dot. Do I need to somehow register which lines are connected to which dot? How do I redrew the lines based on this?
Thanks
I tried duplicating the same functionality. And this is what I got: This is Dot class for drawing dots.
package {
import flash.display.Sprite;
public class Dot extends Sprite {
public static var counter:Number = 0;
public var id:Number;
public function Dot():void {
this.graphics.beginFill(0);
this.graphics.drawCircle(5,5,5);
this.graphics.endFill();
id = counter++;
}
}
}
And this is Test class.package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.Shape;
public class Test extends Sprite {
var num:Number = 5;
var item:Array = new Array(num);
var connection:Array = new Array(num);
public function Test():void{
initItem();
initConnection();
}
private function initItem():void {
for (var i:Number = 0; i<num; i++) {
item[i]= new Dot();
item[i].x = 500*Math.random();
item[i].y = 350*Math.random();
addChild(item[i]);
initDragger(item[i]);
}
}
private function initDragger(dot:Dot):void {
dot.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
dot.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
function mouseDownHandler(e:MouseEvent):void {
e.currentTarget.startDrag();
e.target.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
function mouseUpHandler(e:MouseEvent):void {
e.currentTarget.stopDrag();
e.target.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
redrawLines(e.target.id);
}
function redrawLines(i:Number):void {
for (var j:Number = 0; j< num; j++) {
if(connection[i][j] != null) {
removeChild(connection[i][j]);
connection[i][j] = new Shape();
connection[i][j].graphics.lineStyle(1, 0x000000);
connection[i][j].graphics.moveTo(item[i].x, item[i].y);
connection[i][j].graphics.lineTo(item[j].x, item[j].y);
addChild(connection[i][j]);
connection[j][i] = connection[i][j];
}
}
}
function onMouseMove(e:MouseEvent):void {
redrawLines(e.target.id);
}
private function initConnection():void {
for (var i:Number = 0; i<num; i++) {
connection[i] = new Array(num);
for (var j:Number = 0; j<num; j++) {
if (j != i) {
if (connection[j] != undefined) {
connection[i][j] = connection[j][i];
trace("Duplicate");
}
else if (Math.random() > 0.5){
connection[i][j] = new Shape();
connection[i][j].graphics.lineStyle(1, 0x000000);
connection[i][j].graphics.moveTo(item[i].x, item[i].y);
connection[i][j].graphics.lineTo(item[j].x, item[j].y);
addChild(connection[i][j]);
}
else {
connection[i][j] = null;
}
}
else {
connection[i][j] = null;
}
trace("connecting " + i + " to " + j +" with " + connection[i][j]);
}
}
trace(connection);
}
}
}
精彩评论