Completed

javascript drawing tool based on svg-edit

This project was successfully completed by kaminarihp for $250 USD in 8 days.

Get free quotes for a project like this
Employer working
Completed by:
Skills Required
Project Budget
$10 - $300 USD
Completed In
8 days
Total Bids
4
Project Description

!! This is excerpt of of requirement. Please check the attached pdf for full details !!

Overview
I'd like to have a javascript 2D vector drawing tool to be used on our web site. Searching around, I found great svg-edit project ([url removed, login to view]) which has majority of features that I would need in the long term future. Indeed it has too rich features that it is quite complex for non-experts. I wish to have much simpler GUI and simpler tools so that normal people can enjoy casual drawings/scribblings. And I’d like to add a few extra features to serve my purpose.

Features
Develop non-self-intersecting path tool plug-in
I would like to have a special version of tool similar to svg-edit’s path tool, proving capability to draw and edit polygon (closed path) which does not self-intersect and always located within the canvas area.

Develop straight line pencil tool plug-in
I’d like to have a pencil tool based on svg-edit’s pencil tool (#tool_fhpath). This new tool should only produce line commands (whereas the original pencil tool produce curve commands).

Develop simplified GUI of svg-edit 2.6
#tools_left: Among many drawing tools that svg-edit offers, I would only need “Select Tool”, “Straight line pencil tool” and “Non-self-intersecting path tooll” described above. Please hide other tools such as Line tool, Rectangle tool, Ellipse tool, Path tool, Shape library, Text tool, Image tool, Zoom tool and Eye dropper tool.

Extend [url removed, login to view] and prepare example html
I’d like to use this drawing tool to be embedded in a web page as iframe just like svg-edit’s embedapi.html.
Upon initilization, I’d like to have following default values to be set: Stroke color: ff0000, Stroke width: 4, etc
I’d like to have a special functions that set stroke width, stroke color and fill color of all path objects in svg at once (to be defined by extending [url removed, login to view]). Another special function I’d like to have is to get node positions of all path objects in SVG in this JSON format.

What you provide as a developer:
* Review the requirement document and provide feedback
* Frequent (once in two days) short status update about what you did and what you are working on
* [url removed, login to view] to demenstrate this new 2D vector drawing tool embeded as iframe, some ’s to demenstrate change of stroke width/color and fill color change of all path objects, a to show all path node positions in JSON string.
* all javascript (and other) codes to make [url removed, login to view] work in non-minified format
* all javascript (and other) codes to make [url removed, login to view] work in minified format
* test codes

Requirements
Use svg-edit 2.6 as the basis of the tool
[url removed, login to view]
(It is nice if the tool is built on top of svg-edit 2.6 without modifying original code so that it would be easier to upgrade base svg-edit version later.)
Please add reasonable amount of comments in the code so that I can maintain and further develop the code.

Notes
All the outcome of the project belong to the project manager. I’d be happy to discuss if any part of the development would be benefitial to contribute back to the original svg-edit project. If we reach agreement, you could make contributions in your name.
As I plan to run business utilizing this tool, there might be opportunities for more projects in the future to add new features.

Length: I’d expect the project to complete in three weeks; 1st week to review requirment and develop plug-in tools, 2nd week to develop GUI, 3rd week to debug and complete the project.
Budget: $300
Milestone payments:
1st milestone: 5% for review requirements, provide feedback and agree project details
2nd milestone: 20% for submitting plug-in tools for testing
3rd milestone: 25% for submitting overall product for testing
4th milestone: 50% for completing the project

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online