Javascript Drawing Tool using SVG or Canvas

  • État: Closed
  • Prix: $231
  • Propositions reçues: 8
  • Gagnant: scrufDev

Résumé du concours

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.

Compétences recommandées

Commentaire de l'employeur

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

Image de profil ashevillemnt, United States.

Meilleures propositions de ce concours

Afficher plus de propositions

Tableau de clarification publique

  • ashevillemnt
    Titulaire du concours
    • il y a 5 ans

    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!

    • il y a 5 ans
    1. tassaduqvw
      tassaduqvw
      • il y a 5 ans

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

      • il y a 5 ans
  • tassaduqvw
    tassaduqvw
    • il y a 5 ans

    Please check my second Entry #10 for this contest

    • il y a 5 ans
  • scrufDev
    scrufDev
    • il y a 5 ans

    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

    • il y a 5 ans
  • mrscynthiabuck
    mrscynthiabuck
    • il y a 5 ans

    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

    • il y a 5 ans
    1. ashevillemnt
      Titulaire du concours
      • il y a 5 ans

      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

      • il y a 5 ans
  • carlosr4
    carlosr4
    • il y a 5 ans

    #extended

    • il y a 5 ans
  • tassaduqvw
    tassaduqvw
    • il y a 5 ans

    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

    • il y a 5 ans
    1. ashevillemnt
      Titulaire du concours
      • il y a 5 ans

      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

      • il y a 5 ans
    2. tassaduqvw
      tassaduqvw
      • il y a 5 ans

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

      • il y a 5 ans
  • deathWasp271
    deathWasp271
    • il y a 5 ans

    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?

    • il y a 5 ans
    1. ashevillemnt
      Titulaire du concours
      • il y a 5 ans

      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.

      • il y a 5 ans
  • ScottContina
    ScottContina
    • il y a 5 ans

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

    • il y a 5 ans
    1. ashevillemnt
      Titulaire du concours
      • il y a 5 ans

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

      • il y a 5 ans
  • ScottContina
    ScottContina
    • il y a 5 ans

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

    • il y a 5 ans
  • Grisha97924
    Grisha97924
    • il y a 5 ans

    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.

    • il y a 5 ans
    1. ashevillemnt
      Titulaire du concours
      • il y a 5 ans

      Thanks!
      Looking forward to seeing your entry!

      • il y a 5 ans
  • ckind
    ckind
    • il y a 5 ans

    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.

    • il y a 5 ans
    1. ashevillemnt
      Titulaire du concours
      • il y a 5 ans

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

      • il y a 5 ans
  • Grisha97924
    Grisha97924
    • il y a 5 ans

    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.

    • il y a 5 ans
    1. ashevillemnt
      Titulaire du concours
      • il y a 5 ans

      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?

      • il y a 5 ans
  • webdevangel
    webdevangel
    • il y a 5 ans

    did you see my prev work ?

    • il y a 5 ans
    1. ashevillemnt
      Titulaire du concours
      • il y a 5 ans

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

      • il y a 5 ans
  • webdevangel
    webdevangel
    • il y a 5 ans

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

    • il y a 5 ans
  • Grisha97924
    Grisha97924
    • il y a 5 ans

    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.

    • il y a 5 ans
    1. ashevillemnt
      Titulaire du concours
      • il y a 5 ans

      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?

      • il y a 5 ans
  • quinstonpimenta
    quinstonpimenta
    • il y a 5 ans

    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/

    • il y a 5 ans
    1. ashevillemnt
      Titulaire du concours
      • il y a 5 ans

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

      • il y a 5 ans
  • Grisha97924
    Grisha97924
    • il y a 5 ans

    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

    • il y a 5 ans
    1. ashevillemnt
      Titulaire du concours
      • il y a 5 ans

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

      • il y a 5 ans
  • Grisha97924
    Grisha97924
    • il y a 5 ans

    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.

    • il y a 5 ans
  • coolkj86
    coolkj86
    • il y a 5 ans

    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?

    • il y a 5 ans
    1. ashevillemnt
      Titulaire du concours
      • il y a 5 ans

      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.

      • il y a 5 ans
  • MiniFliper
    MiniFliper
    • il y a 5 ans

    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!

    • il y a 5 ans
    1. ashevillemnt
      Titulaire du concours
      • il y a 5 ans

      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)

      • il y a 5 ans
  • webdevangel
    webdevangel
    • il y a 5 ans

    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.

    • il y a 5 ans
    1. ashevillemnt
      Titulaire du concours
      • il y a 5 ans

      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?

      • il y a 5 ans
  • mattsrinc
    mattsrinc
    • il y a 5 ans

    #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.

    • il y a 5 ans

Montrer plus de commentaires

Comment commencez des concours

  • Publiez votre concours

    Publiez votre concours Rapide et facile

  • Obtenez des tonnes de propositions

    Obtenez des tonnes de propositions De partout dans le monde

  • Attribuez la meilleure proposition

    Attribuez la meilleure proposition Télécharger les fichiers - Facile !

Publier un concours maintenant ou rejoignez-nous maintenant !