Rotationslinien im Zeichenprogramm AS3

[synths]

Guten Tag,

ich versuche momentan verzweifelt ein ansprechendes ''kleines'' Zeichenprogramm über Actionsscript3.0 zu schreiben und habe Probleme Rotation in gezeichnete Linien rein zu bekommen.
Und was ich schlecht finde, dass beim Zeichnen über den Rändern, der Pinsel aufhört und wenn man mit weiterhin gedrückter Maustaste wieder auf die Zeichenfläche geht nicht mehr weiter Zeichnet. =(

DIE DATEI IST UNTEN ZU FINDEN

Hier erstmal mein Text!

PHP-Code:

var spBoard:Sprite=new Sprite();

this.addChild(spBoard);

spBoard.x=200;

spBoard.y=30;



var shDrawing:Shape=new Shape();

spBoard.addChild(shDrawing);



var doDraw:Boolean=false;

var lineSize:Number=7;

var currentColor:Number;



sizeBox.text=String(lineSize);



spBoard.graphics.lineStyle(1,0x000000);

spBoard.graphics.beginFill(0xFFFFFF);
   
spBoard.graphics.drawRect(0,0,400,250);
   
spBoard.graphics.endFill();
   
spBoard.filters = [ new DropShadowFilter() ];


         
spBoard.addEventListener(MouseEvent.ROLL_OUT,boardOut);
      
spBoard.addEventListener(MouseEvent.MOUSE_MOVE,boardMove);
      
spBoard.addEventListener(MouseEvent.MOUSE_DOWN,boardDown);
      
spBoard.addEventListener(MouseEvent.MOUSE_UP,boardUp);
      

function boardOut(e:MouseEvent):void {
           
           doDraw=false;
           
     }
   

function boardDown(e:MouseEvent):void {
           
           doDraw=true;
           
           
           
           currentColor=cpColor.selectedColor;
           
           shDrawing.graphics.lineStyle(lineSize,currentColor);
           
           
           
           shDrawing.graphics.moveTo(shDrawing.mouseX,shDrawing.mouseY);
        
     }
   
function boardUp(e:MouseEvent):void {
           
           doDraw=false;
           
     }
   
function boardMove(e:MouseEvent):void {
     
             var curX:Number=shDrawing.mouseX;
           
           var curY:Number=shDrawing.mouseY;
           
           
              
           if(doDraw && checkCoords(curX,curY)){
              
              shDrawing.graphics.lineTo(curX,curY);
              
              e.updateAfterEvent();
              
           }
           
     }
   
   
function checkCoords(a:Number,b:Number):Boolean {
     
     if(a>=400-lineSize/2 || a<=lineSize/2 || b>=250-lineSize/2 || b<=lineSize/2){
        
        return false;
     }
     
     else {
        
        return true;
     }
     
}


   
btnErase.addEventListener(MouseEvent.CLICK, eraseClicked);   


function eraseClicked(e:MouseEvent):void {
     
     shDrawing.graphics.clear();
     
}

btnUp.addEventListener(MouseEvent.CLICK, upClicked);   

function upClicked(e:MouseEvent):void {
     
     if(lineSize<20){
        
     lineSize+=1;
     
     } else {
        
        lineSize=20;
        
        }
     
     sizeBox.text=String(lineSize);
     
}

btnDown.addEventListener(MouseEvent.CLICK, downClicked);   

function downClicked(e:MouseEvent):void {
     
     if(lineSize>1){
        
     lineSize+=-1;
     
     } else {
        
        lineSize=1;
        
        }
     
     sizeBox.text=String(lineSize);
     
}

var i:int;
var myArray:Array = new Array()

spBoard.addEventListener(MouseEvent.MOUSE_MOVE,boardMove);
addEventListener(Event.ENTER_FRAME, update);

function paint(e:MouseEvent):void{
     if (e.buttonDown) {
        //myArray.push(new Brush());
      myArray[myArray.length-1].x=mouseX;
        myArray[myArray.length-1].y=mouseY;
        addChild(myArray[myArray.length-1]);
        //---Maske Ansprechen
      spBoard.addChild(myArray[myArray.length-1]);
     }
}

function update(e:Event):void{
     for (i = 0; i<myArray.length; i++) {
        myArray[i].rotation+=2;
     }
} 


Ich habe das mit der Rotation schonmal rausgefunden. Die letzten paar Zeilen
hier nochmal

PHP-Code:

var i:int;
var myArray:Array = new Array()

spBoard.addEventListener(MouseEvent.MOUSE_MOVE,boardMove);
addEventListener(Event.ENTER_FRAME, update);

function paint(e:MouseEvent):void{
     if (e.buttonDown) {
        //myArray.push(new Brush());
      myArray[myArray.length-1].x=mouseX;
        myArray[myArray.length-1].y=mouseY;
        addChild(myArray[myArray.length-1]);
        //---Maske Ansprechen
      spBoard.addChild(myArray[myArray.length-1]);
     }
}

function update(e:Event):void{
     for (i = 0; i<myArray.length; i++) {
        myArray[i].rotation+=2;
     }
} 


habe versucht den Text hier auch so anzupassen aber es funktioniert nicht.


Ich hoffe ihr könnt mir helfen!!!

LG

[enky]

Zeichnen übern Rand, schau mal Zeile 41. Einfach auskommentieren und schau mal nach ob dir das verhalten besser gefällt.

[synths]

Zitat von enky

Zeichnen übern Rand, schau mal Zeile 41. Einfach auskommentieren und schau mal nach ob dir das verhalten besser gefällt.

Oh das ist schon besser^^

wollte mit der Angabe eigentlich sagen das ich über den Rand zeichnen kann und dann an einer anderen stelle wieder reinkomme ohne das die Linie automatisch zu dem neuen Punkt geht

enky hast du noch eine Lösung für die Rotation der Linien die man zeichnet? Leider arbeite ich mit CS3 und kann im Flash nicht 3 deminsional gehen, kann nur die x und y Achse ansprechen. Würde mir aber auch schon vollkommen reichen.

->Im Anhang hab ich mal so eine Rotation hochgeladen =)

