Canvas, рисование мышью

@frostyy34 · Регистрация: 15.05.2014

Студворк — интернет-сервис помощи студентам

Добрый вечер, товарищи. Собственно, не так давно я решил познакомиться поближе с JavaFX, и в качестве пробного проекта выбрал простую рисовалку. Столкнулся с проблемой, которую не могу решить.

Java
1
2
3
4
5
6
7
8
9
10
11
        myCanvas.setOnMouseDragged((MouseDragEvent) -> {
            if(rootLayoutEventController.pencil){
                gc.beginPath();
                gc.moveTo(MouseDragEvent.getX(), MouseDragEvent.getY());
                gc.lineTo(MouseDragEvent.getX(), MouseDragEvent.getY());
 
                gc.stroke();
                gc.moveTo(MouseDragEvent.getX(), MouseDragEvent.getY());
                gc.closePath();
            }
        });

gc, соответственно, GraphicsContext. Проблема вся в том, что если я рисую через Path, т.е. начинаю с beginPath() и заканчиваю с closePath(), то рисование идёт точками, но сохраняется фигура, и, естественно, при новом вызове данного события не обновляется всё старое(если я почистил), а если я использую как-то так(ниже), то идёт чёткая линия за курсором, но при повторном вызове события, естественно, от последней точки до текущей идёт прямая линия(если вставить gc.moveTo перед gc.lineTo, то точки снова появляются)

Java
1
2
3
4
5
6
7
8
        myCanvas.setOnMouseDragged((MouseDragEvent) -> {
            if(rootLayoutEventController.pencil){
                gc.lineTo(MouseDragEvent.getX(), MouseDragEvent.getY());
 
                gc.stroke();
                gc.moveTo(MouseDragEvent.getX(), MouseDragEvent.getY());
            }
        });

Думал как-то обработать через setOnMouseDragEntered, но никакого толку это не принесло. Есть идеи?

@aleksandy · 13.01.2016, 09:46

Я ничего не понял из твоего объяснения, можешь дать запускабельный код, демонстрирующий проблему?

@frostyy34 · 14.01.2016, 17:48 **[ТС]**

вот код контроллера, отвечающего за содержимое сцены(канву)

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.control.ColorPicker;
//import javafx.scene.control.Alert;
//import javafx.scene.control.Alert.AlertType;
import javafx.scene.canvas.*;
import javafx.scene.paint.*;
//import javafx.scene.shape.*;
 
public class personOverviewEventController extends Canvas  {
    
    @FXML
    private Canvas myCanvas;
    
    @FXML
    private Button myButton;
    
    @FXML
    private Button myButton1;
    
    @FXML
    private Button drawButton;
    
    @FXML
    private TextField myTextField;
    
    @FXML
    private ColorPicker colorPicker;
    
    public static GraphicsContext gc;
    
    private double x1, y1, x2, y2;
    
    
    public personOverviewEventController(){
        System.out.println("personOverviewController loaded");
    }
    
    
    @FXML
    private void initialize(){
      gc = myCanvas.getGraphicsContext2D();
      gc.setFill(Color.WHITE);
      gc.fillRect(0, 0, 600, 400);
      gc.setStroke(Color.BLUE);
      gc.setLineWidth(3.0);
        myButton.setOnAction((event) -> {
             gc.setFill(Color.BLACK);
//           Main.gc.setLineWidth(1);
             String str = myTextField.getText();
             gc.fillText(str, 0, 400-29, 600);
//           gc.setFill(Color.WHITE);
//           gc.fillText(str, 0, 400-29, 600);
 
    });
        myButton1.setOnAction((event) -> {
            gc.fillRect(0, 0, 600, 400);
            gc.save();
        });
        
        
        
        myCanvas.setOnMousePressed((MouseEvent) -> {
            if(rootLayoutEventController.rectangle){
                System.out.println(Integer.toString((int) MouseEvent.getX()   ));
                x1 = MouseEvent.getX();
                System.out.println(Integer.toString((int) MouseEvent.getY()   ));
                y1 = MouseEvent.getY(); 
            }
            
            if(rootLayoutEventController.line){
                x1 = MouseEvent.getX();
                y1 = MouseEvent.getY();
            }
 
            
        });
        
        myCanvas.setOnMouseReleased((MouseEvent) -> {
            if(rootLayoutEventController.rectangle){
                x2 = MouseEvent.getX();
                System.out.println(Integer.toString((int) MouseEvent.getX()   ));
                y2 = MouseEvent.getY();
                System.out.println(Integer.toString((int) MouseEvent.getY()   ));
                gc.setFill(colorPicker.getValue());
                if((x1 < x2 ) & (y1 < y2)){
                    gc.fillRect(x1, y1, x2-x1, y2-y1); //  из левого верхнего угла
                }else if((x2 < x1) & (y2 < y1)){
                    gc.fillRect(x2, y2, x1-x2, y1-y2); // из правого нижнего угла
                }else if((x2 < x1) & (y1 < y2) ){ 
                    gc.fillRect(x2, y1, x1-x2 , y2-y1); // из правого верхнего угла
                }else if((x1 < x2) & ( y2 < y1)){
                    gc.fillRect(x1, y2, x2-x1, y1-y2); // из левого нижнего угла
                }
            }
            
            if(rootLayoutEventController.line){
                x2 = MouseEvent.getX();
                y2 = MouseEvent.getY();
                gc.strokeLine(x1, y1, x2, y2);
            }
            
        }); 
        
//      myCanvas.setOnMouseDragEntered((MouseDragEvent) -> {
//          if(rootLayoutEventController.pencil){
//              x1 = MouseDragEvent.getX();             
//              y1 = MouseDragEvent.getY();
////                DragEvent.
//              gc.beginPath();
//              gc.moveTo(x1, y1);
//
//          }
//      });
        
        
        myCanvas.setOnMouseDragged((MouseDragEvent) -> {
            if(rootLayoutEventController.pencil){
                gc.beginPath();
                gc.moveTo(MouseDragEvent.getX(), MouseDragEvent.getY());
                gc.lineTo(MouseDragEvent.getX(), MouseDragEvent.getY());
 
                gc.stroke();
                gc.moveTo(MouseDragEvent.getX(), MouseDragEvent.getY());
                gc.closePath();
            }
        });
        
        
        
        
    }
 
    
 
}

