Zeichen mit Kurve

[gerard]

hallo ,
Ich bin nicht so ein Starprogrammierer wie ihr OOP-spezialisten aber vieleicht habt ihr ideen dieser Ansatz zu verbesseren, es ist der Anfang für das Zeichnen von Formen mit Kurven

KL = new Object();
KL.onKeyDown = function() {
    if (Key.isDown(Key.SPACE)) {
        if (_global.$DRAWING) {
            _global.$DRAWING = false;
        } else {
            _global.$DRAWING = true;
            newDrawing();
        }
    }
};
Key.addListener(KL);
function drawing(mc) {
    if ($d == undefined) {
        _global.$d = 1000;
    }
    $d++;
    var container = mc.createEmptyMovieClip("C"+$d, $d);
    $d++;
    this.points = new Array();
    this.LStyle = new Object();
    this.LStyle.pen = 1;
    this.LStyle.clr = 0xff0000;
    this.LStyle.alpha = 100;
    this.addPoint = function(x, y) {
        if (this.points.length>0) {
            var point = new Object();
            point.x = (x+this.points[this.points.length-1].x)/2;
            point.y = (y+this.points[this.points.length-1].y)/2;
            this.points.push(point);
        }
        var point = new Object();
        point.x = x;
        point.y = y;
        this.points.push(point);
        this.drawLines(this.LStyle);
        this.createHandles();
    };
    this.drawLines = function(style) {
        container.clear();
        container.lineStyle(style.pen, style.clr, style.alpha);
        container.beginFill(0xffff00, 50);
        var SP = this.points[0];
        container.moveTo(SP.x, SP.y);
        for (var i = 0; i<this.points.length-2; i += 2) {
            var begin = this.points[i];
            var cp = this.points[i+1];
            var end = this.points[i+2];
            var controlX = (2*cp.x)-.5*(begin.x+end.x);
            var controlY = (2*cp.y)-.5*(begin.y+end.y);
            container.curveTo(controlX, controlY, end.x, end.y);
        }
        container.lineTo(SP.x, SP.y);
    };
    this.showLine = function() {
        if (!$DRAWING) {
            tmp.removeMovieClip();
            return;
        }
        var lastPoint = this.points[this.points.length-1];
        if (lastPoint != undefined) {
            tmp = container.createEmptyMovieClip("TMP", 99999);
            tmp.lineStyle(this.Lstyle.pen, this.LStyle.clr, this.LStyle.alpha);
            tmp.moveTo(lastPoint.x, lastPoint.y);
            tmp.lineTo(_root._xmouse, _root._ymouse);
        }
    };
    this.createHandles = function() {
        this.handles = mc.createEmptyMovieClip("HDLS", $d);
        this.handles._visible = false;
        for (var i = 0; i<this.points.length-1; i += 2) {
            var H = this.createHandle(i);
            H._x = this.points[i].x;
            H._y = this.points[i].y;
            //
            var H = this.createHandle(i+1);
            H._x = this.points[i+1].x;
            H._y = this.points[i+1].y;
            //
            var H = this.createHandle(i+2);
            H._x = this.points[i+2].x;
            H._y = this.points[i+2].y;
        }
    };
    this.createHandle = function(i) {
        var H = this.handles.createEmptyMovieClip("H"+(i+2), (i+2));
        H.linethis.Style(0.1, 0x000000, 100);
        H.moveTo(-2, -2);
        var n = i%2;
        if (n == 0) {
            var clr = 0xff0000;
        } else {
            var clr = 0x0000ff;
        }
        H.beginFill(clr, 100);
        H.lineTo(2, -2);
        H.lineTo(2, 2);
        H.lineTo(-2, 2);
        H.lineTo(-2, -2);
        H.endFill();
        H.LStyle = this.LStyle;
        H.point = this.points[i];
        H.points = this.points;
        H.drawLines = this.drawLines;
        H.onPress = function() {
            this.LX = _root._xmouse;
            this.LY = _root._ymouse;
            this.onMouseMove = function() {
                this._x += (_root._xmouse-this.LX);
                this._y += (_root._ymouse-this.LY);
                this.point.x = this._x;
                this.point.y = this._y;
                this.drawLines(this.LStyle);
                updateAfterEvent();
                this.LX = _root._xmouse;
                this.LY = _root._ymouse;
            };
        };
        H.onRelease = function() {
            delete this.onMouseMove;
        };
        return H;
    };
    //Listner for showing the actual drawing
    this.onMouseDown = function() {
        delete this.onMouseMove;
        if (this.stopped) {
            if (!container.hitTest(_root._xmouse, _root._ymouse)) {
                this.handles._visible = false;
            } else {
                this.handles._visible = true;
            }
            return;
        }
        if ($DRAWING) {
            this.addPoint(_root._xmouse, _root._ymouse);
            this.drawLines(this.LStyle);
        } else {
            this.stopped = true;
            container.onPress = function() {
                this.handles._visible = true;
                this._parent.startDrag();
            };
            container.onRelease = function() {
                stopDrag();
            };
        }
        tmp.removeMovieClip();
    };
    this.onMouseUp = function() {
        if ($DRAWING) {
            this.onMouseMove = this.showLine;
        } else {
            this.addPoint(this.points[0].x, this.points[0].y);
            this.handles._visible = true;
            delete this.onMouseUp;
            tmp.removeMovieClip();
        }
    };
}
function newDrawing() {
    d++;
    var MC = _root.createEmptyMovieClip("D"+d, d);
    draw = new drawing(MC);
    Mouse.addListener(draw);
} 

