Fabric JS, Ionic, Angular - Attach Shadow to Object and Toggle Visibility
Budget: $95 – $135 USD
I have a project made in Ionic, Angular and Fabric JS where I have canvas and you can set background image and then add objects (icons) to the canvas. I am looking to add shadow object (attached svg) along with object (icons) and toggle their visibility.
1. Drop Icons + Shadow to the Canvas. The shadow should be aligned such that the bottom center of Shadow SVG aligns with the center of the ICON. Initially icon will be visible and Shadow will be hidden.
2. Once we click on the Icon object, the object details appear on bottom such as icon name, id and price. That details also contain "Delete" button where we delete the selected icon. So along side "Delete" button, I want "Shadow On/Off" button or toggle, which will make the visibility of shadow which was hidden as visible. I can also toggle that button to turn the shadow visibility off.
3. The shadow object should be resizable keeping its bottom center locked to icon center.
Attaching demp-img.jpeg for reference. Attaching shadow.svg as well.
1. Drop Icons + Shadow to the Canvas. The shadow should be aligned such that the bottom center of Shadow SVG aligns with the center of the ICON. Initially icon will be visible and Shadow will be hidden.
2. Once we click on the Icon object, the object details appear on bottom such as icon name, id and price. That details also contain "Delete" button where we delete the selected icon. So along side "Delete" button, I want "Shadow On/Off" button or toggle, which will make the visibility of shadow which was hidden as visible. I can also toggle that button to turn the shadow visibility off.
3. The shadow object should be resizable keeping its bottom center locked to icon center.
Attaching demp-img.jpeg for reference. Attaching shadow.svg as well.