2

Пытаюсь сейчас разобраться в наложении текста на изображение.

Ситуация следующая: есть javafx приложение, основное окно размечено как BorderPane c размером 1280x800. Всем зонам borderPane, за исключением center - прописаны фиксированные размеры. Выходит так, что при разворачивании окна на весь экран - увеличивается зона center. При запуске эта зона приблизительно 975x740 px.

В самой зоне center прописан scrollPane, внутри которого StackPane, со следующими параметрами (из css)

-fx-hbar-policy: never;
-fx-vbar-policy: never;
-fx-fit-to-width: true;
-fx-fit-to-height: true;
-fx-pannable: true;
-fx-alignment: center;

Внутри StackPane находится ImageView, в котором отображаются различные подгружаемые изображения, выравнивание по центру зоны center и масштабирование реализовано так:

//центрирование
stackPaneImageHolder.minWidthProperty().bind(Bindings.createDoubleBinding(() ->
            scrollPaneImageView.getViewportBounds().getWidth(), scrollPaneImageView.viewportBoundsProperty()));

//масштабирование
imageView.fitWidthProperty().bind(scrollPaneImageView.widthProperty());
    imageView.fitHeightProperty().bind(scrollPaneImageView.heightProperty());

Вопрос следующий: хотелось бы иметь возможность наносить надписи на изображение, отображаемое в ImageView.

Как я понял - решается вопрос через Canvas (javafx.scene.canvas). Но тут возникла проблема - я не понимаю, как можно связать canvas с загруженным изображением:

Например - я загрузил изображение с разрешением 4000x3000px. Оно у меня смасштабировалось в ImageView до тех же 975x740px. При разных экспериментах с Canvas - он у меня отталкивается от размеров уже смасштабированного изображения, а если пытаюсь дать ему размеры оригинального изображения - либо тестовой надписи не видно вообще в ImageView, либо у меня появляется вертикальная прокрутка внутри imageView и не факт, что надпись видна(В конечном счете сейчас вообще убрал из кода canvas, т.к. там нагородил уже уж очень страшные конструкции, которые не работают).

Мне нужно понять, как сделать Canvas размером с ширину реального изображения и высоту скажем пикселей 200 (для создания подписи на фото внизу), и отобразить готовый canvas с текстом \ фоном на масштабированном изображении, чтобы при разворачивании/восстановлении размеров окна он не съезжал куда-то вбок, а был привязан к конкретной части изображения. С последующим сохранением изображения с этой надписью в оригинальном размере.

Подскажите пожалуйста в каком направлении копать и может я вообще не из той стороны зашел. Текущий код выложил ниже

Заранее благодарен за ответ



mainWindowController

package imageSigner.controller;

import imageSigner.MainApp;
import imageSigner.model.FileItem;
import imageSigner.storage.FileItemsStorage;
import imageSigner.tools.FileOperations;
import javafx.beans.binding.Bindings;
import javafx.collections.ListChangeListener;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.TextField;
import javafx.scene.image.*;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;

import java.io.File;


