С Новым годом! Форум программистов, компьютерный форум, киберфорум
Java: GUI, графика
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.93/41: Рейтинг темы: голосов - 41, средняя оценка - 4.93
1 / 1 / 0
Регистрация: 15.05.2014
Сообщений: 8
1

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

13.01.2016, 04:02. Показов 8088. Ответов 3
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Добрый вечер, товарищи. Собственно, не так давно я решил познакомиться поближе с 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, но никакого толку это не принесло. Есть идеи?
Миниатюры
Canvas, рисование мышью  
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
13.01.2016, 04:02
Ответы с готовыми решениями:

Апплет "Рисование", позволяющий рисовать мышью
Создать апплет « Рисование », которых позволяет рисовать мышью , нажав левую кнопку и двигая...

Рисование на Canvas мышью
Как можно реализовать рисование мышью)как в паинте что бы можно было рисовать?мне бы идею,я уже...

Рисование Canvas, при наведении мышью - изменить цвет
Вот так рисую окружности на Image1: void risuem(int x, int y, int R) {...

Прокрутка на canvas мышью
Как сделать прокрутку холста на html5 с помощью мыши, а то у меня все объекты не помещаются?

3
636 / 528 / 165
Регистрация: 01.04.2010
Сообщений: 1,843
13.01.2016, 09:46 2
Я ничего не понял из твоего объяснения, можешь дать запускабельный код, демонстрирующий проблему?
0
1 / 1 / 0
Регистрация: 15.05.2014
Сообщений: 8
14.01.2016, 17:48  [ТС] 3
вот код контроллера, отвечающего за содержимое сцены(канву)
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);
    }
}
суть в том, что когда я использую инструмент карандаша, т.е. рисую мышью, проблемой становится то, что либо: а) отсутствие непрерывности(скриншот выше, код тоже есть данного события); б) прорисовка лишней линии от конечной точки до текущей + при использовании очистки при каждом вызове события(т.е. рисовании) обновляется, возвращается, всё стёртое.
1
2 / 2 / 3
Регистрация: 15.10.2015
Сообщений: 19
19.02.2017, 15:53 4
Цитата Сообщение от 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());
и будет рисование с точки нажатия мыши
1
19.02.2017, 15:53
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
19.02.2017, 15:53
Помогаю со студенческими работами здесь

Рисование мышью
Всем привет. Написал прогу для рисования мышью (пока только прямые линии) на c++ (MS VS 2005)....

Рисование мышью
Как сделать так чтобы при зажатой клавиши мышки ведя по форме за курсором появлялась линия? я...

Не работает рисование мышью
Я использую библиотеку &quot;Future Library 3.50&quot; для работы мыши. Вот программа на тему мыши: REM...

Рисование линии мышью
Собственно не могу понять, почему не работает. Код взял с msdn. Подумал, что, может, ручка белого...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Что такое CQRS и как это реализовать на C# с MediatR
InfoMaster 15.01.2025
Концепция CQRS и её роль в современной разработке В современном мире разработки программного обеспечения архитектурные паттерны играют ключевую роль в создании масштабируемых и поддерживаемых. . .
Как настроить CI/CD с Azure DevOps
InfoMaster 15.01.2025
CI/ CD, или непрерывная интеграция и непрерывное развертывание, представляет собой современный подход к разработке программного обеспечения, который позволяет автоматизировать и оптимизировать процесс. . .
Как настроить CI/CD с помощью Jenkins
InfoMaster 15.01.2025
Введение в CI/ CD и Jenkins В современной разработке программного обеспечения непрерывная интеграция (CI) и непрерывная доставка (CD) стали неотъемлемыми элементами процесса создания качественных. . .
Как написать микросервис на Go/Golang с Kafka и GitHub CI/CD
InfoMaster 14.01.2025
Определение микросервиса, преимущества использования Go/ Golang Микросервис – это архитектурный подход к разработке программного обеспечения, при котором приложение состоит из небольших, независимо. . .
Как написать микросервис с нуля на C# с RabbitMQ, CQRS и CI/CD
InfoMaster 14.01.2025
В современном мире разработки программного обеспечения микросервисная архитектура стала стандартом де-факто для создания масштабируемых и гибких приложений. Этот архитектурный подход предполагает. . .
Как создать интернет-магазин на PHP и JavaScript
InfoMaster 14.01.2025
В современном мире электронная коммерция стала неотъемлемой частью бизнеса. Создание собственного интернет-магазина открывает широкие возможности для предпринимателей, позволяя достичь большей. . .
Как написать Тетрис на Ассемблере
InfoMaster 14.01.2025
Тетрис – одна из самых узнаваемых и популярных компьютерных игр, созданная в 1984 году советским программистом Алексеем Пажитновым. За прошедшие десятилетия она завоевала симпатии миллионы людей по. . .
Как создать игру "Танчики" на Unity3d и C#
InfoMaster 14.01.2025
Разработка игр – это увлекательный процесс, сочетающий в себе творчество и технические навыки. В этой статье мы рассмотрим создание классической игры "Танчики" с использованием Unity3D и языка. . .
Организую платный онлайн микро-курс по доработке Android-клиента Telegram
_Ivana 14.01.2025
Официальная версия и распространенные форки не полностью устраивают? Сделай свою кастомную версию клиента! 4 занятия по 2 часа (2 недели пн, ср 19:00-21:00 по Москве). Первое вводное занятие. . .
Как создать приложение для фитнеса для iOS/iPhone на Kotlin
InfoMaster 14.01.2025
Создание собственного фитнес-приложения — это не только захватывающий, но и полезный процесс, ведь оно может стать вашим верным помощником на пути к здоровому и активному образу жизни. В современных. . .
Как создать приложение магазина для iOS/iPhone на Swift
InfoMaster 14.01.2025
Введение в разработку iOS-приложений Разработка приложений для iPhone и других устройств на базе iOS открывает огромные возможности для создания инновационных мобильных решений. В данной статье мы. . .
Это работает. Скорость асинхронной логики велика. Вопрос видимо останется в стабильности. Плата - огонь!
Hrethgir 13.01.2025
По прошлому проекту в Logisim Evolution https:/ / www. cyberforum. ru/ blogs/ 223907/ blog8781. html прилагаю файл архива проекта в Gowin Eda. Восьмибитный счётчик из сумматора+ генератор сигнала. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru