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