methodofaction / method-draw Goto Github PK
View Code? Open in Web Editor NEWMethod Draw, the SVG Editor for Method of Action
Home Page: http://editor.method.ac
License: MIT License
Method Draw, the SVG Editor for Method of Action
Home Page: http://editor.method.ac
License: MIT License
Line rm editor/method-draw.compiled.js removes compiled js file, so it is not put into method-draw directory.
$(COMPILED_JS):
java -jar $(CLOSURE) \
--compilation_level SIMPLE_OPTIMIZATIONS \
$(CLOSURE_JS_ARGS) \
--js_output_file $(COMPILED_JS)
rm editor/method-draw.compiled.js
Hi,
I am unable to pick the color from the image using method draw.
Could you please suggest.
Thanks & Regards,
Rajesh.
In Firefox 20.0.1 the drawing is placed totally wrong and in IE 10 it is not possible to set document size.
Could it run on a normal linux hosting @ LAMP server? Is there an installation manual? I couldn't find any. The projects awesome by the way! Keep up the good work and MIT license is the best, period! :)
Do we have any erasor tool?
Any help will be appreciated
Hi ,
the Editor has Problems to rotate ( i.e. circle) elements after
create New Document .
To reproduce:
http://editor.method.ac/
--> Draw Circle
--> Menu --> File --> New Document
--> Draw Circle
--> Try to rotate
I would be happy if this bug will be fixed .
kind regards
Michael
I used File / Open SVG... and when I try to select text object I can not edit text until I change the font from Null to a font listed... Then I can not see a cursor... Just a green translucent block over the text letters. Then I am able to change text. When Selecting a text object you can not edit by clicking the text or double clicking the block... it is treated like a text block object ... when hitting the Text Tool... it creates another text box instead... of editing the text box selected. Can I alter this in some way?
Hi,
Unfortunately, I am not able to get the "show grid" feature to work.
The grid is just not showing up.
I already digged into the code and tried to figure out the problem, but without any solution.
Any suggestions?
In Firefox, if I try to draw a line in the top left corner of the screen, the line is drawn starting from the center of the page. I have already tried with other browsers, and the problem does not exist, however, I have already tried to contact Firefox developers and they answer:
<<
The editor is buggy. It's using getScreenCTM or getCTM incorrectly. Contact the author and ask him or her to fix it.
(As you can see here: https://bugzilla.mozilla.org/show_bug.cgi?id=1029805 )
hello!
first, very good work!
i installed Method-data on my own server, and i test embedapi.html.
just: line 9, src="src/embedapi.js".
after that it work but i can't write any text using ipad virtual keyboard.
(strange because it's work with index.html)
an idea???
In Mac 10.6.8. Chrome Version 26.0.1410.65 and Windows7 Chrome Version 26.0.1410.64 m when drawing with pencil tool the line appears about 30 px above and 10px to the lef of the cursor. In Firefox works ok.
Turning on View Grid and Snap to grid only tick the options in the menu they appear to do nothing else.
Was working great until the latest Chrome update and now no menus or toolbars. Works fine in Firefox.
Uncaught TypeError: oa.createSVGPathSegLinetoAbs is not a function(anonymous function) @ method-draw.compiled.js:64
(anonymous function) @ method-draw.compiled.js:64(anonymous function) @ method-draw.compiled.js:70
lstr.js:26 Uncaught TypeError: Cannot read property 'appendChild' of undefined(anonymous function) @ lstr.js:26
Mark, great job with Method Draw. It's so easy to use! I just created a really awesome icon for my site with Method Draw. I used some of the included shapes from the shapes library. I see they're custom paths. Unfortunately when I tried to embed this icon in my page, the svg did not scale correctly. I embedded in my html using and set the width and height to 100px each, but the image was cropped instead of scaled. I also tried setting the values of the width and height attributes of the svg tag to '100%' but to no avail. I also tried removing the entire background group. What am I doing wrong?
Something strange happened today after my browser's update, official demo doesn't work too, I get these types of errors in console:
Uncaught TypeError: path.createSVGPathSegLinetoAbs is not a function(anonymous function) @ browser.js:56(anonymous function) @ browser.js:62(anonymous function) @ browser.js:181
svgutils.js:563 Uncaught TypeError: svgedit.browser.supportsSelectors is not a function(anonymous function) @ svgutils.js:563(anonymous function) @ svgutils.js:648
method-draw.js:47 Uncaught TypeError: svgedit.browser.isTouch is not a function(anonymous function) @ method-draw.js:47(anonymous function) @ method-draw.js:4135(anonymous function) @ method-draw.js:4141
contextmenu.js:59 Uncaught ReferenceError: methodDraw is not defined(anonymous function) @ contextmenu.js:59(anonymous function) @ contextmenu.js:68
ext-eyedropper.js:16 Uncaught ReferenceError: methodDraw is not defined(anonymous function) @ ext-eyedropper.js:16
ext-shapes.js:11 Uncaught ReferenceError: methodDraw is not defined(anonymous function) @ ext-shapes.js:11
ext-grid.js:15 Uncaught ReferenceError: methodDraw is not defined(anonymous function) @ ext-grid.js:15
76:57 Uncaught ReferenceError: svgCanvas is not defined
Linear gradients are not displayed when exporting to PNG because begin/end point coordinates are not set when creating the gradient. So instead of something like this:
<linearGradient id="svg_87" x1="0" y1="0" x2="1" y2="0">
...
</linearGradient>
the SVG source will only include this:
<linearGradient id="svg_87">
...
</linearGradient>
which when rendered as png does not display the gradient at all. The editor color fill menu, linear tab, does include the begin/end point parameters that need to be defined, but they don't make it into the svg source. See below:
If I set the coordinates by hand in the source code and then export the SVG to PNG, the gradient displays correctly.
When you choose icon from shape library, it only chooses it once. After that you cannot change it to another shape, as it doesn't open anymore.
When using image save... a popup windows displays the SVG... I have to use save SVG only to save file to my device. Is it possible to make adjustments in code to save to device storage the same as open SVG popup?
Hi,
When exporting artwork as a PNG any text on the canvas ends up miss-aligned (about 10% to the left of where it should be).
Any help appreciated. Thanks.
Hi Mark,
I had a look at http://editor.method.ac and I am really impressed by Method-Draw. It works wonderful both on a desktop and on iPad. I git cloned the source to /var/www/ on my server, but unfortunately it does not work properly. When I open http://localhost/Method-Draw/method-draw/ in my browser, I see the drawing canvas, menus and buttons, but nothing works. No rulers, nu menu options. Nothing. Did I forgot to do something? I have been looking for install and configuration documentation, but could not find any.
Shape library is not working.Once i have select the one shape, second time I am not able to select the other shape.
Im assuming the same for IE 9.
When i create a rectangular element I cannot click on another element of any type to select it. I can do this with other element types though (i.e. ellipse/line/pencil).
Hi,
When will be able import png o jpg files?
Thanks!
Hello,
I'm trying to make custom SVGs for the shape library specific to my business. The issue I'm having pertains to the small thumbnail previews in shapelib, in that they won't appear. Is this an issue that anyone has come across?
Thank you
After selecting a shape from "shape library", I can't get back to the shape selection menu.
Also, the "about this editor" link doesn't work
I am trying to use drag and drop with jquery dropable event but it is not working and getting error $.widget.extend is not a function since method-draw.compiled.js is using some Jquery UI functions how drag and drop will work ?
I've added fonts to the font library but when I use them and then try to save the image, what's shown on the save screen is a generic font - not the one I chose and that shows up on the canvas when I'm using it.
Here you can see that I've chosen the font - "Cookie" - and it shows up like it should on the canvas -
But when I click "File > Save Image" this what shows up on in the new "save" browser window -
Any help or suggestions would be MUCH appreciated!! Thank you!!
Hi
I try to set a background image with
svgCanvas.setBackground('', url) on the iFrame content;
But the image never appears. The same operation works fine with the original svg-editor.
The problem seems to be the white background that is added to the content as a default.
How can I get rid of this? Is there a way to configure the background? If I have to change the javascript files, how can I create the compiled version again?
Thanks for any help. I really like the method-draw editor, as it is much more usable on the iPad.
Regards
Daniel
I've been using a slightly modified version of Method-Draw in my application "RoboPaint" for nearly 3 years now as a way to create/edit/import/clean SVGs for painting with robots. Though It's vastly better than the likely now defunkt SVG-Edit project, it's far from perfect, and the project owners can likely not keep up with the issues.
It's been the best of times, it's been the worst of times. ;)
There have always things that work well and look great (the interface), and then things that are mostly unreliable or act very strangely (simple path shape bounds, unsimplified pencil path creation, random path position resets), and it's no wonder: The SVG standard is huge and complicated, and this work is based off of a giant legacy codebase with thousands of lines of code written while web standards they applied to kept changing.
A fork, of sorts. I've done a little research into Paper.js, an incredible "Swiss Army Knife of Vector Graphics Scripting.". On the outset, it seems like a perfect fit to systematically replace the flawed inner workings from SVG-Edit.
So says the readme:
The purpose of Method Draw is to improve the usability and user experience of SVG Edit.
And I think the project has done that in spades. It's clean, efficient, and nice to use, if only things actually worked as they were expected to every time. I've personally found that creating tools and user interface for use with Paper.js is a breeze, and in theory, it's perfectly possible to recreate the exact look of Method-Draw, simply powered by a well tested, well supported back-end with some pretty impressive capabilities beyond SVG-edit.
I can't do this alone, or without some kind of support. At this point I'm simply looking for feedback, or interest from the communities that could be involved. Thanks for reading.
OS: Windows 10
Browser: Chrome 49
example svg:
<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<path id="svg_2" d="m262.5,178l0,-58l45.5,-20l94.5,-18l39,72l-181,24l2,0z"
stroke-width="1.5" stroke="#A0D58A" fill="#FFAAB8"/>
</svg>
I know this is not an issue, but is there a way to init the whole svg with some elements on svgcontent?
I've looked at the code, but I can't find out where the svgcontent instantiates so I can add some JSON on it.
In svgutils.js is the init function which inits the editorContext, where the whole svg appears, but I need one step back, where the svgcontent is added so I could add myself some JSON.
Could you help me please with some informations of where should I add the JSON?
Thank you in advance.
Hi,
I see connector extension in the extensions folder , but i dont see it in the toolbar though ? Is it currently being worked ?
Thanks
I have create file with Method Draw:
This is when I export it to PNG:
There is some problems with text rendering. Any Ideas where the problem come from?
This is XML: http://printed-bags.net/uploads/test_622.svg
1). Draw a line with pen, (or any other shape).
2). double click the shape.
3). drag to move the vertex.
The line will gone after several drag move.
The problem only found on chrome (I use Version 35.0.1916.153). It works very well on Safari.
https://www.dropbox.com/s/xiwp0zfdjvydu7w/Screen%20Shot%202014-07-29%20at%2010.40.41%20AM.png
I am writing a text with help of text tool after some time i want to edit same text but i am unable to open keypad.
Looking at the tool tip for the color picker I should be able to shift click to change the stroke color. It always changes the fill color instead.
I'd like to try packaging Method-Draw for Sandstorm (https://sandstorm.io).
One issue that would need to be solved first is how to save the SVG files in a persistent way (not only in the localstorage).
Is there a method for writing back to the server that could be relatively easily implemented in the current framework?
Hello, is there no possibility to add arrows on lines ?
Hi the Author,
It's seem Method-Draw is not support text editor as paragraph so pls support it if you can.
Thank you!
On Mac in either Firefox or Chrome I select any size from the Custom menu on a blank canvas, the two axises expand and continues to so forever - so that I can not use the application.
Can you reproduce or provide workaround?
Default size is to small.
In method-draw.js the method $.pref is called multiple times, yet it is not defined anywhere
if you try to save the SVG, an Uncaught TypeError is thrown
it was somehow omitted when porting from svg-edit project, where in svg-editor.js we can find:
// Store and retrieve preferences $.pref = function(key, val) { if(val) curPrefs[key] = val; key = 'svg-edit-'+key; var host = location.hostname, onweb = host && host.indexOf('.') >= 0, store = (val != undefined), storage = false; // Some FF versions throw security errors here try { if(window.localStorage) { // && onweb removed so Webkit works locally storage = localStorage; } } catch(e) {} try { if(window.globalStorage && onweb) { storage = globalStorage[host]; } } catch(e) {} if(storage) { if(store) storage.setItem(key, val); else if (storage.getItem(key)) return storage.getItem(key) + ''; // Convert to string for FF (.value fails in Webkit) } else if(window.widget) { if(store) widget.setPreferenceForKey(val, key); else return widget.preferenceForKey(key); } else { if(store) { var d = new Date(); d.setTime(d.getTime() + 31536000000); val = encodeURIComponent(val); document.cookie = key+'='+val+'; expires='+d.toUTCString(); } else { var result = document.cookie.match(new RegExp(key + "=([^;]+)")); return result?decodeURIComponent(result[1]):''; } } }
I guess similar to #30 whenever I try to export an SVG to PNG, text elements are badly misplaced. I investigated a little and ended up on this page which shows the possible attribute values for text-anchor.
Problem:
text-anchor attribute seems to be set to left by default, like:
<text stroke-width="3" xml:space="preserve" text-anchor="left" font-family="Arial" font-size="32" id="svg_81" fill="#699dd3">Hello</text>
The value left does not exist. To fix and correctly position text I overwrote the svg source and set anchors to start. This correctly positioned my text.
Let me know if I should do a PR for this.
I'd love to contribute back to the project at some point, but I'd first like to understand what the difference is between /editor
and /method-draw
. Looking back at old commits, it seems changes are mirrored between files in these folders...
Which one is more "real"? Why do it this way at all?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.