Графический редактор на JavaScript. Часть 1. Введение

👁 93 просмотров

Данный цикл статей будет относится к проектированию простого графического редактора на основе клиентского языка JavaScript и серверного языка PHP. Графический редактор будет иметь возможность создавать простейшие примитивы: линия, эллипс, прямоугольник, многоугольник. Опишем возможность добавления, редактирования и удаления примитивов из текстового файла. Прорисовка примитивов будет производиться средствами HTML5 Canvas. HTML5 интегрирован с языком JavaScript и позволяет нам напрямую использовать API Canvas.

1. Клиентская часть на JavaScript

Клиентская часть, как известно, выполняется в браузера удаленного пользователя и для того, чтобы пользователь имел возможность редактировать файл на сервере необходимо будет иметь постоянную связь с PHP скриптом, для передачи параметров интерактивного редактирования примитива. Для этого будем использовать технологию ассинхроной связи с сервером AJAX. Для кроссбраузерной совместимости будем сразу использовать какую-нибудь библиотеку JavaScript, чтобы не отвлекаться на ненужные приемы совместимости и лучщим решением будет jQuery.

2. Серверная часть на PHP

Серверная часть будет написана на PHP. Необходимость в использовании PHP обусловлено тем, что JavaScript не имеет возможности работать с файлами: записывать, удалять, редактировать… Поэтому использование серверного языка — это одна из необходимостей для создания и редактирования графического файла, в котором будут храниться наши данные.

3. Расширение файла

Для того, чтобы сохранить наши примитивы для передачи между пользователями будем использовать обычный текстовый файл с расширением *.sgf(Simple Graphic Format). Название расширения не играет роли, можно любое, которое угодно вам и от этого файл не перестает быть текстовым. Другое дело — это , если бы мы использовали бинарный файл с 16-ричными значениями, но нас сейчас интересует первый вариант в виду легкости разработки и быстроты реализации.

4. Стрктура файла

Файл является собственным, структурированным, а это значит, что он не стнадартизирован как xml, хотя, можно было бы и его использовать, но не будем плодить копию SVG, а создадим свою структуру с нуля, чтобы лучше понять процесс разработки

Диалоговое окно открытия и сохранения файла в JavaFX

👁 202 просмотров

Иногда в программе требуется реализовать диалоговое окно, которое будет открывать или сохранять файл и для таких целей в JavaFX есть отдельный класс FileChooser. Данный класс реализует данные диалоговые окна посредством вызова методов showOpenDialog() или showSaveDialog().

1. Открытие файла определенного расширения

Ниже покажем пример кода реализации диалогового окна открытия файла определенного расширения или списка расширений

@FXML
private void hndlOpenFile(ActionEvent event) {
        FileChooser fileChooser = new FileChooser();//Класс работы с диалогом выборки и сохранения
        fileChooser.setTitle("Open Document");//Заголовок диалога
        FileChooser.ExtensionFilter extFilter = 
        new FileChooser.ExtensionFilter("HTML files (*.html)", "*.html");//Расширение
        fileChooser.getExtensionFilters().add(extFilter);
        File file = fileChooser.showOpenDialog(CodeNote.mainStage);//Указываем текущую сцену CodeNote.mainStage
        if (file != null) {
            //Open
            System.out.println("Процесс открытия файла");
        }
}

2. Диалоговое окно сохранения файла определенного расширения

Ниже покажем пример кода реализации диалогового окна сохранения файла определенного расширения или списка расширений

@FXML
private void hndlOpenFile(ActionEvent event) {
    FileChooser fileChooser = new FileChooser();//Класс работы с диалогом выборки и сохранения
    fileChooser.setTitle("Save Document");//Заголовок диалога
    FileChooser.ExtensionFilter extFilter = 
    new FileChooser.ExtensionFilter("HTML files (*.html)", "*.html");//Расширение
    fileChooser.getExtensionFilters().add(extFilter);
    File file = fileChooser.showSaveDialog(CodeNote.mainStage);//Указываем текущую сцену CodeNote.mainStage
    if (file != null) {
        //Save
        System.out.println("Процесс открытия файла");
    }
}

3. Дополнительно

Для того, чтобы открывать или сохранять несколько видов расширений необходимо использовать мульти-фильтр

fileChooser.getExtensionFilters().addAll(
    new FileChooser.ExtensionFilter("All Images", "*.*"),
    new FileChooser.ExtensionFilter("HTML Documents", "*.html"),
    new FileChooser.ExtensionFilter("JPG", "*.jpg"),
    new FileChooser.ExtensionFilter("PNG", "*.png")
);

Для того, чтобы открывать несколько файлов необходимо использовать диалоговое окно мульти-выборки, который вызывается посредством метода showOpenMultipleDialog

List<File> list =
    fileChooser.showOpenMultipleDialog(CodeNote.mainStage);
    if (list != null) {
    for (File file : list) {
    openFile(file);
    }
}

Для того, чтобы узнать какое расширение выбрано в процессе сохранения или открытия используем getSelectedExtensionFilter(), а для того, чтобы сравнить существующие расширения используем метод getExtensionFilters().get(index), где index — порядковый номер регистрированного расширения

if(fileChooser.getSelectedExtensionFilter().equals(fileChooser.getExtensionFilters().get(0))){
    if (!file.getPath().endsWith(".html")) {
        file = new File(file.getPath() + ".html");
    }
        System.out.println("Процесс сохранения html файла");
    }else if(fileChooser.getSelectedExtensionFilter().equals(fileChooser.getExtensionFilters().get(1)))
    {
    if (!file.getPath().endsWith(".png")) {
        file = new File(file.getPath() + ".png");
    }
    System.out.println("Процесс сохранения png файла");
}