Как заполнить текст после нажатия кнопки «Отправить» на холсте Vaadin? - PullRequest
Новая
       29

Как заполнить текст после нажатия кнопки «Отправить» на холсте Vaadin?

0 голосов
/ 21 декабря 2018

У меня есть холст, который позволяет рисовать ограничивающие рамки.В функции mouseDown начальные координаты xy помещаются в массив в виде объекта и в слушатель mouseUp, то есть когда происходит фактическое рисование поля и после его рисования он получает доступ к тому же массиву и редактируетзначения ширины, высоты и т. д. В моем MainLayout у меня есть кнопка отправки, чтобы передать имя блока в тот же массив объектов.Однако сейчас я хочу, чтобы имя блока отображалось в верхней части окна (используя fillText) после нажатия кнопки отправки.Я попытался поместить fillText в мой слушатель mouseUp, но он не работает, поскольку имя блока еще не было передано, пока пользователь не нажмет кнопку Submit.

Вот мой слушатель mouseDown и mouseUp в Canvas.java:

private static CanvasRenderingContext2D context;
    private Element element;
    private boolean mouseSelect = false;
    private double endX;
    private double endY;
    public static int boxCount = 0;

    public static ArrayList <BoundingBox> arrayBoxes = new ArrayList<BoundingBox>();
    public static ArrayList <MousePosition> mousePosArray = new ArrayList<MousePosition>();
    public static ArrayList <SelectBox> selectBoxes = new ArrayList<SelectBox>();
    private List<Runnable> mouseMoveListeners = new ArrayList<>(0);

element.addEventListener("mousedown", event -> {  // Retrieve starting x and y position

            Element boundingBoxResult = ElementFactory.createDiv();
            element.appendChild(boundingBoxResult);

            JsonObject evtData = event.getEventData();

            double xBox = evtData.getNumber("event.x");
            double yBox = evtData.getNumber("event.y");
            boundingBoxResult.setAttribute("data-x", String.format("%f", xBox));
            boundingBoxResult.setAttribute("data-y", String.format("%f", yBox));

            BoundingBox newBox = new BoundingBox("","", xBox, yBox, 0.0, 0.0, 0.0, 0.0);
            arrayBoxes.add(newBox);

//            SelectBox select = new SelectBox(xBox, 0.0, yBox, 0.0);
//            selectBoxes.add(0, select);

            mouseIsDown=true;

            mouseMoveListeners.forEach(Runnable::run);

        }).addEventData("event.x").addEventData("event.y");

    element.addEventListener("mouseup", event -> {  // Draws box + selection of boxes

    Element boundingBoxResult2 = ElementFactory.createDiv();
    element.appendChild(boundingBoxResult2);

    JsonObject evtData2 = event.getEventData();

    endX = evtData2.getNumber("event.x");
    endY = evtData2.getNumber("event.y");
    boundingBoxResult2.setAttribute("end-x", String.format("%f", endX));
    boundingBoxResult2.setAttribute("end-y", String.format("%f", endY));

    double xcoordi = 0;
    double ycoordi = 0;
    double boxWidth = 0;
    double boxHeight = 0;

    for (int i = boxCount; i < arrayBoxes.size(); i++) {
        System.out.println(endX);
        System.out.println(endY);
        arrayBoxes.get(boxCount).setEndX(endX);
        arrayBoxes.get(boxCount).setEndY(endY);
        if (arrayBoxes.get(i).getYcoordi() != arrayBoxes.get(i).getEndY()) {  // If startY and endY is the same, means user selected a box and not drew a box
            arrayBoxes.get(boxCount).setWidth(endX, arrayBoxes.get(boxCount).xcoordi);
            arrayBoxes.get(boxCount).setHeight(endY, arrayBoxes.get(boxCount).ycoordi);
            xcoordi = arrayBoxes.get(boxCount).getXcoordi();
            ycoordi = arrayBoxes.get(boxCount).getYcoordi();
            boxWidth = arrayBoxes.get(boxCount).getWidth();
            boxHeight = arrayBoxes.get(boxCount).getHeight();
            boxCount++;

            context.beginPath();
            context.setStrokeStyle("green");
            context.setLineWidth(2);
            context.strokeRect(xcoordi, ycoordi, boxWidth, boxHeight);
            context.stroke();
            context.fill();

        } else {
            if (arrayBoxes.size() > 0) {
                arrayBoxes.remove(arrayBoxes.size() - 1);
                mouseSelect = true;

                SelectBox select = new SelectBox(endX, endY);
                selectBoxes.add(0, select);
            }
        }
    }

    if (mouseSelect == true) {
        int selectedBox = 0;
        for (int i = 0; i < arrayBoxes.size(); i++) {
            if (arrayBoxes.get(i).getXcoordi() < selectBoxes.get(0).getSelectX() &&  selectBoxes.get(0).getSelectX() < arrayBoxes.get(i).getEndX())
                if (arrayBoxes.get(i).getEndY() > selectBoxes.get(0).getSelectY() && selectBoxes.get(0).getSelectY() > arrayBoxes.get(i).getYcoordi()) {
                    System.out.println("Selected Box Name: " + arrayBoxes.get(i).boxname);
                    selectedBox = i;

                    mouseSelect = false;
             }
             else {
             mouseSelect = false;
             }
        }
        context.beginPath();
        context.setStrokeStyle("yellow");
        context.setLineWidth(2);
        context.strokeRect(arrayBoxes.get(selectedBox).getXcoordi(), arrayBoxes.get(selectedBox).getYcoordi(), arrayBoxes.get(selectedBox).boxWidth, arrayBoxes.get(selectedBox).boxHeight);
        context.stroke();
        context.fill();

    }


    System.out.println(arrayBoxes.toString());

    mouseMoveListeners.forEach(Runnable::run);

}).addEventData("event.x").addEventData("event.y");

MainLayout.java: 

public class MainLayout extends Div {

    private CanvasRenderingContext2D ctx;
    private Canvas canvas;
    ArrayList<MousePosition> mousePosArray = Canvas.getMousePosArray();
    ArrayList<BoundingBox> bb = Canvas.getArrayBoxes();
    public static int count = 0;

Button submitButton = new Button("Submit");
submitButton.addClickListener(event -> {
    bb.get(Canvas.boxCount - 1).setName(boxname.getValue());
    bb.get(Canvas.boxCount - 1).setBoxcategory(boxcategory.getValue());
    boxname.clear();
    boxcategory.clear();
    System.out.println(bb.toString());

    System.out.println("Box Count: " + Canvas.boxCount);

});
add(submitButton);
submitButton.addClassName("submitButton");

Любая помощь очень ценится, спасибо!

1 Ответ

0 голосов
/ 21 декабря 2018

Может быть просто метод в вашем Canvas для рисования текста 

submitButton.addClickListener(event -> {
    BoundingBox box = bb.get(bb.size() - 1);
    box.setName(boxname.getValue());
    box.setBoxcategory(boxcategory.getValue());
    Canvas.redrawBox(box);
    boxname.clear();
    boxcategory.clear();
}

И в Canvas.java 

public static void redrawBox(BoundingBox box) {
    // Insert real code to draw text here
    context.doSomething(box.getName());
}
...