Fabricjs canvas - 27/04/2018 04:00 EDT
€30-250 EUR
Paid on delivery
Fabricjs canvas with the following features:
• Zoom in and out features: if canvas exceeds surrounding div element, scrolling bars appear accordingly. Image aspect ratio is always preserved. Zoom in/out is set by mousewheel.
• Undo and Redo features.
• On page load, ten red circles (named 1,2…,10) are displayed on top of canvas. Ten red circles on bottom (A,B…, J). Circles can’t be scaled by user. For each circle, a label with circle name is displayed. Fabricjs per-pixel drag and drop feature is granted for every circle.
• Canvas hosts 1 or 2 background images (overlapped with opacity parameter manually settable by user). Background images are uploaded by user. User can choose a background and bring it to front every moment.
• Circles 1 and 2 are linked by a line. The same for circles A and B.
• Circles 3,4,5 and 6 are linked by a cubic Bezier curve with handles (like this [login to view URL]). The same for circles C,D,E and F.
A side menu for object and properties management which:
• Lists all 20 circles. If a circle name is clicked on this list, its corresponding circle object on canvas changes color (green). If a circle is moved (dragged) on canvas, its corresponding circle name is highlighted on this list.
• lists background images and allows user to select a background and bring it to front.
• hosts a slider to set background images opacity (and corresponding feature)
• hosts a check button that allows user to show/hide circle labels (and corresponding feature)
• hosts undo and redo buttons and a list of events (and corresponding feature)
• hosts a button to remove selected object (and corresponding feature)
• hosts a print button to print canvas content (and corresponding feature)
• hosts a button to export canvas content as image (and corresponding feature)
• hosts a button to upload background image(s) (and corresponding feature)
• hosts a button to export canvas content as a JSON file (and corresponding feature)
• hosts a button to import JSON file to canvas (and corresponding feature)
• hosts a button to export XY coordinates of circles to txt file (and corresponding feature)
• hosts a button to import XY coordinates of circles from txt file and shows them accordingly on canvas
Important note: after file import, object properties and limitations must be preserved (e.g. as said above, circles can’t be scaled. So, this limitation must be preserved after import).
Project ID: #16797855
About the project
6 freelancers are bidding on average €176 for this job
Hello I can do it easily,and cheap price you want. It is really. and then,if you receive good result,I think we closely contact with each other. I wish help you make a perfect result as soon as possible. I am a th More
Have similar experience in designing html5 cad canvas with drawing shapes (like lines and circles etc) with undo redo move etc support