0
149
ViewsPixiJS: Dibujar línea con mousemove
Pixijs, estoy tratando de dibujar una sola línea usando OnMouseMove(), mi problema es que cada vez que muevo el mouse, deja un rastro
mi progreso 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); }; 
lo que necesito, cualquier ayuda
·
Juan Pablo Isaza
1 answers
Answer question0
Cambié un poco tu código: https://codepen.io/domis86/pen/LYOYrVx
puntos principales:
- ver el uso de la variable
isMouseButtonDown -
sprite.clear();ejecutado enonMouseMove, por lo que en cada movimiento, las propiedades del objeto Graphics se restablecen y se dibuja una línea. Anteriormente, en cada movimiento, se "agregaba" una nueva línea al objeto Graphics usandosprite.moveToysprite.lineTo. -
sprite = new PIXI.Graphics();se ejecuta enonMouseDownen lugar deonMouseUp. De esta manera, creamos un nuevo objeto Graphics (una "línea") cuando se hace clic con el mouse; es un comportamiento más natural, en mi opinión. - Cambie el nombre de su
spritevariable porque sugiere que se trata de un Sprite ( https://pixijs.download/dev/docs/PIXI.Sprite.html ) pero en realidad es Graphics :) Por lo tantolineographicsserían nombres más adecuados en mi humilde opinión;)
·
Juan Pablo Isaza
Report
Answer question