Javascript Drawing Tool using SVG or Canvas

Állapot: Closed
Díj: $231
Beérkezett pályamű: 8
Nyertes: scrufDev

Winner

A verseny összegzése

I need a drawing tool for drawing and editing the following shapes:
Rectangles, L-shapes, and U-shapes.
PLEASE SEE THE ATTACHED IMAGES FOR BETTER IDEA OF THE SHAPES I'M EXPECTING

***************************
PLEASE READ ALL THE INSTRUCTIONS VERY CAREFULLY BEFORE SPENDING TIME.
IF SOMETHING IS NOT CLEAR: DON'T GUESS, JUST ASK
THIS PROJECT IS NOT FOR BEGINNER
**************

Please see the attached video for the reference. It does not have to be exact, however here are the main requirements for the functionality:
1. Must be supported by latest browsers.
2. The tool must function with both mouse on the desktop and on touch on mobile devices.
3. The drawing turns should be snapped to 45 and 90 degrees.
4. You must be able to save and load drawn shapes to the Javascript Object (No server-side needed at this point)
5. While you draw or resize, the dimensions labels should change their values.
6. When you click on the size label, you should be able to enter the value manually.
7. There should be the ability to rotate the shapes after they are drawn.
8. The user must be able to draw more than one shape.
9. No heavy libraries. (jQuery an/or additional libraries up to 200-300kb is fine). Before considering any additional libraries, please check with me.
10. Keep in mind that this tool will need to be extended later. I would need to add a few different options for each side of the shape(s) as well as their corners. For example: Change color of the side or set a different radius of each corner individually (Different colors or corners on one shape)

There is a good potential for the winning contestant to continue working on this project for additional compensation.

A few libraries to consider:
Konva.js https://konvajs.github.io/
Interact.js http://interactjs.io/
I have included some very early stage prototypes with them.

AGAIN, IF YOU ARE NOT SURE ABOUT SOME SIDES OF THE PROJECT, PLEASE CONTACT ME BEFORE YOU EVEN START. DON'T WASTE YOUR TIME!

*******UPDATE*********
Just a bit of clarification on the external libraries:
I'm fine with using libraries under 300k or so.
Here are some libraries that I considered and think they are suitable for this project:
KonvaJS https://konvajs.github.io/ ( think this very capable and easy to use)
Interact JS http://interactjs.io/ (Using this library with vanilla Javascript using SVG drawing is very possible. In the attached example you will see the proof of that. Its is also easy to set/get/edit data for each SVG part as a polygon, line, rectangle, etc)
PaperJS http://paperjs.org/
FabricJS http://fabricjs.com/
Pixie JS http://www.pixijs.com/
MXGRAPH JS https://github.com/jgraph/mxgraph example: https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html
This one is overkill for this project and it is quite heavy, but I would consider it still.
I'm open to other suggestions.

Ajánlott készségek

JavaScript

Winner

Tegyen közzé egy hasonló versenyt

Munkaadói értékelés

“Very professional and knowledgeable. Great communications. Highly recommend!”

ashevillemnt, United States.

A verseny legjobb pályaművei

quinstonpimenta India

1
matrixace India

1
tassaduqvw Pakistan

0
webdevloper3 Bangladesh

0
tassaduqvw Pakistan

0
lavigarg999 India

0

További pályaművek

Nyilvános pontosítófelület

A verseny kiírója:
- 5 év telt el
I have decided to extend the contest for another 3 days.
There are not so many entries but some of them are very promising.
Hopefully, this extension would be helpful.
Please keep in mind that this contest is guaranteed, so one of you will definitely be awarded.

Thank you, everyone and happy coding!
- 5 év telt el
1. tassaduqvw
  - 5 év telt el
  Is the contest still up I can do more work if we have time.
  - 5 év telt el
tassaduqvw
- 5 év telt el
Please check my second Entry #10 for this contest
- 5 év telt el
scrufDev
- 5 év telt el
Hello,
thank you for extending the deadline.
Just letting you know that I'm working on it and will try to post a demo tomorrow or the day after. Doing it in Konva.js.

