0

Hola como va? Estoy teniendo el siguiente inconveniente. Estoy tratando de hacer una linea desde un div hacía otro, el div desde donde sale la linea lo obtengo mediante la prop id(Que se setea cuando se retonar el jsx del div) y el div destino de la linea la obtengo mediante la prop sonOfId que es una prop que viene en el hijo que me determina quien es el padre Cabe aclarar que cada div tiene bien seteado el ID correspondiente y puedo obtener ambos elementos. Como también que las 2 cordenadas X e Y de ambos elementos me están llegando correctamente. Pero por algún motivo la linea no se renderiza

PD: Todo este componente esta envuelto en un map en el componente superior. El canvas esta en el componente superior.

PD2: Si pongo cordenadas manualmente funciona y renderiza la linea

import React, {createContext, useEffect } from 'react'

import { FamilyMemberCardProps, FamilyMemberContextProps } from '../../../interfaces/interfaces';
import styles from '../../../styles/style.module.css'
export const FamilyMemberContext = createContext({} as FamilyMemberContextProps);
const { Provider } = FamilyMemberContext;



export const FamilyMemberCard = ({children,familyMember,style,className}:FamilyMemberCardProps) => {
  let fatherElement:HTMLElement;
  let myElement:HTMLElement;
  let canvas:HTMLCanvasElement;

  if(familyMember.sonOfId){
    fatherElement  = document.getElementById(familyMember.sonOfId) as HTMLElement
    myElement = document.getElementById(familyMember.id) as HTMLElement
    if(fatherElement  && myElement){
    let {x:xMyElement,y:yMyElement} = myElement.getBoundingClientRect()
    let {x,y} = fatherElement.getBoundingClientRect()
    canvas = document.getElementById("linea1") as HTMLCanvasElement;
    if (canvas && canvas.getContext) {

        let ctx = canvas.getContext("2d");
        if (ctx) {
         console.log(`X en myElement ${xMyElement} Y en myElement ${yMyElement}`);
         console.log(`X en fatherElement  ${x} Y en fatherElement  ${y}`);
         ctx.lineWidth = 3;
         ctx.strokeStyle = "#f00";
         ctx.beginPath();
         ctx.moveTo(xMyElement,yMyElement);
         ctx.lineTo(x, y);
         ctx.stroke();
        }
      
      }
    }
  }

  return (
    
<Provider value={{
      
            familyMember
        }}>
    
            <div
            className={ `${styles.familyMemberCard} ${className}`}
            style={style}
            id={familyMember.id}
            >
                { children }
            </div>
        </Provider>
   
  )
}

Canvas

  <canvas id="linea1" width="255" height="255"></canvas>

Output de X e Y de ambos elementos

Output de X e Y de ambos elementos

1 respuesta 1

0

Pensé que tal vez era algo de redondear las cordenadas al pasarselas al lineTo y moveTo, por lo que agregue un Math.round en cada una de las cordenadas y tampoco funciono.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.