[thomas_E]

->Im Anhang hab ich mal so eine Rotation hochgeladen =)

heisst das, du verstehst deinen eigenen Code nicht mehr, oder wo stammt die swf her?

zu der swf:
zeichne mal eine kurze Linie (so kurz wie möglich) und lass dann den Curso stehen.
das sieht so aus, als ob die einzenlnen Kreise sich um den Punkt an dem sie erzeugt wurden drehen.
=> MOUSE_MOVE: shapes erzeugen, mit einem exzentrischen Kreis, und ENTER_FRAME: for each(var circle:Shape in circles) circle.rotation++;

wenn du es noch etwas geschickter machen willst plazierst du die Kreise mit unterschiedlichen startrotationen und evtl unterschiedlichen Radien, aber so, dass sie beim malen direkt unter dem Mauscursor liegen.

der zweite Schritt wäre dann, die Shapes komplett wegzulassen, nur die Punkte zu speichern, und diese zu rotieren. und dann on ENTER_FRAME die so berechneten Punkte mit einer Linie zu verbinden.

[synths]

Ich bin nicht sehr bewandert mit Actionscript.

Habe jetzt aber die Zeichenfläche via Actionscript geschrieben, so hab ich die Linien schön klar und keine einzelnen Punkte.

swf:

das ist ja ne guter Plan, nur weiß ich nicht wie ich das umsetze, wenn ich ehrlich bin, ich habe Probleme weil ich auch nicht die ganzen Schrittweisen und die Befehle kenne =((

LG

[synths]

Zitat von thomas_E

heisst das, du verstehst deinen eigenen Code nicht mehr, oder wo stammt die swf her?

zu der swf:
zeichne mal eine kurze Linie (so kurz wie möglich) und lass dann den Curso stehen.
das sieht so aus, als ob die einzenlnen Kreise sich um den Punkt an dem sie erzeugt wurden drehen.
=> MOUSE_MOVE: shapes erzeugen, mit einem exzentrischen Kreis, und ENTER_FRAME: for each(var circle:Shape in circles) circle.rotation++;

wenn du es noch etwas geschickter machen willst plazierst du die Kreise mit unterschiedlichen startrotationen und evtl unterschiedlichen Radien, aber so, dass sie beim malen direkt unter dem Mauscursor liegen.

der zweite Schritt wäre dann, die Shapes komplett wegzulassen, nur die Punkte zu speichern, und diese zu rotieren. und dann on ENTER_FRAME die so berechneten Punkte mit einer Linie zu verbinden.

die dateien hab ich alle selber verfasst =) kann auch zu der swf. die flash datei senden =)
nur da hab ich mit schreiben anders angefangen darum hab ich total den üvberblick auch verloren jetzt -_-

