React Konva Group

 avatar
unknown
plain_text
4 years ago
1.6 kB
10
Indexable
const [facebookSocmed, setFacebookSocmed] = useState({
        isDragging: false,
        x: 300,
        y: 380,
        fontSize:15,
        color: "#000000",
        fontWeight: "600",
        fontStyle: "normal",
        fontFamily:"'Arial'"
});

const [linkedinSocmed, setLinkedinSocmed] = useState({
        isDragging: false,
        x: 300,
        y: 350,
        fontSize:15,
        color: "#000000",
        fontWeight: "600",
        fontStyle: "normal",
        fontFamily:"'Arial'"
});

<Group 
    draggable
    onDragEnd={e => {
        setFacebookSocmed({
            ...facebookSocmed,
            isDragging: false,
            x: e.target.x(),
            y: e.target.y(),
            fontSize: facebookSocmed.fontSize
        });
        setFacebookIcon({
            ...facebookIcon,
            isDragging: false,
            x: e.target.x(),
            y: e.target.y(),
            width: facebookIcon.width,
            height: facebookIcon.height
        });
    }}
    >
    <Text
        text="Facebook ID"
        x={facebookSocmed.x}
        y={facebookSocmed.y}
        fontSize={facebookSocmed.fontSize}
        fontFamily={facebookSocmed.fontFamily}
        fontStyle={facebookSocmed.fontWeight+' '+facebookSocmed.fontStyle}
        fill={facebookSocmed.isDragging ? 'green' : facebookSocmed.color}
        name="object"
    />
    <KonvaImage
        x={facebookIcon.x}
        y={facebookIcon.y}
        image={facebookImg}
        width={facebookIcon.width}
        height={facebookIcon.height}
        name="object"
    />
</Group>
Editor is loading...