Question

0

146

Views

PixiJS: Draw line with mousemove

Pixijs I'm trying to draw a single line using OnMouseMove(), my problem is that everytime I move the mouse It leaves a trail

my progress codepen

var sprite = new PIXI.Graphics();
let initPointer = null;

const onMouseMove = (e) => {
  if (initPointer == null) return;
  sprite.lineStyle(2, 0xff0000, 1);
  sprite.moveTo(initPointer.x, initPointer.y);

  const mousePosRef = getMousePos(e);
  sprite.lineTo(mousePosRef.x, mousePosRef.y);
  console.log(sprite);

  annoRef.addChild(sprite);
  sprite = new PIXI.Graphics();
};
const onMouseDown = (e) => {
  const mousePosRef = getMousePos(e);
  initPointer = mousePosRef;
  // sprite.moveTo(initPointer.x, initPointer.y);
};

what I need, any help

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T15:49:32.217Z

Changed your code a little bit: https://codepen.io/domis86/pen/LYOYrVx

main points:

see isMouseButtonDown variable usage
sprite.clear(); executed in onMouseMove - so on each move the Graphics object properties are resetted and one line is drawn. Previously on each move new line was "added" to Graphics object using sprite.moveTo and sprite.lineTo.
sprite = new PIXI.Graphics(); is executed in onMouseDown instead of onMouseUp. This way we create new Graphics object (a "line") when mouse is clicked - is more natural behaviour IMO.
Please rename your variable sprite because it suggests this is a Sprite ( https://pixijs.download/dev/docs/PIXI.Sprite.html ) but in reality it Graphics :) So line or graphics would be more suitable names IMHO ;)

0

146

PixiJS: Draw line with mousemove

1 answers

0

Find remote jobs

Andres GPT