JavaFX Controls in py5

I presume that by ‘drawing surface’ you mean canvas. A canvas is a control just like a button; the programmer can control its size, location, and function. In the demo below the canvas occupies almost the entire window except for a strip at the top reserved for other controls.

# Uses Imported mode for py5
import javafx.stage.Stage;

_wndW = 600
_wndH = 400
_topMargin = 60

def settings():
  size(1, 1, FX2D)
    
def setup():
  global gc
  global colorPicker
  
  stage = javafx.stage.Stage()
  stage.setTitle("JavaFX Drawing Demo")
  pane = javafx.scene.layout.Pane()
  
  # **** ColorPicker ****
  colorPicker = javafx.scene.control.ColorPicker()
  colorPicker.setLayoutX(200)
  colorPicker.setLayoutY(10)
  colorPicker.setValue(javafx.scene.paint.Color.GREEN) 
  pane.getChildren().add(colorPicker)

# **** Canvas ****
  canvas = javafx.scene.canvas.Canvas(_wndW, _wndH - _topMargin)
  gc = canvas.getGraphicsContext2D()
  gc.setLineWidth(2)
  gc.strokeRect(0, 0, _wndW, _wndH -_topMargin);
  canvas.setLayoutY(_topMargin)
  canvas.setOnMousePressed(MOUSE_PRESSED)
  canvas.setOnMouseDragged(MOUSE_DRAGGED)
  pane.getChildren().add(canvas)

  scene = javafx.scene.Scene(pane, _wndW, _wndH);
  stage.setScene(scene);
  stage.show();

def MOUSE_PRESSED(evnt):
  gc.moveTo(evnt.getX(), evnt.getY())

def MOUSE_DRAGGED(evnt):
  global colorPicker
  
  gc.lineTo( evnt.getX(), evnt.getY())
  gc.setStroke(colorPicker.getValue())
  gc.stroke()
  gc.setLineCap(javafx.scene.shape.StrokeLineCap.ROUND)
  gc.setLineJoin(javafx.scene.shape.StrokeLineJoin.ROUND)

  blur = javafx.scene.effect.BoxBlur()
  blur.setWidth(10)
  blur.setHeight(1)
  blur.setIterations(1)
  gc.setEffect(blur)

Output:

1 Like