Question

I want to know how to prevent the user from drawing outside my school board.

My board image sizes 709.15 X 499.5.
So I thought of something like this…

if(stage.stageWidth <= 709)

But if my board image is being called as a variable on stage boardActiva it should be easier.

Here’s the function that draws:

        private function dibujar(e:MouseEvent){         
        trace(e.localY);            
        tizaActiva.x = e.stageX;
        tizaActiva.y = e.stageY;
        if(dibujando){
        tabla.graphics.lineTo(e.stageX,e.stageY);
        }

And this is the full code:

package  {  
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.*;
import flash.trace.Trace;
import flash.ui.Mouse;
import flash.display.Shape;
import fl.controls.ColorPicker;
import fl.motion.Color;
import fl.events.ColorPickerEvent;
public class pizarra extends MovieClip {        
private var colores:ColorPicker = new ColorPicker;      
private var boardActiva:board = new board;
private var tizaActiva:tiza = new tiza();
private var tabla:Shape = new Shape;
private var dibujando:Boolean;
    public function pizarra() {
        Mouse.hide();
        tabla.graphics.lineStyle(5,0xFFFFFF);
            // constructor code         
        boardActiva.x = 45;
        boardActiva.y = 40;
        addChild(boardActiva);
        addChild(tabla);
        addChild(colores);
        addChild(tizaActiva);
        dibujando = false;          
        stage.addEventListener(MouseEvent.MOUSE_DOWN, empezarDibujo);
        stage.addEventListener(MouseEvent.MOUSE_MOVE, dibujar);
        stage.addEventListener(MouseEvent.MOUSE_UP, detenerDibujo);
        colores.addEventListener(ColorPickerEvent.CHANGE,cambiar);
    }

    private function empezarDibujo(e:MouseEvent):void{          
        trace(e.localY);
        tabla.graphics.moveTo(e.stageX,e.stageY);
        dibujando = true;           
    }       
    private function dibujar(e:MouseEvent){         
        trace(e.localY);

        tizaActiva.x = e.stageX;
        tizaActiva.y = e.stageY;
        if(dibujando){
        tabla.graphics.lineTo(e.stageX,e.stageY);
        }
    }       
    private function detenerDibujo(e:MouseEvent){           
        trace(e.localY);
        dibujando = false;

    }           
    private function cambiar(e:ColorPickerEvent){
            tabla.graphics.lineStyle(5,e.color);

        }       

}

}

Answer 1

If I understood correctly your question, this should do it:

private function dibujar(e:MouseEvent)
{

    //trace(e.localY);

    tizaActiva.x = e.stageX;
    tizaActiva.y = e.stageY;

    if(dibujando && insideBoard(e.stageX,e.stageY) )
    {
        tabla.graphics.lineTo(e.stageX,e.stageY);

    }

}

  private function insideBoard(x:Number,y:Number):Boolean
  {
    return ( (x>= boardActiva.x) 
           && (x <= boardActiva.x + boardActiva.width )
           && (y >= boardActiva.y) 
           && (y <= boardActiva.y + boardActiva.height ) );
  }

Hope to be of some help, good luck with your pizarra 😉