Estoy tratando de implementar un diseño bastante complejo en Konva. Necesito un comportamiento similar a este codepen . Tengo varias formas, y cada vez que empiezo a arrastrar cualquiera de ellas, todas las formas subyacentes deben arrastrarse con ella. Sin embargo, en el codepen, en aras de la simplicidad, esta lógica solo se implementa para el rectángulo superior (rojo).
Así es como pensé que iba a funcionar.
mousedown , cree dinámicamente un grupo arrastrable, incluya todas las formas necesariasdragend , desagrupar elementos La demostración parece funcionar bien, pero el problema es que el group siempre tiene una posición igual a (0, 0) , donde sea que esté en el momento en que comencé a arrastrar. Puede arrastrar el rectángulo rojo por un tiempo, luego abrir su consola y ver {x: 0, y: 0} . Pero, ¿cómo hago para que tenga coordenadas relativas a la capa?
Lo necesito porque a veces, cuando termina el arrastre, necesito animar el movimiento de todo el grupo a una ubicación específica, y el hecho de que la posición inicial del grupo siempre sea (0, 0) dificulta calcular la posición de destino.
Las posiciones de todos los nodos en Konva son relativas. Y por defecto, la posición de cada nodo es {0, 0} .
Cuando crea un grupo, puede establecer otra posición para él. Pero recuerde que es posible que deba ajustar las posiciones de todos los niños (rectángulos) porque sus posiciones serán relativas al grupo movido.
Además, puede iniciar el arrastre de rectángulos manualmente, sin grupo.
r1.on('mousedown', () => { r1.startDrag(); r2.startDrag(); r3.startDrag(); });