java - 如何在 Vaadin 画布上单击提交按钮时填充文本?
问题描述
我有一个允许绘制边界框的画布。在 mouseDown 函数中,起始 xy 坐标作为对象被推入数组,而在 mouseUp 侦听器上,即当实际绘制盒子时,一旦绘制,它将访问相同的数组并编辑宽度和高度等值。在我的 MainLayout 中,我有一个提交按钮,用于将框名称传递到相同的对象数组中。但是,我现在要做的是,一旦单击提交按钮,框名称就会出现在框的顶部(使用 fillText)。我尝试将 fillText 放在我的 mouseUp 侦听器中,但它不起作用,因为在用户单击提交之前尚未传递框名称。
这是我在 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");
主布局.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");
非常感谢任何帮助,谢谢!
解决方案
也许只是画布中绘制文本的一种方法
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());
}
推荐阅读
- c - cs50 现金没有返回所需的输出
- xml - 为什么 xsl:for-each-group 缺少一些元素?
- azure - Azure DevOps 版本 - 如何在特定虚拟机上执行测试阶段?
- pandas - Pandas 数据框,从 groupby 中过滤掉值
- sharepoint - 使用 ngrok 将 SPFX WebPart 隧道传输到 BrowserStack
- vba - 有没有办法将 Excel VBA 转换为作为 Excel 脚本运行(Excel 在线自动化)?
- python - 按第一个值过滤元组列表并使用 list comp 检查元组中是否存在第二项
- git - 无法存储在 SourceTree 中
- c++ - C ++ while循环未提供预期结果
- date - 过去 12 个月的员工总数