Pregunta

Aquí está mi problema:

Tengo un lienzo principal 'pizarra' en un panel, Este lienzo tiene varios elementos secundarios, como una barra de herramientas (azulejos), una etiqueta y algunos aspectos.

El problema es que cuando me muevo a la herramienta Rectángulo y comienzo a dibujar rectángulos, si quiero cambiar la herramienta cuando hago clic en otra herramienta como 'círculo' o 'seleccionar', el botón no atrapa el clic. evento, antes de que el lienzo atrape el mouse y comienza a dibujar.

Al igual que en la imagen. Así que no puedo cambiar la herramienta una vez que empiezo a dibujar.

texto alternativo http://www.freeimagehosting.net/uploads/397a7cd49e.png

¿Cómo podría no hacer que el lienzo reaccione cuando está en una herramienta, o cómo podría hacer que el botón atrape el clic primero y le diga al lienzo que no haga nada?

Por supuesto, podría colocar la barra de herramientas en otro lugar que no esté en el lienzo, pero como el espacio es importante, me gustaría que los botones estuvieran en el lienzo.

Estoy abierto a cualquier sugerencia.

=== Aquí hay algunos códigos para mostrar cómo funciona internamente. ===

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 
          xmlns:degrafa="http://www.degrafa.com/2007"
          xmlns:comp="org.foo.bar.view.components.*"
          layout="absolute"
          title="Tableau">


    <mx:Script>
    <![CDATA[
        import org.edorado.edoboard.ApplicationFacade;
    ]]>
    </mx:Script>

    <mx:Canvas id="blackBoard">

        <degrafa:Surface id="boardSurfaceContainer">
             skinning      
     </degrafa:Surface>

        <!-- Tool bar -->
        <comp:ToolbarView 
           id = "toolbar"
           name = "toolbar"
           verticalScrollPolicy="off" 
           horizontalScrollPolicy="off"
           bottom="5"
           right="5"
           top="5"
           direction="vertical"
           width="30" />   

        <mx:Label x="10" y="10" text="Label"  color="#FFFFFF" id="lbl"/>

    </mx:Canvas>

</mx:Panel>

La barra de herramientas es una lista de botones contenidos en un mosaico. El "pizarrón" del lienzo está vinculado a varios eventos que se manejan, en particular, con el mouse arriba y abajo para dibujar formas.

...
boardCanvas.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
            boardCanvas.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
...
        private function handleMouseDown(event:MouseEvent):void {
            // Get the current mouse location wich may be adjusted to the grid
            var selectPoint:Point = boardCanvas.globalToLocal(new Point(event.stageX, event.stageY));
            startPoint = snapPoint(selectPoint.x, selectPoint.y);
            boardView.lbl.text = '(' + startPoint.x +',' + startPoint.y + ')';
....

La barra de herramientas también escucha clics

<?xml version="1.0" encoding="utf-8"?>
<mx:Tile xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.charts.BubbleChart;
            import org.edorado.edoboard.view.components.shapes.*; 

            public static const TOOL_CHANGE:String  = "toolChange";
            public static const TEXT_TOOL:String  = "textTool";
            public static const SELECT_TOOL:String  = "selectTool";
            public static const RECTANGLE_TOOL:String  = "rectangleTool";

            private var b:Button = null;

            private function handleButtonClick(event:MouseEvent):void {
                trace("CLICKED  TOOL");
                // selectButton.dispatchEvent(new Event(TOOL_CHANGE, true, true)) 
                b = event.target as Button;
                b.dispatchEvent(new Event(TOOL_CHANGE, true, true));
            }


        ]]>
    </mx:Script>

          <!-- Use class facotry ? -->
          <mx:Button id="selectButton"
                     name="{SELECT_TOOL}"
                     selectedUpSkin="assets.skins.ToolButtonSkin"
                     width="30" 
                     height="30" 
                     styleName="selectButton" 
                     toolTip="selection" 
                     click="handleButtonClick(event); " />

          <mx:Button id="textButton"
                     name = "{TEXT_TOOL}"
                     selectedUpSkin="assets.skins.ToolButtonSkin"
                     width="30" 
                     height="30" 
                     styleName="textButton"  
                     toolTip="text"
                     click="handleButtonClick(event);" />

          <mx:Button id="rectButton" 
                     name = "{RECTANGLE_TOOL}"
                     selectedUpSkin="assets.skins.ToolButtonSkin"
                     width="30"
                     height="30"
                     styleName="rectButton"
                     toolTip="rectButton"
                     click="handleButtonClick(event);" />
</mx:Tile>
¿Fue útil?

Solución 2

Gracias, Encontré una publicación similar. En realidad, solo escuché el mouse en mi barra de herramientas y detuve la propagación del evento para que el lienzo no lo atrape.

Otros consejos

Puede usar target propiedad de su MouseEvent para diferenciar el comportamiento cuando El clic es de tu barra de herramientas. Simplemente saque un botín en LiveDocs para comprender cuál es la propiedad de destino.

¡Buena suerte!

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top