вот так он выглядит

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.canvas.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
 
<AnchorPane maxHeight="400.0" maxWidth="700.0" minHeight="400.0" minWidth="700.0" prefHeight="400.0" prefWidth="700.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="personOverviewEventController">
   <children>
      <Canvas fx:id="myCanvas" height="400.0" scaleX="1.0" scaleY="1.0" width="600.0" />
      <TextField fx:id="myTextField" layoutX="163.0" layoutY="136.0" prefHeight="27.0" prefWidth="222.0" />
      <Button fx:id="myButton" layoutX="142.0" layoutY="177.0" mnemonicParsing="false" prefHeight="46.0" prefWidth="148.0" text="type" />
      <Button fx:id="myButton1" layoutX="300.0" layoutY="177.0" mnemonicParsing="false" prefHeight="46.0" prefWidth="148.0" text="clear" />
      <Button fx:id="drawButton" layoutX="261.0" layoutY="231.0" mnemonicParsing="false" text="draw" />
      <ColorPicker fx:id="colorPicker" layoutX="600.0" layoutY="79.0" />
   </children>
</AnchorPane>

вот это контроллер, отвечающий за сцену(окно)

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import javafx.fxml.FXML;
import javafx.scene.control.MenuItem;
import javafx.scene.control.Alert;
import javafx.scene.control.Alert.AlertType;
//import javafx.scene.paint.*;
 
 
public class rootLayoutEventController {
    
    @FXML
    private MenuItem myAbout;
    
    @FXML
    private MenuItem myVersion;
    
    @FXML
    private MenuItem myLineTool;
    
    @FXML
    private MenuItem myRectangleTool;
    
    @FXML
    private MenuItem myPencilTool;
    
    public rootLayoutEventController(){
        System.out.println("rootLayoutController loaded");
    }
    
    public static boolean line = false;
    public static boolean rectangle = false;
    public static boolean pencil = false;
    
    @FXML
    private void initialize(){
        myAbout.setOnAction((event) -> {
            Alert alert = new Alert(AlertType.INFORMATION);
            alert.setTitle("About");
            alert.setHeaderText(null);
            alert.setContentText("Made by Chukhlantsev Peter, 07.01.2016");
 
            alert.showAndWait();
        
    });
        myVersion.setOnAction((event) -> {
            Alert alert = new Alert(AlertType.INFORMATION);
            alert.setTitle("Version");
            alert.setHeaderText(null);
            alert.setContentText("Current version is 1.0");
 
            alert.showAndWait();
        
    });
        
        myLineTool.setOnAction((event) -> {
            if(!line){
                rectangle = false;
                pencil = false;
                line = true;
            }else{
                line = false;
            }
        }); 
        
        myRectangleTool.setOnAction((event) -> {
            if(!rectangle){
                pencil = false;
                line = false;
                rectangle = true;
            }else{
                rectangle = false;
 
            }
        });
        
        myPencilTool.setOnAction((event) -> {
            if(!pencil){
                line = false;
                rectangle = false;
                pencil = true;
            }else{
                pencil = false;
            }
        });
        
    }
 
}