kannst du mir den code sagen wie du das meinst mit den unterschiedlichen startrotationen ... ? o.O

meine kenntnisse sind echt sehr beschränkt

[thomas_E]

meine kenntnisse sind echt sehr beschränkt

das lässt sich ändern.

die dateien hab ich alle selber verfasst =) kann auch zu der swf. die flash datei senden =)
nur da hab ich mit schreiben anders angefangen darum hab ich total den üvberblick auch verloren jetzt -_-

ja, bitte, mich würd interessieren, wie du das jetzt gebaut hast.

kannst du mir den code sagen wie du das meinst mit den unterschiedlichen startrotationen ... ? o.O

speil mal etwas mit Radius, Startwinkel und Drehgeschwindigkeit in addPoint rum und schau dir das Ergebnis mal an.

PHP-Code:

const MIN_DISTANCE:Number = 25;        //Abstand zwischen zwei Punkten (in px)
const MIN_DISTANCE_SQUARED:Number = MIN_DISTANCE*MIN_DISTANCE;

var lines:Array = [];
var currentLine:Array;
var currentPoint:Object;
var lmp:Point = new Point();
var isMouseDown:Boolean = false;
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseDownHandler);

stage.addEventListener(Event.ENTER_FRAME, loopExplain);



function addPoint():void
{
    
    //Abstand zum letzten Punkt einhalten
    var dx:Number = mouseX - lmp.x;
    var dy:Number = mouseY - lmp.y;
    
    if(currentLine.length < 2 || dx*dx + dy*dy > MIN_DISTANCE_SQUARED){
        currentPoint = {};
        currentLine.push(currentPoint);
        lmp.x = mouseX;
        lmp.y = mouseY;
    }
    
        
    var t:Number = getTimer() / 500;
    
    //Radius
//    currentPoint.len = Math.cos(t) * 50 + 55;
    currentPoint.len = 25;
    
    //Startwinkel
//    currentPoint.rotation = Math.cos(t) * Math.PI;
//    currentPoint.rotation = t;
    currentPoint.rotation = 0;
    
    //Drehgeschwindigkeit
//    currentPoint.speed = Math.sin(t) * .005 + .01;
    currentPoint.speed = .02;
    
    //Drehpunkt
    currentPoint.x = mouseX - Math.sin(currentPoint.rotation) * currentPoint.len;
    currentPoint.y = mouseY - Math.cos(currentPoint.rotation) * currentPoint.len;
}


function mouseDownHandler(e:Event):void
{
    isMouseDown = e.type == MouseEvent.MOUSE_DOWN;
    
    if(isMouseDown){
        currentLine = [];
        lines.push(currentLine);
        
        addPoint();
    }
}


function loopSimple(e:Event):void
{
    if(isMouseDown) addPoint();
    
    graphics.clear();
    graphics.lineStyle(5, 0x006699, 1, false, LineScaleMode.NONE, CapsStyle.ROUND, JointStyle.ROUND);
    for each(var line:Array in lines){
        var len:int = line.length;
        for(var i:int = 0; i<len; ++i){
            var p:Object = line[i];
            p.rotation += p.speed;
            
            var px:Number = p.x + Math.sin(p.rotation) * p.len;
            var py:Number = p.y + Math.cos(p.rotation) * p.len;
            
            if(i==0){
                graphics.moveTo(px, py);
            }else{
                graphics.lineStyle(p.len, 0x006699, 1, false, LineScaleMode.NONE, CapsStyle.ROUND, JointStyle.ROUND);
                graphics.lineTo(px, py);
            }
        }
    }
}