public class mainWindowController {

//даем контроллеру доступ к экземпляру mainApp
private MainApp mainApp;

//создаем лист для обработки файлов
private ObservableList<FileItem> fileItemsList = FileItemsStorage.getInstance().getFileItemsList();

//переменная для хранения индекса выбранного файла
private int currentFileIndex;


//объявляем поля и элементы из FXML
@FXML public BorderPane borderPaneMain;

@FXML public ScrollPane scrollPaneImageView;
@FXML public StackPane stackPaneImageHolder;
@FXML public ImageView imageView;

@FXML public Button buttonSelectFiles;
@FXML public Button buttonPrevPhoto;
@FXML public Button buttonNextPhoto;
@FXML public Button buttonApplySignature;

@FXML public Label labelQuantitySelectedFiles;

@FXML public TextField textFieldCurrentFile;
@FXML public TextField textFieldSignature;



//initialize
public void initialize() {

    refreshCounter();

    //отслеживание изменения кол-ва выбранных файлов
    fileItemsList.addListener((ListChangeListener<FileItem>) c -> refreshCounter());

    //отслеживание предпросмотра текущего файла (изменение текстового поля с именем файла)
    textFieldCurrentFile.textProperty().addListener(
            ((observable, oldValue, newValue) -> showPhotoPreview()));

}

//обновление счетчика
private void refreshCounter() {
    FileItemsStorage.getInstance().refreshLabelCounter(labelQuantitySelectedFiles);
}

//передача файла с окна выбора файла в основное окно
public void selectFileToTextField() {
    if (fileItemsList.size() != 0) {
        try {
            currentFileIndex = mainApp.getFwController().tableView.getSelectionModel().getSelectedIndex();
            currentFileToTextFieldCF();
        }
        catch (ArrayIndexOutOfBoundsException e) {
            currentFileIndex = 0;
            currentFileToTextFieldCF();
        }
    }
}

//прописывает текущий фвйл в соответсвующее текстовое поле
private void currentFileToTextFieldCF() {
    FileItem f = fileItemsList.get(currentFileIndex);
    getTextFieldCurrentFile().setText(f.getFilePath());
}

//показывать превью фото
private void showPhotoPreview() {

    if (fileItemsList.size() != 0) {
        Image img = getCurrentImage();
        imageView.setImage(img);

        arrangeImageView();
    }
}

//выравнивание и масштабирование изображения в превью
private void arrangeImageView() {
    scrollPaneImageView.setContent(stackPaneImageHolder);

    //центрирование
    stackPaneImageHolder.minWidthProperty().bind(Bindings.createDoubleBinding(() ->
            scrollPaneImageView.getViewportBounds().getWidth(), scrollPaneImageView.viewportBoundsProperty()));

    //масштабирование
    imageView.fitWidthProperty().bind(scrollPaneImageView.widthProperty());
    imageView.fitHeightProperty().bind(scrollPaneImageView.heightProperty());
}


//TODO показ измененного фото  ТЕСТ РИСОВАНИЯ БЕЛОЙ ПОЛОСЫ ПОД ФОТО
private void showChangedPhoto(int signLineSize) {

    Image image = getCurrentImage();

    // Создаем WritableImage
    WritableImage writableImage = new WritableImage(
            (int) image.getWidth(), (int) image.getHeight() + signLineSize);

    PixelReader pixelReader = image.getPixelReader();
    PixelWriter pixelWriter = writableImage.getPixelWriter();

    // Проходим все пиксели исходного изображения
    for (int readY = 0; readY < image.getHeight(); readY++ ) {
        for (int readX = 0; readX < image.getWidth(); readX++) {
            Color color = pixelReader.getColor(readX, readY);       //считываем цвет пикселя с исходного изображения
            pixelWriter.setColor(readX, readY, color);              //записываем цвет пикселя в writableImage
        }
    }

    // заполнение цветом пространства для подписи
    for (int rY = (int)image.getHeight() + 1; rY < writableImage.getHeight(); rY++) {
        for (int rX = 0; rX < image.getWidth(); rX++) {
            pixelWriter.setColor(rX, rY, Color.WHITE);
        }
    }

    imageView.setImage(writableImage);                              //отображение измененного изображения

}



/** buttons */
public void showSelectedFilesWindow() {
    mainApp.showFilesWindow();
}

//переключает на предыдущее фото
public void prevPhotoButton() {
    if (currentFileIndex > 0) {
        currentFileIndex --;
        currentFileToTextFieldCF();
        //todo preview
    }

}

//переключает на следующее фото
public void nextPhotoButton() {
    if (currentFileIndex < fileItemsList.size() - 1) {
        currentFileIndex++;
        currentFileToTextFieldCF();
    }
}

//Применить подпись
public void buttonApplySignature() {

    //создаем копию оригинального файла в специальной папке
    FileOperations.backupOriginal(currentFileIndex);
    //отображаем измененное фото в ImageView
    showChangedPhoto(200);  //todo передаем пока временный параметр
}


/**Setters and getters */
public void setMainApp(MainApp mainApp) {
    this.mainApp = mainApp;
}

public TextField getTextFieldCurrentFile() {
    return textFieldCurrentFile;
}

public int getCurrentFileIndex() {
    return currentFileIndex;
}

public Image getCurrentImage() {
    Image img = new Image(new File(fileItemsList.get(currentFileIndex).getFilePath()).toURI().toString());
    return img;
}

}

mainWindowView.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<BorderPane fx:id="borderPaneMain" styleClass="BorderPaneMain" stylesheets="@css/mainWindow.css" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="imageSigner.controller.mainWindowController">
<top>
    <AnchorPane styleClass="panelTop">
        <Label layoutX="8.0" layoutY="4.0" styleClass="fontHeaders1" text="Предпросмотр" />
        <Label layoutX="985.0" layoutY="4.0" styleClass="fontHeaders1" text="Инструменты" />
    </AnchorPane>
</top>
<bottom>
    <AnchorPane styleClass="panelBottom">
        <TextField fx:id="textFieldSignature" layoutX="5.0" layoutY="56.0" styleClass="text-field-Signature" />
        <Button fx:id="buttonApplySignature" layoutX="1072.0" layoutY="18.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#buttonApplySignature" prefHeight="100.0" prefWidth="190.0" styleClass="fontHeaders2_arial, fontHeaders2_bold" text="Применить подпись" />
    </AnchorPane>
