如何在点击Vaadin画布上的提交按钮时填写文本？

Posted 2021-03-28

我有一个画布，允许绘制边界框。在mouseDown函数中，将起始xy坐标作为对象和mouseUp侦听器推送到数组中，即当框的实际绘图发生时，一旦绘制它，它将访问相同的数组并编辑宽度和高度的值等。在我的MainLayout中，我有一个提交按钮，用于将框名称传递到相同的对象数组中。但是，我现在要做的是在单击提交按钮后，框名称显示在框的顶部（使用fillText）。我已经尝试将fillText放在我的mouseUp监听器中，但它不起作用，因为在用户单击Submit之前尚未传递box名称。

这是我在Canvas.java中的mouseDown和mouseUp监听器：

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");

main layout.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");

非常感谢任何帮助，谢谢！

答案

也许只是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());
}