A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: Strange mask issue when splicing space out of a drawRect.

  1. #1
    Viral tick lordofduct's Avatar
    Join Date
    May 2008
    Location
    South Florida
    Posts
    159

    Strange mask issue when splicing space out of a drawRect.

    I have a problem when drawing a mask for an object. Now in the scenario that this needs to be done I can't just plot the 5 points to draw the shape, so instead I draw a rectangle and splice out the area not needed by drawing a triangle over it in the same fill.

    by performing drawRect first, and then the following lines with a fill, the triangle basically clips the rect leaving a rect with a chunk taken out. If I do this with the sliver on the right side, the mask functions properly, but if I draw this with the chunk on the left, the mask acts like a full rectangle.

    basically... this code produces what is in the left of the lower image (black is mask shape, red is the result):
    code:

    var spr1:Sprite = new Sprite();
    var gr:Graphics = spr1.graphics;

    gr.beginFill(0x000000);


    gr.drawRect(0,0, 300,300);
    gr.moveTo(300,100);
    gr.lineTo(100,300);
    gr.lineTo(300,300);
    gr.lineTo(300,100);
    gr.endFill();

    var spr2:Sprite = new Sprite();
    gr = spr2.graphics;
    gr.beginFill(0xFF0000);
    gr.drawRect(0,0,300,300);
    gr.endFill();

    addChild(spr2);
    addChild(spr1);

    spr2.mask = spr1;



    but this creates what is on the right (black is the mask shape created, red is the result):
    code:

    var spr1:Sprite = new Sprite();
    var gr:Graphics = spr1.graphics;

    gr.beginFill(0x000000);

    gr.drawRect(0,0, 300,300);
    gr.moveTo(0,100);
    gr.lineTo(100,300);
    gr.lineTo(0,300);
    gr.lineTo(0,100);
    gr.endFill();

    var spr2:Sprite = new Sprite();
    gr = spr2.graphics;
    gr.beginFill(0xFF0000);
    gr.drawRect(0,0,300,300);
    gr.endFill();

    addChild(spr2);
    addChild(spr1);

    spr2.mask = spr1;



    image:



    Would anyone know why this is happening?

  2. #2
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441
    I'm unclear on the whole masking scheme your going for here but you seem to be drawing over the top of a solid and expecting that to cancel it out? That kind of works if you're using one continuous line as defined by the even-odd-rule. I was able to match your image with the following - the geometry isnt too tough at this level.

    PHP Code:
    var spr1:Sprite = new Sprite();
    var 
    spr2:Sprite = new Sprite();

    with(spr1.graphics){
        
    beginFill(0x000000);
        
    moveTo(0100);
        
    lineTo(100300);
        
    lineTo(300300);
        
    lineTo(3000);
        
    lineTo(00);
        
    lineTo(0100);
        
    endFill();
    }

    with(spr2.graphics){
        
    beginFill(0xFF0000);
        
    drawRect(00300300);
        
    endFill();
    }


    addChild(spr2);
    addChild(spr1);

    spr2.mask spr1

  3. #3
    Viral tick lordofduct's Avatar
    Join Date
    May 2008
    Location
    South Florida
    Posts
    159
    yeah I'm using the knock out method. Of course I could just draw the polygon point by point, but there is a reason I need to use the knock out method.

    See in this api I'm making I have taken a certain point with in the proximity of a large rectangle (inside or out). I then use some vector algebra and trig to find a vector pointing at one of the four corners (depending on certain conditions at the moment) and then find a vector perpendicular to that one.

    Then with the first vector I find a point halfway between the random point and the corner, then I find two points on the rect made by a line passing through this new point traveling in the direction of the second vector.

    Then I have to draw three masks, one mask is the rectangle on the right hand side of the line, the second mask is the left hand side of the line, and the third mask is the smaller of the two reflected over the line.

    Like so:


    Drawing it point by point is not the easiest way to do this, because I have 6 points to consider. Finding out which order to draw them in is very difficult for the program, so I'd like to reduce the overhead by "knocking out" the unneeded area of a rectangle. But alas it doesn't work.

    Now I wouldn't be to concerned if the knock out method didn't work at all. BUT if I do the knockout method in the lower right corner, or the upper left corner, it works fine. But not in the lower left or upper right corners. This I find weird... and I'm wondering if it has something to do with direction or something. Similar to 3D drawing API's clipping algorithms using clockwise and counterclockwise to define the direction of a polygons face.
    Last edited by lordofduct; 06-19-2008 at 08:07 PM.

  4. #4
    Viral tick lordofduct's Avatar
    Join Date
    May 2008
    Location
    South Florida
    Posts
    159
    Yep it is direction. You have to draw it in the opposite direction that the original shape your clipping was drawn. Seeing as "drawRect" draws in the clockwise direction, I have to draw against it.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center