</bottom>
<right>
    <AnchorPane styleClass="panelTools">
        <Label layoutX="3.0" layoutY="11.0" styleClass="fontHeaders2, fontHeaders2_bold" text="1. Выберите файл JPEG или папку" />
        <Button fx:id="buttonSelectFiles" layoutX="13.0" layoutY="34.0" mnemonicParsing="false" onAction="#showSelectedFilesWindow" styleClass="button-selectFiles" text="Выбор фото" />
        <Label fx:id="labelQuantitySelectedFiles" layoutX="220.0" layoutY="34.0" styleClass="fontHeaders2, fontHeaders2_arial" />
        <TextField fx:id="textFieldCurrentFile" layoutX="13.0" layoutY="94.0" styleClass="text-field-currentFile" />
        <Button fx:id="buttonPrevPhoto" layoutX="14.0" layoutY="136.0" mnemonicParsing="false" onAction="#prevPhotoButton" styleClass="buttons-prev-and-next" text="Предыдущее фото" />
        <Label layoutX="20.0" layoutY="76.0" styleClass="fontHeaders2" text="Текущее выбранное фото" />
        <Button fx:id="buttonNextPhoto" layoutX="152.0" layoutY="136.0" mnemonicParsing="false" onAction="#nextPhotoButton" styleClass="buttons-prev-and-next" text="Следующее фото" />
    </AnchorPane>
</right>
<left>
    <AnchorPane styleClass="panelLeft" />
</left>
<center>
    <ScrollPane fx:id="scrollPaneImageView" styleClass="panelImageScrollPane">
        <StackPane fx:id="stackPaneImageHolder" styleClass="panelImageStackPane">
            <ImageView fx:id="imageView" pickOnBounds="true" preserveRatio="true" styleClass="imageView" />
        </StackPane>
    </ScrollPane>
</center>
</BorderPane>

mainWindow.css

.BorderPaneMain {
-fx-pref-width: 1280px;
-fx-pref-height: 800px;
-fx-min-width: 1280px;
-fx-min-height: 800px;
}


.panelTop, .panelTools, .panelBottom, .panelLeft {
-fx-background-color: #A6ABB2;
}

.panelTop {
-fx-pref-width: 1280px;
-fx-pref-height: 25px;
-fx-min-height: 25px;
-fx-max-height: 25px;
-fx-alignment: center;
}

.panelBottom {
-fx-alignment: bottom-left;
-fx-pref-width: 980px;
-fx-pref-height: 135px;
}

.panelTools {
-fx-alignment: top-right;
-fx-pref-width: 300px;
-fx-pref-height: 775px;
}

.panelLeft {
-fx-alignment: center;
-fx-pref-width: 5px;
-fx-pref-height: 640px;
}


.panelImageScrollPane {
-fx-hbar-policy: never;
-fx-vbar-policy: never;
-fx-fit-to-width: true;
-fx-fit-to-height: true;
-fx-pannable: true;
-fx-alignment: center;
}

.panelImageStackPane {
-fx-background-color: #404040;
}

.imageView {
-fx-alignment: center;
}


.fontHeaders1 {
-fx-font-family: Verdana;
-fx-font-size: 14px;
-fx-text-fill: #333333;
}

.fontHeaders2 {
-fx-font-family: Verdana;
-fx-font-size: 12px;
-fx-text-fill: #171717;
}
.fontHeaders2_bold {
-fx-font-weight: bold;
}

.fontHeaders2_arial {
-fx-font-family: Arial;
}

.text-field-Signature {
-fx-pref-height: 25px;
-fx-pref-width: 975px;
}

.text-field-currentFile {
-fx-pref-width: 275px;
-fx-pref-height: 25px;
}

.button-selectFiles {
-fx-pref-width: 180px;
-fx-pref-height: 25px;

-fx-font-family: Arial;
-fx-font-size: 12px;
-fx-text-fill: #171717;
}

