ränder von überlappenden rechtecken zeichnen

[StayFrosty]

hallo zusammen

ich erstelle per drawRect Methode sagen wir mal 5 Rechtecke, die sich überschneiden. gibt es eine möglichkeit jetzt von diesen 5 "verschmolzenen" rechtecken nur den rand anzeigen zu lassen?

irgendwie mit union und intersect...hatte aber nicht wirklich erfolg.

besten dank und grüsse

[hgseib]

eine einfache lösung:
H.G.Seib -> Glibber
Eine glibbrige Fläche

rein mathematisch ist das zusammenfügen von polygonen eine anspruchsvolle sache.
d.h. eigentlich ganz einfach:
man geht alle kanten rechtsherum durch und bei jedem schnittpunkt nach rechts abbiegen.
das ergebnis kann allerdings aus mehreren polygonen bestehen. z.b. wenn die objekte ein loch bilden ...
such dazu mal im internet nach:
mathe polygon schnittmenge

[StayFrosty]

danke hgseib für den tipp. ich suche mal dannach. ich dachte eben irgendwie es gäbe da schon einige befehle in as3 - aber da irre ich mich wahrscheinlich.

gruss

[hgseib]

das mit der beispiel-fla (Glibber) hast du verstanden?

bei dir wäre das dann:
- 5 mc's die den rand darstellen
- darüber die 'normalen' 5 mc's

damit ist das nicht wirklich 'verschmolzen' aber es sieht so aus.

[StayFrosty]

nein sorry verstehe ich nicht. bin nicht so fit in as2. du hast nicht eventuell ein vereinfachtes beispiel mit 2 quadraten oder so in as3? bisschen viel verlangt ich weiss...
habe vorhin etwas von drawPath gelesen....wäre das in as3 evtl. eine einfachere lösung?

[hgseib]

zwei anstatt einem mc zu verschieben, das hat doch mit AS2 nichts zu tun.
hast du dir das beispiel das swf mal angesehen?

[speedhost]

meinst du DisplayObject.blendMode ?

import flash.display.BlendMode; 

mfg

[hgseib]

siehe anhang

[StayFrosty]

hallo hgseib

danke dir für die einfache lösung
eigentlich sollte ich damit zufrieden sein. nur ich möchte nur den rand - also durchsichtig. wenn ich dein prinzip in diesem beispiel richtig verstanden habe, dann kann es so glaube ich nicht funktionieren, oder?

EDIT: vielleicht klappt deine lösung im zusammenhang mit den layer-modes, alpha oder erase..? hmm..mal ausprobieren.

danke dir.

grüsse

[milchreis]

Hier mal fix:

PHP-Code:

package 
{
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.BlendMode;
    import flash.display.Sprite;
    import flash.events.Event;
    
    /**
     * wie unmoralisch: Rechtecke nur auf ihre Umrandung zu reduzieren
     * @author milchreis
     */
    public class Main extends Sprite 
    {
        
        
        public function Main():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
        
        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            // entry point
            
            var rechtEckig:Array = new Array();
            var bmd:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);
            addChild(new Bitmap(bmd));
    
            
            //5 Rechtecke erzeugen und zeichnen
            for (var i:int = 0; i < 5; i++)
            {
                var r:Rect = new Rect(Math.random() * 100 + 100, Math.random() * 100 + 100);
                
                r.x = Math.random() * 100 + stage.stageWidth/2;
                r.y = Math.random() * 100 + stage.stageHeight / 2;
                
                bmd.draw(r, r.transform.matrix);
                
                rechtEckig.push(r);
            }
            
            //verkleinerte versionen wieder rausradieren
            for (i = 0; i < 5; i++)
            {
                r = rechtEckig[i];
                
                r.scaleX = r.scaleY = .9; //nicht schön, aber selten
                
                bmd.draw(r, r.transform.matrix, null, BlendMode.ERASE);
            }
            
        }
        
    }
    
} 


//mit

PHP-Code:

package  
{
    import flash.display.Shape;
    
    /**
     * 'n Reschtäck
     * @author milchreis
     */
    public class Rect extends Shape
    {
        public function Rect(a:Number, b:Number) 
        {
            super();
            
            graphics.beginFill(0);
            graphics.drawRect( -a / 2, -b / 2, a, b);
            graphics.endFill();
            
        }
        
    }

} 


Dadurch das die Rechtecke skaliert werden, ist die resultierende Dicke der Linie nicht konstant.
Man müsste die Rechtecke in Höhe und Breite unterschiedlich ändern, dazu bin ich aber gerade zu faul.

[thomas_E]

Zitat von milchreis

Man müsste die Rechtecke in Höhe und Breite unterschiedlich ändern, dazu bin ich aber gerade zu faul.

PHP-Code:

var lineWidth:Number = 1;
//...

for (i = rechtEckig.length; i--; ){
    r = rechtEckig[i];
    r.width -= lineWidth * 2;
    r.height -= lineWidth * 2;
    bmd.draw(r, r.transform.matrix, null, BlendMode.ERASE);

    //und wieder zurücksetzen
    r.width += lineWidth * 2;
    r.height += lineWidth * 2;
} 


alternative über fillRect:

PHP-Code:

var rechtEckig:Array = new Array();
var bmd:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);
addChild(new Bitmap(bmd));
    
var lineWidth:Number = 1;
var color:uint = 0xFF00FF;

for (var i:int = 0; i < 5; i++)
{
    var r:Rectangle = new Rectangle(0,0,Math.random() * 100 + 100, Math.random() * 100 + 100);
        r.x = Math.random() * 100 + bmd.width / 2 - r.width/2;
        r.y = Math.random() * 100 + bmd.height / 2 - r.height/2;
    bmd.fillRect(r, 0xFF000000 | color);
    rechtEckig.push(r);
}

for (i = rechtEckig.length; i--; )
{
    r = rechtEckig[i].clone();
    r.inflate(-lineWidth, -lineWidth);
    bmd.fillRect(r, 0x00000000);
} 


- schneller als BitmapData.draw
- arbeitet pixelgenau also keine Kantenglättung, keine halben Pixel, und funktioniert somit nur mit ganzen Liniendicken korrekt.

[André Michelle]

Soll nur Addition stattfinden oder auch Subtraktion?

Also wenn ein Rechteck vollständig einen anderem liegt, wird es dann als Loch erwartet?

[hgseib]

es führen immer viele wege zum ziel

var rahmer:Sprite = new Sprite();
rahmer.addEventListener(MouseEvent.MOUSE_DOWN,eventDown);
rahmer.addEventListener(MouseEvent.MOUSE_UP,eventUp);
addChild(rahmer);
//
var lineColor:Number = 0;
var lineSize:int=2;
var glowFilter:GlowFilter=new GlowFilter(lineColor,1,lineSize,lineSize,8,2,false,false);
rahmer.filters=[glowFilter];
//
for (var i:int=0; i<8; i++) {
	var mc:Sprite = new Sprite();
	mc.graphics.beginFill(0x99ff99);
	mc.graphics.drawEllipse(0,0,120,80);
	mc.x=Math.random()*400+60;
	mc.y=Math.random()*300+40;
	rahmer.addChild(mc);
}
//
function eventDown(evt:MouseEvent) : void {
	evt.target.startDrag();
}
function eventUp(evt:MouseEvent) : void {
	evt.target.stopDrag();
}

[StayFrosty]

besten dank allen für die feedbacks....

...tur mir leid. irgendwie bring ich das teil nicht zum laufen. comiler meldet fehler von wegen ibitmap interfaces etc...

[milchreis]

Zitat von StayFrosty

...tur mir leid. irgendwie bring ich das teil nicht zum laufen. comiler meldet fehler von wegen ibitmap interfaces etc...

Meine Kristallkugel sagt: "poste den Code der den Fehler verursacht".