как он выглядит:

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.canvas.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.BorderPane?>
 
<BorderPane maxHeight="429.0" maxWidth="700.0" minHeight="429.0" minWidth="700.0" prefHeight="429.0" prefWidth="700.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="rootLayoutEventController">
   <top>
      <MenuBar BorderPane.alignment="CENTER">
        <menus>
          <Menu mnemonicParsing="false" text="Help">
            <items>
              <MenuItem fx:id="myAbout" mnemonicParsing="false" text="About" />
                  <MenuItem fx:id="myVersion" mnemonicParsing="false" text="Version" />
            </items>
          </Menu>
            <Menu mnemonicParsing="false" text="Tools">
               <items>
                  <MenuItem fx:id="myLineTool" mnemonicParsing="false" text="Line Tool" />
                  <MenuItem fx:id="myRectangleTool" mnemonicParsing="false" text="Rectangle Tool" />
                  <MenuItem fx:id="myPencilTool" mnemonicParsing="false" text="Pencil Tool" />
               </items>
            </Menu>
        </menus>
      </MenuBar>
   </top>
</BorderPane>

вот это main

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import java.io.IOException;
 
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
//import javafx.scene.Group;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
//import javafx.scene.canvas.*;
//import javafx.scene.paint.*;
 
public class Main extends Application {
 
    private Stage primaryStage;
    private BorderPane rootLayout;
 
    @Override
    public void start(Stage primaryStage) {
        this.primaryStage = primaryStage;
        this.primaryStage.setTitle("kek");
//        this.primaryStage.setFullScreen(true);
        this.primaryStage.setMaxWidth(700.0);
        this.primaryStage.setMaxHeight(429.0);
        this.primaryStage.setMinWidth(700.0);
        this.primaryStage.setMinHeight(429.0);
        this.primaryStage.setMaxHeight(429.0);
        this.primaryStage.setResizable(false);
        
        initRootLayout();
 
        showPersonOverview();
 
    }
 
    /**
     * Initializes the root layout.
     */
    public void initRootLayout() {
        try {
            // Load root layout from fxml file.
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(Main.class.getResource("/rootLayout.fxml"));
            rootLayout = (BorderPane) loader.load();
 
            // Show the scene containing the root layout.
            Scene scene = new Scene(rootLayout);
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
 
    /**
     * Shows the person overview inside the root layout.
     */
    public void showPersonOverview() {
        try {
            // Load person overview.
//            FXMLLoader loader1 = new FXMLLoader();
//            loader1.setLocation(Main.class.getResource("/toolOptions.fxml"));
//            AnchorPane toolOptions = (AnchorPane) loader1.load();
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(Main.class.getResource("/personOverview.fxml"));
            AnchorPane personOverview = (AnchorPane) loader.load();
            
//            rootLayout.setRight(toolOptions);
            rootLayout.setCenter(personOverview);
            
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
 
    /**
     * Returns the main stage.
     * @return
     */
    public Stage getPrimaryStage() {
        return primaryStage;
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

суть в том, что когда я использую инструмент карандаша, т.е. рисую мышью, проблемой становится то, что либо: а) отсутствие непрерывности(скриншот выше, код тоже есть данного события); б) прорисовка лишней линии от конечной точки до текущей + при использовании очистки при каждом вызове события(т.е. рисовании) обновляется, возвращается, всё стёртое.

@bio4 · 19.02.2017, 15:53

Сообщение от frostyy34

а если я использую как-то так(ниже), то идёт чёткая линия за курсором, но при повторном вызове события, естественно, от последней точки до текущей идёт прямая линия

Java
1
2
3
4
5
6
7
8
        myCanvas.setOnMouseDragged((MouseDragEvent) -> {
            if(rootLayoutEventController.pencil){
                gc.lineTo(MouseDragEvent.getX(), MouseDragEvent.getY());
 
                gc.stroke();
                gc.moveTo(MouseDragEvent.getX(), MouseDragEvent.getY());
            }
        });

необходимо просто добавить в событие

Java
1
OnMousePressed(MouseEvent)

фиксирование положения в новом месте

Java
1
gc.moveTo(MouseEvent.getX(), MouseEvent.getY());

и будет рисование с точки нажатия мыши

Новые блоги и статьи Все статьи Все блоги /
Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025

@aleksandy 636 / 528 / 165 Регистрация: 01.04.2010 Сообщений: 1,843
	13.01.2016, 09:46
	Я ничего не понял из твоего объяснения, можешь дать запускабельный код, демонстрирующий проблему? 0