Ich weiss dieser Kode is nocht nicht so sauber, kommt noch!

[the binary]

cewl

nochn bissel buggy, aber sonst schon schick.
das umschalten zwischen zeichnen und "draggen" funz noch recht haklig...

gruss

[michael]

habs jetzt so spontan nicht zum laufen gebracht.
beim überfliegen hab ich nur gedacht: updateAfterEvent() in funktion showLine machts bestimmt geschmeidiger, wie es auch immer aussehen mag

gruß
micha

[gerard]

Stimmt, muss da auch noch herein.
Das Starten einen zeichnung ist jetzt primitiev über einen Key.listener implementiert Leertaste started und stopt das zeichnen

[gerard]

Hier ist das fla

[bokel]

Gefällt mit gut,
danke schön

mfg r.

[Madokan]

gerard - stellt dein Licht nicht in den Schatten. Schönes Beispiel - ich bin sicher die Jungs u. Mädels hier im Forum werden viel Freude damit haben.

live long and prosper...

Liebe Grüsse
Matze K.

[bloba]

wow das ist ja der hammer!!

[Alois]

hmmm.... jetzt hab ich meinen Beitrag gerade gelöscht, weil ich dachte daß ich da wohl etwas danebengegriffen habe, aber offensichtlich war es doch richtig, statt:

H.onRelease = function() {
            delete this.onMouseMove;
        }; 

setzt mal folgendes ein:

H.onRelease =H.onReleaseOutside= function() {
            delete this.onMouseMove;
        }; 

...und schon passiert es nicht mehr, daß der Handler mal hängenbleibt....

...ach ja, insgesamt Spitzencode...

Gruß

Alois

[e2e4]

Sehr schön!

Die Funtionszuweisungen innerhalb des Konstruktors ist irgendwie gewöhnungsbedürftig, aber das ist Geschmackssache

[gerard]

@Alois

Danke, gute Ergänzung Vergisse immer die onReleaseOutside!
@Alle

Ich wollte dieses Drawing Object ergänzen mit folgende Methoden:

drawCircel(radius) (centerpoint bestimmt durch Mouse)
drawStar (radius, points);
drawPoly(linewidth,points)
changeFill(color, alpha)
changeFillGrad(???)
changePen(thickness,color,alpha)

Fahre Morgen nach Griechenland aber nehme mein Laptop mit
Lasst euch überraschen

PS Auch Vorschlägen zu Verbesserung sind Willkommen

PPSS

die anpassung für controlpoints bei curveTo:
Danke an Robert Penner