function loopExplain(e:Event):void
{
    if(isMouseDown) addPoint();
    
    graphics.clear();
    graphics.lineStyle(1, 0xFF8000);
    for each(var line:Array in lines){
        var len:int = line.length;
        for(var i:int = 0; i<len; ++i){
            var p:Object = line[i];
            p.rotation += p.speed;
            
            var px:Number = p.x + Math.sin(p.rotation) * p.len;
            var py:Number = p.y + Math.cos(p.rotation) * p.len;
            
            if(i!=0){
                graphics.lineStyle(5, 0x006699);
                graphics.lineTo(px, py);
            }
            
            graphics.lineStyle(1, 0xFF8000);
            graphics.drawCircle(px, py, 2);
            graphics.moveTo(p.x, p.y);
            graphics.lineTo(px, py);
        }
    }
}


function loopSmoothed(e:Event):void
{
    if(isMouseDown) addPoint();
    
    graphics.clear();
    graphics.lineStyle(5, 0x006699, 1, false, LineScaleMode.NONE, CapsStyle.ROUND, JointStyle.ROUND);
    var lpx:Number, lpy:Number, lcx:Number, lcy:Number;
    for each(var line:Array in lines){
        var li:int = line.length-1;

        for(var i:int = 0; i<=li; ++i){
            var p:Object = line[i];
            
            p.rotation += p.speed;
            
            var px:Number = p.x + Math.sin(p.rotation) * p.len;
            var py:Number = p.y + Math.cos(p.rotation) * p.len;
            
            if(i == li){
                graphics.curveTo(lpx, lpy, px, py);
            }else if(i == 0){
                graphics.moveTo(px, py);
            }else{
                var cx:Number = (px + lpx) / 2;
                var cy:Number = (py + lpy) / 2;
                
                graphics.curveTo(lpx, lpy, cx, cy);
                
                lcx = cx; lcy = cy;
            }
            lpx = px; lpy = py;
        }
    }
} 


[synths]

Zitat von thomas_E

ja, bitte, mich würd interessieren, wie du das jetzt gebaut hast.

okay ich versuch mal ob ich das hinbekomme =)

[synths]

Zitat von thomas_E

speil mal etwas mit Radius, Startwinkel und Drehgeschwindigkeit in addPoint rum und schau dir das Ergebnis mal an.

PHP-Code:

const MIN_DISTANCE:Number = 25;        //Abstand zwischen zwei Punkten (in px)
const MIN_DISTANCE_SQUARED:Number = MIN_DISTANCE*MIN_DISTANCE;

var lines:Array = [];
var currentLine:Array;
var currentPoint:Object;
var lmp:Point = new Point();
var isMouseDown:Boolean = false;
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseDownHandler);

stage.addEventListener(Event.ENTER_FRAME, loopExplain);



function addPoint():void
{
    
    //Abstand zum letzten Punkt einhalten
    var dx:Number = mouseX - lmp.x;
    var dy:Number = mouseY - lmp.y;
    
    if(currentLine.length < 2 || dx*dx + dy*dy > MIN_DISTANCE_SQUARED){
        currentPoint = {};
        currentLine.push(currentPoint);
        lmp.x = mouseX;
        lmp.y = mouseY;
    }
    
        
    var t:Number = getTimer() / 500;
    
    //Radius
//    currentPoint.len = Math.cos(t) * 50 + 55;
    currentPoint.len = 25;
    
    //Startwinkel
//    currentPoint.rotation = Math.cos(t) * Math.PI;
//    currentPoint.rotation = t;
    currentPoint.rotation = 0;
    
    //Drehgeschwindigkeit
//    currentPoint.speed = Math.sin(t) * .005 + .01;
    currentPoint.speed = .02;
    
    //Drehpunkt
    currentPoint.x = mouseX - Math.sin(currentPoint.rotation) * currentPoint.len;
    currentPoint.y = mouseY - Math.cos(currentPoint.rotation) * currentPoint.len;
}


function mouseDownHandler(e:Event):void
{
    isMouseDown = e.type == MouseEvent.MOUSE_DOWN;
    
    if(isMouseDown){
        currentLine = [];
        lines.push(currentLine);
        
        addPoint();
    }
}


