generate texture out of drawn rectangle with pixi react and customComponentss

[CamO]

Hello I am trying to generate a texture. from a drawn rectangle, I have used many examples while searching but its either.not drawing or giving an error how can i do it? Btw it will be inside the Shape custom component

 

 

const Father = () => {
    const [drawScale, setDrawScale] = useState("rectangle")
    const [elements, setElements] = useState([{
        id: 1,//elements.length===0 ? 1 : Math.max(...elements.map(elements => elements.id))+1, 
   
        pts: [
            { x: 0, y: 0 },
            { x: 300, y: 0 },
            { x: 300, y: 100 },
            { x: 0, y: 100 },
        ],
        x: 100,
        y: 100,
      
    }
    ])
return(
 <div id="main" style={{ position: 'absolute', height: '100%', width: '100%', overflow: "hidden", background: "linear-gradient(#232526,#414345)" }}>
            <div className="designScreen">
                <Stage
                    width={width}
                    height={window.innerHeight * 8.67 / 10}
                    options={{ antialias: true, resolution: window.devicePixelRatio || 1, autoResize: true, backgroundColor: 0x000000,  /*sharedTicker: true,   autoStart: false,*/ }}>
                    {
                        elements.map((el, i) => {
                            return < Child
                                id={el.id}
                                pts={el.pts}
                                elements={elements}
                                x={el.x}
                                y={el.y}
                                fn)}
                               
                                i={i}
                              

                            />

                        })


                    }

                </Stage>
            </div>
        </div>
)

}


const Child = (props) => {

    React.useEffect(() => {
      
     

    });

 


    const Cont = PixiComponent('Cont', {
        create() { return new Container() },
        applyProps: (c, _, props) => {
            const { pts, fill, inter,x,y } = props;
            c.interactive = inter
            c.name = { name: "cont" }
            c.position.x=x
            c.position.y=y
         


        },
    });

    


    const Shape = PixiComponent('Shape', {
        create() { return new Graphics() },
   
        applyProps: (g, _, props) => {
            const { pts, x, y, fill, transNum } = props;
            g.name = { name: "Shape", trans:transNum, pts:pts }
         

return (
       
            <ACont 
             inter={true} 
             x={props.x}
             y={props.y}>
                <AShape
                    pts={[...(String(props.pts.map(el => String([el.x, el.y]))).split(',')).map(el 
=> parseFloat(el))]}
                    fill={0xffffff}
                    transNum={props.transformer}
                />




            </ACont>
        
        
    )
}


export default Father

 

Edited June 13, 2020 by CamO