Home > Code > Java FX > Planner

Planner

Geschrieben von admin on July 29, 2010

Java FX: Drag And Drop, Größenänderung von Elementen, Maus-Interaktion, Schriftgestaltung.

package herberlin;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.stage.Screen;
import javafx.scene.Group;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.shape.Rectangle;
import javafx.scene.input.MouseEvent;
import javafx.util.Math;
import javafx.scene.Cursor;
import javafx.scene.effect.Lighting;

// Höhe der Linien
var lineHeight = 30;
// Linienobjet erzeugen
var lines = Lines {
            translateY: 3 * lineHeight
        }

Stage {
    title: "Planner"
    scene: Scene {
        width: 640
        height: 480
        content: [
            // Text: Planner
            Text {
                font: Font.font("Verdana", FontWeight.BOLD, 60),
                x: 10, y: 60
                content: "Planner",
                // Effekt
                effect: Lighting {
                    diffuseConstant: 1.0
                    specularConstant: 1.0
                    specularExponent: 20
                    surfaceScale: 1.5
                }
            }
            // Linien
            lines,
            // Vier Tasks
            Task {color: Color.BLUE, translateY: 0 },
            Task {color: Color.ORANGE, translateY: 30 },
            Task {color: Color.GREEN, translateY: 60 },
            Task {color: Color.GRAY, translateY: 90 }
        ]
    }
}

// Hintergrundlinien
class Lines extends CustomNode {

    public function snap(yy: Number): Number {
        if (boundsInParent.contains(this.translateX, yy)) {
            var r = Math.round(yy / lineHeight) * lineHeight;
            return r;
        } else {
            return -1;
        }
    }

    // visuelle Repräsentanz erzeugen
    public override function create(): Node {
        return Group {
                    content: [
                        for (x in [0..10]) {
                            var pos = x * lineHeight;
                            Line {
                                startX: 0,
                                startY: pos,
                                // länge wie Screen
                                endX: Screen.primary.bounds.width,
                                endY: pos,
                                strokeWidth: 1
                                stroke: Color.BLACK
                            }
                        }
                    ]
                }
    };

}
var currentTask: Task = null;

// Task Object
class Task extends CustomNode {

    // Farbe
    var color = Color.BLUE;
    // Erscheinungsbild
    var rec = Rectangle {
                x: 0
                y: 0
                width: 140,
                height: lineHeight
                // abgerundete Ecken
                arcHeight: 10,
                arcWidth: 10,
                fill: color,
                stroke: Color.BLACK,
                //  3-D Effekt
                effect: Lighting {
                    diffuseConstant: 1.0
                    specularConstant: 1.0
                    specularExponent: 20
                    surfaceScale: 1.5
                }
            }

    // Finde heraus, ob die Task eine andere Task überlappt
    function overlapp(): Boolean {
        // Iteration über alle Contentelemente
        for (nd in this.scene.content) {
            if (this == nd) {
                continue;
            }
            if (nd instanceof Task) {
                if (this.intersects(this.parentToLocal(nd.boundsInParent))) {
                    return true;
                }
            }
        }
        return false;
    }

    // Erscheinungsbild zurückgeben
    public override function create(): Node {
        translateX = 400;
        return rec;
    }

    var startX = translateX;
    var startY = translateY;
    var startWidth = this.rec.width;
    // beim klick auf eine Task
    override var  onMousePressed = function(ev:MouseEvent):Void {

        // Startposition und Größe  merken
        startX=translateX;
        startY=translateY;
        startWidth=this.rec.width;

        // aktuelle Task setzen
        currentTask=this;

        // in den Vordergrund
        this.toFront();
   }
    override var onMouseDragged = function(ev:MouseEvent):Void {
        if (this != currentTask) {
            return;
        }

        // Größe ändern rechts
        if (cursor == Cursor.E_RESIZE) {
            this.rec.width=Math.max(10,startWidth+ev.dragX);

        // Größe ändern links
        } else if (cursor== Cursor.W_RESIZE) {
            this.rec.width=Math.max(10,startWidth-ev.dragX);
            this.translateX=startX+ev.dragX;

        // bewegen
        } else if (cursor==Cursor.MOVE) {
            translateX=startX+ev.dragX;
            translateY=startY+ev.dragY;
        }
    }
    // Maus loslassen
    override var  onMouseReleased = function(ev:MouseEvent):Void {


        if (this != currentTask) {
            return;
        }

        // bei Größenänderung
        if (cursor == Cursor.E_RESIZE or cursor== Cursor.W_RESIZE) {
            if (overlapp() ) {
                // beim überlappen zurücksetzen
                this.rec.width=startWidth;
                translateX=startX;
            }

        // bei Verschieben
        } else if (cursor==Cursor.MOVE) {

            // Einschnapp-Punkt von Linien erhalten
            var yy =lines.snap(startY+ev.dragY);

            // zurücksetzen wenn kein Einschnapp-Punkt
            if (yy==-1 or overlapp()) {
                translateX=startX;
                translateY=startY;
            } else {
                // neue Position setzen
                translateY=yy;
                startX=translateX;
                startY=translateY;
            }
        }

    };
    override var onMouseExited= function(ev:MouseEvent):Void {
       
    };
    // Cursor setzen bei Mausbewegung
    override var onMouseMoved= function(ev:MouseEvent):Void {

        if (ev.x== this.rec.width) {
            cursor=Cursor.E_RESIZE;
        } else if (ev.x==0) {
            cursor=Cursor.W_RESIZE;
        } else {
            cursor=cursor.MOVE;
        }
    };
}

Comments:

Sie müssen angemeldet sein um eine Nachricht zu erstellen. Anmelden »