Соединение линий (при перетаскивании) в Flex / Actionscript

У меня есть элемент mx: Canvas, содержащий несколько элементов mx: Panel. Я хочу иметь возможность провести линию, соединяющую две такие mx: Panel, таким образом, чтобы линия продолжала соединять две mx: Panel при перетаскивании одной или обеих панелей. Кажется, это должно быть тривиально, но я не мог этого понять.

По сути, это проблема.

альтернативный текст http://img150.imageshack.us/img150/5656/ishot1eu3.jpg < / а>

Поскольку обновления происходят только тогда, когда Panel достигает своего конечного положения, как только вы начинаете перетаскивать панель «B», у вас остается свисающая линия:

альтернативный текст http://img212.imageshack.us/img212/4296/ishot2qi6.jpg < / а>

Возможное решение, как предлагается ниже, - переопределить метод updateDisplayList () компонента mx: Canvas. К сожалению, это обновляет рисунок только после перетаскивания, а не во время движения. Прослушивание событий «xChanged» и «yChanged» в Panel дает те же результаты, что и переопределение updateDisplayList ().

Окончательное решение, как указано ниже, требует отправки событий перемещения с движущейся Panel на холст, по которому он движется. Это заставляет линии перерисовываться на протяжении всего движения.

Спасибо за помощь!


air actionscript-3 apache-flex flex3
person bgoncalves    schedule 02.12.2008    source источник

Ответы (5)


arrow_upward
4
arrow_downward

«Я попытался переопределить метод updateDisplayList () компонента mx: Canvas, но он, похоже, обновляет рисунок только после перетаскивания. Я хотел бы, чтобы линия следовала за панелью mx: при перетаскивании. "

Вы можете прослушивать события MoveEvent.MOVE в Панели и обработчик вызывается для перерисовки строк, а затем панели отправляют эти события, пока они перетаскиваются, путем прослушивания событий MouseEvent.MOUSE_MOVE на этапе и отправки события MOVE в обработчике (прикрепите этот обработчик к этапу в обработчик событий Panel MouseEvent.MOUSE_DOWN вместе с обработчиком для MouseEvent.MOUSE_UP (также прикрепленный к сцене) - затем удалите оба этих слушателя событий со сцены в обработчике MOUSE_UP.)

Вот пример (это будет в подклассе Panel :)

private function attachListeners():void
{
    this.addEventListener(MouseEvent.MOUSE_DOWN, selfMouseDownHandler, false,0,true);
    this.addEventListener(MoveEvent.MOVE, selfMoveHandler, false,0,true);
}

private function selfMoveHandler(event:MoveEvent):void
{
    redrawConnectedLinks();
}

private function selfMouseDownHandler(event:MouseEvent):void
{
    stage.addEventListener(MouseEvent.MOUSE_UP, stageMouseUpHandler, false,0,true);
    stage.addEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler, false,0,true);
}

private function stageMouseUpHandler(event:MouseEvent):void
{
    stage.removeEventListener(MouseEvent.MOUSE_UP, stageMouseUpHandler, false);
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler, false);
}

private function stageMouseMoveHandler(event:MouseEvent):void
{
    dispatchEvent(new MoveEvent(MoveEvent.MOVE));
}
person hasseg    schedule 03.12.2008
comment
Хмм ... Кажется, это работает аналогично предыдущему решению. Он обновляется только тогда, когда я бросаю панель, а не во время ее движения. - person bgoncalves; 03.12.2008
comment
(Вы можете проверить это, добавив трассировку к функции coordsChangedHandler ()) - person bgoncalves; 03.12.2008
comment
Хорошо, спасибо за информацию - я изменил предложение на то, что действительно сработало для меня. - person hasseg; 03.12.2008
comment
Все еще не там (см. EDIT3 выше). Может я чего то упускаю? - person bgoncalves; 04.12.2008
comment
Добавлен пример кода, чтобы проиллюстрировать мое запутанное объяснение. Надеюсь, это поможет :) - person hasseg; 04.12.2008

arrow_upward
1
arrow_downward

flexwires - это проект с открытым исходным кодом, реализующий этот тип парадигмы пользовательского интерфейса "соединенных линий" в Flex. . Это может соответствовать вашим потребностям.

person Josh Tynjala    schedule 11.12.2008

arrow_upward
0
arrow_downward

Вы хотите переопределить метод updateDisplayList () UIComponent на холсте и рисовать там.

Предполагается, что вы в целом знакомы с рисованием линий в AS3.

person Ben Throop    schedule 02.12.2008
comment
Я не совсем это имел в виду. Мне удалось перерисовать линию в новом месте, но это происходит только после того, как я перестану перетаскивать mx: Panels. Я бы хотел, чтобы перерисовка производилась также во время движения вещей. - person bgoncalves; 02.12.2008

arrow_upward
0
arrow_downward

Разве вы не можете здесь использовать функцию привязки? конечная точка линии, привязанной к центру круга?

person Community    schedule 14.08.2009

arrow_upward
0
arrow_downward

Новичок в прошивке / сгибании и аналогичная проблема. Я решил это, подключив прослушиватель событий к событию Enter_Frame. Я не уверен, что это наиболее эффективное решение, поскольку оно перерисовывается, даже если объекты не перемещаются, но у меня это сработало:

    import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.Event;

public class Association extends Sprite
{
    private var t1:DisplayObject;
    private var t2:DisplayObject;
    //Connects two objects
    public function Association(t1:DisplayObject, t2:DisplayObject)
    {
        this.t1=t1;
        this.t2=t2;
        this.addEventListener(Event.ENTER_FRAME, redraw)
        super();
    }

    public function redraw(event:Event):void
    {
        graphics.clear();
        graphics.lineStyle(2,0x000000);
        graphics.moveTo(t1.x,t1.y);
        graphics.lineTo(t2.x,t2.y);
    }

}
person Ben    schedule 19.01.2010