Planner
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 »