Fabricjs canvas - 27/04/2018 04:00 EDT

In Progress Posted 5 years ago Paid on delivery
In Progress 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).

CSS HTML JavaScript jQuery / Prototype PHP

Project ID: #16797855

About the project

6 proposals Remote project Active 5 years ago

6 freelancers are bidding on average €176 for this job

rightbigboss

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

€155 EUR in 3 days
(92 Reviews)
7.3
dulangab

Have similar experience in designing html5 cad canvas with drawing shapes (like lines and circles etc) with undo redo move etc support

€133 EUR in 3 days
(1 Review)
1.8
maxlogix4

"Hi, Hope you are doing well! Thanks for sharing your project requirement with us. It will be our great pleasure to work on your project. I have checked your requirement, yes we can do it, because we already work on si More

€208 EUR in 7 days
(0 Reviews)
0.0