.buttons-prev-and-next {
-fx-pref-width: 135px;
-fx-pref-height: 25px;

-fx-font-family: Arial;
-fx-font-size: 12px;
-fx-text-fill: #171717;
}
5
  • Возможно не совсем правильно понял стоящую перед вами задачу но на первы взгляд тут минимум 2 пути: Либо в ScrollPane ставте BorderPane куда уже в центр класть фото а подпись по необходимост выводить в нижней части(тут проблема в смещении при добавлении текста), либо сторить наследника к примеру Pane который будет контейнером для всего контента и он же ругулировать propertie зависимостями размер и вывод подписи...тут все гармоничнее z индекс не даст пропасть тексту и xor цвет можно организовать...Вариантов в общем-то куча если потребуется наглядный пример уточните вариант развития 7 авг 2016 в 21:15
  • Спасибо за ответ. Скорее второй вариант будет ближе. Задача - написать текст на изображении и сохранить копию этого изображения с наложенным текстом в jpeg. При этом оставить сохраненному изображению разрешение исходного изображения, а не смасштабированного.
    – qop
    8 авг 2016 в 6:10
  • Например: фото отобразилось в imageView. Я каким либо образом (например через textField) ввожу текст и нажимаю кнопку. После нажатия на кнопку у меня с помощью pixelReader / pixelWriter формируется WritableImage. К нему я добавляю к высоте фото, например, 200 пикс. белого цвета внизу изображения по всей ширине(этот момент есть уже в коде). и после этого туда нужно вставить текст из textField и отобразить WritableImage в ImageView. Вот тут есть проблема - как поставить текст на нужные координаты в изображение, и его нормально отобразить в ImageView. после сохранить в jpg с этим текстом.
    – qop
    8 авг 2016 в 6:21
  • Ясно чуть позже постараюсь кинуть свое виденье кода... 8 авг 2016 в 6:43
  • прошу прошения за задержку только закончил контракт ) Надеюсь еще актуально 18 авг 2016 в 20:23

1 ответ 1

4

Начну с кода:

public class Test extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        Cadre cadre = new Cadre(
                "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/1024px-FullMoon2010.jpg");

        BorderPane root = new BorderPane(cadre);

        cadre.setText("Moon");

        Scene s = new Scene(root, 1000, 1000);
        primaryStage.setScene(s);
        primaryStage.show();
    }

    class Cadre extends StackPane {

        private Image image;

        private ImageView view;

        private WritableImage wImage;

        private Canvas canvas = new Canvas(0, 0);
        private GraphicsContext gContext = canvas.getGraphicsContext2D();
        private double border, bottomBorder;

        public Cadre(String url) {
            image = new Image(url);

            view = new ImageView();

            parentProperty().addListener(e -> {
                initCanvas();
                view.setPreserveRatio(true);
                view.fitWidthProperty().bind(((BorderPane) ((ReadOnlyObjectProperty) e).getValue()).widthProperty());
            });

            getChildren().add(view);
        }

        public void setText(String caption) {
            Font font = new Font(canvas.getWidth() / 10);
            Text t = new Text(caption);
            t.setFont(font);

            double wLength = t.getLayoutBounds().getWidth();

            gContext.setFont(font);
            gContext.strokeText(caption, canvas.getWidth() / 2 - wLength / 2, canvas.getHeight() - bottomBorder / 2);

            paint();
        }

        private void initCanvas() {
            border = image.getWidth() * 0.1d;
            bottomBorder = image.getHeight() * 0.3d;

            canvas.setWidth(image.getWidth() + (border * 2));
            canvas.setHeight(image.getHeight() + border + bottomBorder);

            gContext.drawImage(image, border, border);

            gContext.setFill(Color.BLACK);
            gContext.setLineWidth(border * 0.15);
            gContext.strokeRect(0, 0, canvas.getWidth(), canvas.getHeight());

            paint();
        }

        private void paint() {
            wImage = new WritableImage((int) canvas.getWidth(), (int) canvas.getHeight());
            canvas.snapshot(new SnapshotParameters(), wImage);
            view.setImage(wImage);
        }

    }

}

Итак class Cadre - контейнер для объекта типа Сanvas. Тут стоит обратить внимание на слушателя родителя в конструкторе данного объекта - это удобный способ не изнурять код передачей ссылки на родителя а реализовать динамическое подстраивание под размерные бины(На всякий случай добавлю если потрепются расширять данный почти-костыль - динамические изменения организовывайте через High-Level Binding API еще одно замыкание Java не переживет ) ).Далее что в общем-то очевидно создается объект типа Canvas наносится изображение и по старой памяти реализуется метод отвечающий за прорисовку/порождение объекта расширяющий тип Image...В любом случае это прототип любое дальнейшее расширение ваш увлекательный квест...К примеру что логично в setText() можно передавать в качестве аргумента объект типа Text и снимать с него положение относительно изображения и т.д

1
  • Огромное спасибо. Пока ждал Ваш ответ, нашел способ реализации через AWT. Через SwingFXUtils вроде все это дело связал. НО все-же меня терзали сомнения - зачем применять в приложении JavaFX компоненты сторонних библиотек, когда можно реализовать все через FX. Ваш вариант (пока в черновом варианте) встроил - все работает как нужно. Правда все-же с листенером пока не заладилось (ругался на каст - ScrollPaneSkin cannot be cast to ScrollPane) - прописал ссылку на scrollPane - работает. Позже буду разбирать подробнее. Спасибо!
    – qop
    20 авг 2016 в 8:39

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.