Javascript Drawing Tool using SVG or Canvas

  • Κατάσταση: Closed
  • Βραβείο: $231
  • Ληφθείσες Συμμετοχές: 8
  • Νικητής: scrufDev

Σύνοψη Διαγωνισμού

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.

Προτεινόμενες Δεξιότητες

Winner
Προεξέχοντες Διαγωνισμοί
Ανάρτηση Παρόμοιου Διαγωνισμού

Σχόλια Εργοδότη

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

Εικόνα προφίλ ashevillemnt, United States.

Κορυφαίες καταχωρήσεις από αυτόν τον διαγωνισμό

Προβολή Περισσότερων Συμμετοχών

Δημόσιος Πίνακας Διευκρινίσεων

  • ashevillemnt
    Κάτοχος Διαγωνισμού
    • Πριν από 5 χρόνια

    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 χρόνια
    1. tassaduqvw
      tassaduqvw
      • Πριν από 5 χρόνια

      Is the contest still up I can do more work if we have time.

      • Πριν από 5 χρόνια
  • tassaduqvw
    tassaduqvw
    • Πριν από 5 χρόνια

    Please check my second Entry #10 for this contest

    • Πριν από 5 χρόνια
  • scrufDev
    scrufDev
    • Πριν από 5 χρόνια

    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 χρόνια
  • mrscynthiabuck
    mrscynthiabuck
    • Πριν από 5 χρόνια

    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 χρόνια
    1. ashevillemnt
      Κάτοχος Διαγωνισμού
      • Πριν από 5 χρόνια

      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 χρόνια
  • carlosr4
    carlosr4
    • Πριν από 5 χρόνια

    #extended

    • Πριν από 5 χρόνια
  • tassaduqvw
    tassaduqvw
    • Πριν από 5 χρόνια

    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 χρόνια
    1. ashevillemnt
      Κάτοχος Διαγωνισμού
      • Πριν από 5 χρόνια

      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 χρόνια
    2. tassaduqvw
      tassaduqvw
      • Πριν από 5 χρόνια

      yes it will work on mobile too I will start uploading today

      • Πριν από 5 χρόνια
  • deathWasp271
    deathWasp271
    • Πριν από 5 χρόνια

    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 χρόνια
    1. ashevillemnt
      Κάτοχος Διαγωνισμού
      • Πριν από 5 χρόνια

      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 χρόνια
  • ScottContina
    ScottContina
    • Πριν από 5 χρόνια

    I have a question:
    When you say U-shapes, do you mean arcs?

    • Πριν από 5 χρόνια
    1. ashevillemnt
      Κάτοχος Διαγωνισμού
      • Πριν από 5 χρόνια

      Thanks for your question!
      Please refer to the images I just uploaded.

      • Πριν από 5 χρόνια
  • ScottContina
    ScottContina
    • Πριν από 5 χρόνια

    This looks like something I did before. I am in.

    • Πριν από 5 χρόνια
  • Grisha97924
    Grisha97924
    • Πριν από 5 χρόνια

    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 χρόνια
    1. ashevillemnt
      Κάτοχος Διαγωνισμού
      • Πριν από 5 χρόνια

      Thanks!
      Looking forward to seeing your entry!

      • Πριν από 5 χρόνια
  • ckind
    ckind
    • Πριν από 5 χρόνια

    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 χρόνια
    1. ashevillemnt
      Κάτοχος Διαγωνισμού
      • Πριν από 5 χρόνια

      I've seen this library but haven't used it or looked closely.
      I would love o see a demo.
      Thanks

      • Πριν από 5 χρόνια
  • Grisha97924
    Grisha97924
    • Πριν από 5 χρόνια

    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 χρόνια
    1. ashevillemnt
      Κάτοχος Διαγωνισμού
      • Πριν από 5 χρόνια

      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 χρόνια
  • webdevangel
    webdevangel
    • Πριν από 5 χρόνια

    did you see my prev work ?

    • Πριν από 5 χρόνια
    1. ashevillemnt
      Κάτοχος Διαγωνισμού
      • Πριν από 5 χρόνια

      Yes, It looks like you are very capable.
      I think you have a great potential to win this contest!

      • Πριν από 5 χρόνια
  • webdevangel
    webdevangel
    • Πριν από 5 χρόνια

    I have many experience in KonvaJS, createJS, FabricJS, PaperJS.....

    • Πριν από 5 χρόνια
  • Grisha97924
    Grisha97924
    • Πριν από 5 χρόνια

    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 χρόνια
    1. ashevillemnt
      Κάτοχος Διαγωνισμού
      • Πριν από 5 χρόνια

      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 χρόνια
  • quinstonpimenta
    quinstonpimenta
    • Πριν από 5 χρόνια

    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 χρόνια
    1. ashevillemnt
      Κάτοχος Διαγωνισμού
      • Πριν από 5 χρόνια

      Thank you so much!!! Looks VERY PROMISING!
      I would love for you to continue.

      • Πριν από 5 χρόνια
  • Grisha97924
    Grisha97924
    • Πριν από 5 χρόνια

    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 χρόνια
    1. ashevillemnt
      Κάτοχος Διαγωνισμού
      • Πριν από 5 χρόνια

      Thank you for your comment!
      I think that may work. Are you thinking about using FabricJS or some different library?

      • Πριν από 5 χρόνια
  • Grisha97924
    Grisha97924
    • Πριν από 5 χρόνια

    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 χρόνια
  • coolkj86
    coolkj86
    • Πριν από 5 χρόνια

    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 χρόνια
    1. ashevillemnt
      Κάτοχος Διαγωνισμού
      • Πριν από 5 χρόνια

      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 χρόνια
  • MiniFliper
    MiniFliper
    • Πριν από 5 χρόνια

    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 χρόνια
    1. ashevillemnt
      Κάτοχος Διαγωνισμού
      • Πριν από 5 χρόνια

      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 χρόνια
  • webdevangel
    webdevangel
    • Πριν από 5 χρόνια

    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 χρόνια
    1. ashevillemnt
      Κάτοχος Διαγωνισμού
      • Πριν από 5 χρόνια

      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 χρόνια
  • mattsrinc
    mattsrinc
    • Πριν από 5 χρόνια

    #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 χρόνια

Προβολή περισσότερων σχολίων

Πώς να ξεκινήσετε με τους διαγωνισμούς

  • Δημοσιεύστε τον διαγωνισμό σας

    Αναρτήστε τον διαγωνισμό σας Γρήγορα και εύκολα

  • Λάβε ένα σωρό συμμετοχές

    Λάβετε Πολλές Συμμετοχές Από όλο τον κόσμο

  • Βραβεύστε την καλύτερη καταχώρηση

    Βραβεύστε την καλύτερη καταχώρηση Κατεβάστε τα αρχεία - Εύκολα!

Αναρτήστε ένα Διαγωνισμό Τώρα ή Ελάτε Μαζί Μας Σήμερα!