Redrawing line after mouse move

[KrzyZyb]

Hello,
i'm trying to create an efect of a line redrawing with mouse-move event, didn't found anything that could solve my problem in the documentation so maybe the community can show me where to dig. The effect i want to achieve:

1. No line visible
2. Mouseclick
3. The vector-line is created with one end anchored in the point of click and the second click tracking the pointer (so the line is dynamically redrawn during mouse-move-event)
4. (Optional) After second click the second end of the line is anchored in the point of click (No longer tracks the pointer).
5. Process resets after third click and we are back to pt.1.

[tenpaMk2]

Hi, @KrzyZyb .
I have created a similar logic, but maybe it does not match perfectly your case.
See my bowman example: tap-ui.ts .

constructor(private engine: Engine) {
  this.eventPubSuber = new Actor();

  let dragUI: ScreenElement;

  engine.input.pointers.primary.on("down", (event: PointerEvent): void => {
    if (dragUI) dragUI.kill(); // if you right-click, this process is needed.

    dragUI = new ScreenElement({
      pos: event.screenPos,
    });
    engine.add(dragUI);

    engine.input.pointers.primary.on("move", (event: PointerEvent): void => {
      const canvas = new Canvas({
        width: engine.drawWidth,
        height: 32, // must be 2^n
        draw: (ctx: CanvasRenderingContext2D) => {
          ctx.fillStyle = "red";
          const length = event.screenPos.distance(dragUI.pos);
          ctx.fillRect(0, 0, length, 32);
        },
      });
      dragUI.graphics.use(canvas);
      dragUI.anchor = new Vector(0, 0.5);

      const rotation = event.screenPos.sub(dragUI.pos).toAngle();
      dragUI.rotation = rotation;
    });
  });

  engine.input.pointers.primary.on("up", (event: PointerEvent): void => {
    if (!dragUI) return;
    dragUI.kill();

    engine.input.pointers.primary.off("move");

    this.eventPubSuber.emit(
      "brace",
      new BracingEvent(
        event.screenPos.distance(dragUI.pos),
        event.screenPos.sub(dragUI.pos).toAngle() + Math.PI
      )
    );
  });
}

This logic means ↓

1. If you press mouse down , dragUI is created and use canvas.
2. If you mouse move, canvas is redrawn.
3. If you mouse up , dragUI is killed.

Here is screenshot.

I hope this helps you❗

[KrzyZyb]

Thanks @tenpaMk2 this is kind of thing i was looking for! Should be enough for me to finish this. Thank You!