React Konva Group
unknown
plain_text
4 years ago
1.6 kB
14
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...