Best,
Bartek
- 5 év telt el
mrscynthiabuck
- 5 év telt el
I started working on my solution again when I saw that the contest was extended. I still haven’t finished it and cannot work on it during the holidays though. If the contest is extended again for a few more days I will probably be able to complete it. #extended
- 5 év telt el
1. A verseny kiírója:
  - 5 év telt el
  Synthia, please submit whatever you have done so far before the end of contest.
  I will give another week before I award someone. This way you will be able to finish your entry and send me the link after the end of contest.
  Thanks
  - 5 év telt el
carlosr4
- 5 év telt el
#extended
- 5 év telt el
tassaduqvw
- 5 év telt el
Hi I want to use Zim JS for this it is perfect for this app. but only draw back is it is 450 kb It has option to only enable the code that we are using so I can reduce the size let me know if that is ok? Zim plus Create JS both
- 5 év telt el
1. A verseny kiírója:
  - 5 év telt el
  This is the first time I ever heard of Zim JS.
  If you think it can handle this task very well, I would say go for it.
  Please keep in mind that it has to work on mobile devices as well.
  Thanks
  - 5 év telt el
2. tassaduqvw
  - 5 év telt el
  yes it will work on mobile too I will start uploading today
  - 5 év telt el
deathWasp271
- 5 év telt el
Hi,
I just saw your contest, and I had a few questions.
1) You only want support in the browser, right? Even on mobile device?
2) Can you specifiy what you mean by "labels"? Do you want them attached to edges, corners or the shape itself?
- 5 év telt el
1. A verseny kiírója:
  - 5 év telt el
  Thanks for your question!
  Yes, mobile devices such as phones and tablets must work on this application.
  Please refer to the images I just uploaded for the idea of how labels should look.
  - 5 év telt el
ScottContina
- 5 év telt el
I have a question:
When you say U-shapes, do you mean arcs?
- 5 év telt el
1. A verseny kiírója:
  - 5 év telt el
  Thanks for your question!
  Please refer to the images I just uploaded.
  - 5 év telt el
ScottContina
- 5 év telt el
This looks like something I did before. I am in.
- 5 év telt el
Grisha97924
- 5 év telt el
Yes, I am very interested in this contest.
I am talent Javascript library expert and I like best canvas library.
This is my skill as well as hobby. :) :D
Thanks.
- 5 év telt el
1. A verseny kiírója:
  - 5 év telt el
  Thanks!
  Looking forward to seeing your entry!
  - 5 év telt el
ckind
- 5 év telt el
Hi there, have you ever used draw.svg.js? I recently built a very similar drawing application with draw.svg.js that I would be happy to show you a demo of.
- 5 év telt el
1. A verseny kiírója:
  - 5 év telt el
  I've seen this library but haven't used it or looked closely.
  I would love o see a demo.
  Thanks
  - 5 év telt el
Grisha97924
- 5 év telt el
Sorry, I can't find konva work.
It is project for umbrella , seat, toilet, cafe and playground placement in seaside.
I have solved snap function similar to photoshop.
also I found collision disadvantage of konvaJS, so counted and used corner point collision without using interaction of konva.
Thanks.
- 5 év telt el
1. A verseny kiírója:
  - 5 év telt el
  Thanks!
  I haven't looked at the Fabric.js library before, just saw a few basic examples.
  I just looked at some other code examples and I may have to agree with you that it may be a better tool for this purpose. It is more mature also.
  Are you interested in participating in this contest?
  - 5 év telt el
webdevangel
- 5 év telt el
did you see my prev work ?
- 5 év telt el
1. A verseny kiírója:
  - 5 év telt el
  Yes, It looks like you are very capable.
  I think you have a great potential to win this contest!
  - 5 év telt el
