Как показать анимацию перетаскивания при рисовании рамок на холсте в Java? - PullRequest
Новая
       43

Как показать анимацию перетаскивания при рисовании рамок на холсте в Java?

0 голосов
/ 30 ноября 2018

У меня есть холст, и я использую прослушиватели событий мыши для рисования блоков.Тем не менее, поля будут отображаться только при использовании 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");

}

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

1 Ответ

0 голосов
/ 30 ноября 2018

Вы можете создать mousemove -eventlistener в событии mousedown и снова удалить этого слушателя в событии mouseup.Это делается для того, чтобы не всегда был активен прослушиватель событий mousemove, когда он не нужен.

В обработчике событий mousemove нарисуйте контур прямоугольника с x1 / y1 из позиции mousedown и x2 / y2 изтекущее положение мыши.Всегда удаляйте / повторно используйте контур прямоугольника из последнего события mousemove, чтобы всегда присутствовал только один такой контур прямоугольника.

Я не знаю, как сделать контур прямоугольника на холсте, но вижу, какВы работали с этим некоторое время (см. другие ваши вопросы: D) Я полагаю, вы знаете, как это сделать.

...