function loopSimple(e:Event):void
{
    if(isMouseDown) addPoint();
    
    graphics.clear();
    graphics.lineStyle(5, 0x006699, 1, false, LineScaleMode.NONE, CapsStyle.ROUND, JointStyle.ROUND);
    for each(var line:Array in lines){
        var len:int = line.length;
        for(var i:int = 0; i<len; ++i){
            var p:Object = line[i];
            p.rotation += p.speed;
            
            var px:Number = p.x + Math.sin(p.rotation) * p.len;
            var py:Number = p.y + Math.cos(p.rotation) * p.len;
            
            if(i==0){
                graphics.moveTo(px, py);
            }else{
                graphics.lineStyle(p.len, 0x006699, 1, false, LineScaleMode.NONE, CapsStyle.ROUND, JointStyle.ROUND);
                graphics.lineTo(px, py);
            }
        }
    }
}

function loopExplain(e:Event):void
{
    if(isMouseDown) addPoint();
    
    graphics.clear();
    graphics.lineStyle(1, 0xFF8000);
    for each(var line:Array in lines){
        var len:int = line.length;
        for(var i:int = 0; i<len; ++i){
            var p:Object = line[i];
            p.rotation += p.speed;
            
            var px:Number = p.x + Math.sin(p.rotation) * p.len;
            var py:Number = p.y + Math.cos(p.rotation) * p.len;
            
            if(i!=0){
                graphics.lineStyle(5, 0x006699);
                graphics.lineTo(px, py);
            }
            
            graphics.lineStyle(1, 0xFF8000);
            graphics.drawCircle(px, py, 2);
            graphics.moveTo(p.x, p.y);
            graphics.lineTo(px, py);
        }
    }
}


function loopSmoothed(e:Event):void
{
    if(isMouseDown) addPoint();
    
    graphics.clear();
    graphics.lineStyle(5, 0x006699, 1, false, LineScaleMode.NONE, CapsStyle.ROUND, JointStyle.ROUND);
    var lpx:Number, lpy:Number, lcx:Number, lcy:Number;
    for each(var line:Array in lines){
        var li:int = line.length-1;

        for(var i:int = 0; i<=li; ++i){
            var p:Object = line[i];
            
            p.rotation += p.speed;
            
            var px:Number = p.x + Math.sin(p.rotation) * p.len;
            var py:Number = p.y + Math.cos(p.rotation) * p.len;
            
            if(i == li){
                graphics.curveTo(lpx, lpy, px, py);
            }else if(i == 0){
                graphics.moveTo(px, py);
            }else{
                var cx:Number = (px + lpx) / 2;
                var cy:Number = (py + lpy) / 2;
                
                graphics.curveTo(lpx, lpy, cx, cy);
                
                lcx = cx; lcy = cy;
            }
            lpx = px; lpy = py;
        }
    }
} 


ich habe den text drin und kann auch zeichnen ... nur spricht das jetzt nicht meine zeichenfläche an die ich über text (actionscript) erstellt habe =( ? und ich kann nicht bei den linien meine ColourPicker funktion nutzen
leider aber ansonsten ist das echt cool das die alle andere radien haben =D hihi

leider nicht im zeichenfeld ...

ich weiß auch immer nicht wie ich dann sowas verknüpfen kann das es nur da drin malt o.O oh man

[thomas_E]

ich habe den text drin und kann auch zeichnen ... nur spricht das jetzt nicht meine zeichenfläche an die ich über text (actionscript) erstellt habe =( ? und

stimmt, es zeichnet direkt in den MC, in dem der Code liegt
Das ist eine Demo, um die Geschichte mit den Punkten zu veranschaulichen.
Das ganze in dein Programm einzubauen, ist dann schon deine Aufgabe.

ich kann nicht bei den linien meine ColourPicker funktion nutzen

wieso nicht? Du musst halt für jede Linie Liniendicke und Farbwert speichern; zb in einem zweiten Array !?

ich weiß auch immer nicht wie ich dann sowas verknüpfen kann das es nur da drin malt o.O oh man

das passendste wäre hier wohl eine Maske

noch etwas, unter 25fps kannst du es auch gleich sein lassen. Das ist dann nur noch ein zucken und ruckeln

[synths]

okay danke dir =)

Ich gebe mein bestes!

Warst mir aber schon eine sehr große Hilfe =D

hihi

danke


lg