webdevangel
- 5 év telt el
I have many experience in KonvaJS, createJS, FabricJS, PaperJS.....
- 5 év telt el
Grisha97924
- 5 év telt el
Thanks fir your reply.
I think It is enough to use FabricJS only for function what you need.
I have worked in spa design project by using KonvaJS.
But Fabric is more powerful and possible customizing.
FabricJS is TOP. :):D
Thanks.
- 5 év telt el
1. A verseny kiírója:
  - 5 év telt el
  In all the examples I've seen with Fabric, the transformation of the shapes is very basic, it only allows to scale the shape proportionally. This is not what I'm looking for. I assume it is possible to do the custom shapes with custom resizing, right?
  Is it possible to see that spa design project you've done with KonvaJS?
  - 5 év telt el
quinstonpimenta
- 5 év telt el
Hello, I spent some time solving this problem as I found it very interesting. I have linked what I cooked up below. I'll try to finish the whole thing if you think the progress is apt. Let me know your thoughts: http://quinston-drawing-tool.s3-website-us-west-2.amazonaws.com/
- 5 év telt el
1. A verseny kiírója:
  - 5 év telt el
  Thank you so much!!! Looks VERY PROMISING!
  I would love for you to continue.
  - 5 év telt el
Grisha97924
- 5 év telt el
Hello
I think there is simple solution for L shape and U shape
First draw rectangle with fixed thick by drag and drop.(remember x0, y0, x1, y1)
Second for drag event, remove above rectangle, redraw polygon.
I have experience with similar work.
Regards
- 5 év telt el
1. A verseny kiírója:
  - 5 év telt el
  Thank you for your comment!
  I think that may work. Are you thinking about using FabricJS or some different library?
  - 5 év telt el
Grisha97924
- 5 év telt el
I attached fabricJS work capture.
https://drive.google.com/file/d/1JdaJTQ20TTsrSXdbucqsSWL5RK7lYvGZ/view?usp=sharing
In this project implemented customizing rotate anchor(limited in line)
I think It is possible and easy to draw U shape and L shape, Only needed some time.
Thanks.
- 5 év telt el
coolkj86
- 5 év telt el
Hi. What do you mean by the 3rd point?. The drawing turns should be snapped to 45 and 90 degrees. Does it mean rotating the shapes?
- 5 év telt el
1. A verseny kiírója:
  - 5 év telt el
  Hello, thanks for your question.
  I mean when you draw a shape let say from left to right and then want to draw it down, your drawing should either go down by 90 degrees or 45 degrees, nothing in between.
  - 5 év telt el
MiniFliper
- 5 év telt el
Hi. This is a simple drawing application I did some time ago using Animate CC + CreateJS:
https://codepen.io/joao-cesar/full/REbzXB

Does this platform and this library work for you?

Thanks!
- 5 év telt el
1. A verseny kiírója:
  - 5 év telt el
  Thank you for your comment and example.
  I have looked at the CreateJS library before. I just haven't seen any examples with anything close to what I'm trying to acheive.
  It is also on the hevier side, but I can live with that.
  You need to keep in mind theses things:
  All the shapes must be accessible as objects with the ability to modify, save and load them. Also, the shape resizing is non-stadard (reffer to the video example)
  - 5 év telt el
webdevangel
- 5 év telt el
Hello ! thank you for your post.
I have read the your description carefully.

I have the sufficient experience(more 5 years) in developing of web app/hybrid app(animation, game, drag/drop, editing/processing image, drawing diagram, painting/drawing tool, html5 flipbook and audio playing) with javascript and html5 and also in tag animation with CSS, jquery and javascript on multi device.
you can see many drawing tool with konvaJS on my portfolio.
thanks.
- 5 év telt el
1. A verseny kiírója:
  - 5 év telt el
  Thank you for your comment!
  Which of the tools in your portfolio are done with Konva.js?
  Are you going to participate in this contest?
  - 5 év telt el
mattsrinc
- 5 év telt el
#increaseprize at least 3x (without using libraries? Then even more for the effort). And without #guaranteed few good proposals if at all will be entered.
- 5 év telt el