如何在Java中在画布上绘制方框时显示拖动动画

Question

我有一个画布，正在使用鼠标事件侦听器绘制框。然而，这些框只会出现在mouseUp上，但我希望这些框在绘制时显示出来，这样用户就可以看到他们绘制的框的大小。

这是我的mouseDown和mouseUp代码：

public Canvas(int width, int height) {
element = getElement();
element.addEventListener("mousedown", event -> {  // Retrieve Starting Position on MouseDown
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(0, xBox, yBox, 0.0, 0.0);
arrayBoxes.add(newBox);
isDrawing = true;
mouseIsDown=true;

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

element.addEventListener("mouseup", event -> {  // Draw Box on MouseUp
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 = 0; i < arrayBoxes.size(); i++) {
arrayBoxes.get(i).setName(i + 1);
arrayBoxes.get(i).setWidth(endX, arrayBoxes.get(i).xcoordi);
arrayBoxes.get(i).setHeight(endY, arrayBoxes.get(i).ycoordi);
xcoordi = arrayBoxes.get(i).getXcoordi();
ycoordi = arrayBoxes.get(i).getYcoordi();
boxWidth = arrayBoxes.get(i).getWidth();
boxHeight = arrayBoxes.get(i).getHeight();
}
mouseIsDown=false;
context.beginPath();
context.setFillStyle("limegreen");
context.setLineWidth(2);
context.strokeRect(xcoordi, ycoordi, boxWidth, boxHeight);
context.fill();
System.out.println(arrayBoxes.toString());
}).addEventData("event.x").addEventData("event.y");
}

非常感谢您的帮助，谢谢！

Answer 1

您可以在mousedown事件中创建mousemove-eventlistener，并在mouseup事件中再次删除该listener。这样做是为了在不需要mousemove事件侦听器时，它并不总是处于活动状态。

在mousemove事件侦听器中，绘制一个矩形的轮廓，其中x1/y1位于鼠标向下位置，x2/y2位于当前鼠标位置。始终从上一个mousemove事件中删除/重用矩形轮廓，因此始终只存在一个这样的矩形轮廓。

_{我不知道如何在画布上绘制矩形轮廓，但看看你是如何使用它一段时间的(见你的其他问题：D(我想你知道如何做到这一点}