search

kimoa / svg-edit

Automatically exported from code.google.com/p/svg-edit
MIT License
3 stars 0 forks source link

Allow curves to be drawn in path creation mode (like in other editors) #299

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
This is a proposal:

right now most of the drawing tools create polylines/paths in a very
particular way: with sharp corners. Users don't even imagine that this is
only a _very particular_ way of doing this because they are not offered
alternative. most claims for not offering alternatives go about saying that
the data harvested through the screen-and-mouse interface is not enough for
creating a more complex path. 

i would like to present a usecase for creating poly-curves (no corners). i
included bellow an image if line A - a polyline and line B, same relative
positions of nodes, but poly-curve.

so.. user selects the tool for poly-curve.
2. places a clic on the canvas and obtains a first node (1)
3. places a second node (2). at this point we have just a normal line
between 1 and 2
4. places a third node (3). node 2 becomes curve with no corner and the
tangent at point 2 to the path is a parallel to imaginary line 1-3
5. places node (4) and process repeates for node 3..
etc

in this usecase the only parameter that is not furnished and should be
established a default value to, is the curvature attractor size

attaching an image and the source is:

<svg xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <path stroke-width="5" stroke="#000000" fill="none" id="svg_1"
d="m23.5,193.5l39.5,-60.5l56,71l3,-148l105,125l-16,-168l141,14"/>
  <path id="svg_2" stroke-width="5" stroke="#000000" fill="none"
d="m194.5,321.5c16,-24 16,-61 39.5,-60.5c26.5,0.5 45.5,87.5
56,71c12.5,-16.5 -17.5,-141.5 3,-148c23.5,-4.5 86.5,134.5
105,125c18.5,-12.5 -33.5,-148.5 -16,-168c17.5,-21.5 112.5,10.5 141,14"/>
 </g>
</svg>

Original issue reported on code.google.com by Christia...@gmail.com on 23 Oct 2009 at 10:05

Attachments:

GoogleCodeExporter commented 9 years ago 
Hm, not a bad idea, should indeed be workable. For 2.5 I plan to add support for
other types of curves, maybe we could work this in for that as well, or perhaps 
as
another flyout button at the same spot as the current polygon option.

Original comment by adeve...@gmail.com on 24 Oct 2009 at 12:56

GoogleCodeExporter commented 9 years ago 
Christian, I think the algorithm is quite clear and sensible, thank you!  I 
only had
one question: when placing the 4th node - are we looking at the imaginary line 
2-4 to
get the tangent of the curve at point 3?  I guess so, otherwise it doesn't make 
sense
to me :)

As for adeveria (Fyrd)'s comment - I think I'd like to see two tools in 2.5 as 
a flyout:

Polyline (current), Curve Path (Christian's proposal).  The only difference in 
these
two items is how they are initially created, it is entirely possible to turn a
polyline into a curved one, just as it would be possible to change a smooth 
curve to
have sharp corners after they have been created. 

Sound sensible?

Original comment by codedr...@gmail.com on 24 Oct 2009 at 5:08

GoogleCodeExporter commented 9 years ago 
@coderead: yes, for node 3 we consider parallel to imaginary line 2-4, for 
terminal
nodes attractor vector has the direction of the adjacent node.

now, we could further refine the algorithm:
initially i have considered the attractor sizes of each side of a node as having
equal values. we could make values dependent on the position where a projection 
of
node 2 (p), falls on the line 1-3 with respect to the median point between 1-3 
(m) 

image attached

source:

<svg viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <path d="m23.5,193.5l39.5,-60.5l56,71l3,-148l105,125l-16,-168l141,14" id="svg_1"
fill="none" stroke="#000000" stroke-width="5"/>
  <path d="m194.5,321.5c16,-24 26,-64 39.5,-60.5c21.5,4.5 45.5,87.5 56,71c12.5,-16.5
-17.5,-141.5 3,-148c23.5,-4.5 86.5,134.5 105,125c18.5,-12.5 -33.5,-148.5
-16,-168c17.5,-21.5 112.5,10.5 141,14" fill="none" stroke="#000000" 
stroke-width="5"
id="svg_2"/>
  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="12"
stroke-width="0" stroke="#000000" fill="#000000" id="svg_3" y="342.5" 
x="184.5">1</text>
  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="12"
stroke-width="0" stroke="#000000" fill="#000000" id="svg_4" y="241.5" 
x="230.5">2</text>
  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="12"
stroke-width="0" stroke="#000000" fill="#000000" id="svg_5" y="359.5" 
x="290.5">3</text>
  <line fill="none" stroke-dasharray="5,5" stroke="#000000" id="svg_6" y2="353.5"
x2="424.5" y1="304.5" x1="101.5"/>
  <circle stroke-dasharray="5,5" fill="#000000" id="svg_7" r="3" cy="324.5" cx="237.5"/>
  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="12"
stroke-dasharray="5,5" stroke-width="0" fill="#000000" id="svg_8" y="340.5"
x="238.5">m</text>
  <line fill="none" stroke-dasharray="5,5" id="svg_9" y2="387.5" x2="238.5"
y1="369.5" x1="207.5"/>
  <line fill="none" stroke-dasharray="5,5" stroke-width="2" stroke="#000000"
id="svg_10" y2="259.5" x2="234.5" y1="376.5" x1="219.5"/>
  <rect transform="rotate(9, 218, 328)" stroke-width="2" stroke="#000000" fill="none"
id="svg_11" height="12" width="12" y="322.5" x="212.5"/>
  <circle stroke-dasharray="5,5" stroke-width="0" fill="#000000" id="svg_12" r="4"
cy="323.5" cx="224.5"/>
  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="12"
stroke-dasharray="5,5" stroke-width="0" fill="#000000" id="svg_13" y="313.5"
x="217.5">p</text>
 </g>
</svg>

Original comment by Christia...@gmail.com on 24 Oct 2009 at 7:05

Attachments:

GoogleCodeExporter commented 9 years ago 
yet further refinement (referring to image Screenshot-1.png), size of curvature
attractors for node 2 may depend on the size of line 2-p (distance of node 2 
from
line 1-3). that said, there are no more parameters that need to be defined 
elsewhere.
all depend on the positions of the nodes. Furthermore, the transformation 
curves <-->
straight lines goes both ways and the output looks very similar and compatible 
to the
eye.

Original comment by Christia...@gmail.com on 24 Oct 2009 at 10:48

GoogleCodeExporter commented 9 years ago 
There is a Bezier curve Class for javascript at
http://sourceforge.net/projects/wqy/files/misc/ . 

It use canvas to draw the Bezier but the idea for Bezier manipulation can be 
reused
for svg too.

Original comment by hash...@gmail.com on 20 Nov 2009 at 8:20

GoogleCodeExporter commented 9 years ago 
@Hashao2: Bezier curves are already handled natively in SVG, you just need to 
supply
the control point coordinates and the browser handles the rest. I believe that 
is why
a class like that is needed for when using the canvas element, because canvas 
lacks
the in-built support. 

Or is there something that JS class does that SVG can't already do?

Original comment by adeve...@gmail.com on 20 Nov 2009 at 6:08

GoogleCodeExporter commented 9 years ago 
How about the curvature attractor size is specified by dragging?
It's the default behavior on Illustrator & Inkscape's pentool.

Original comment by yarha...@gmail.com on 15 Jan 2010 at 6:20

GoogleCodeExporter commented 9 years ago 
@Christian:  I think this algorithm was deep into my subconscious when I was
implementing freehand path smoothing because this is almost exactly what I did. 
Please try out the freehand path tool in the trunk build.

Let me ask you:  if we can get the freehand path tool to have an intuitive way 
to
close the shape, and maybe a way of reducing the number of points in a path, do 
you
think it would suffice - or do you still prefer a click-per-node tool to 
generate curves?

Now that I think about this, I think the freehand path tool may not be good 
enough
because it generates too many points and requires you to have a steady hand.  
Anyway,
just wanted to touch base with you on this.

Original comment by codedr...@gmail.com on 12 Feb 2010 at 4:07

GoogleCodeExporter commented 9 years ago 
I'm sorry to take such a looong time to answer. I was up in the mountains 
without an 
internet connection..

I happen to have another point of view now about this function: I would 
consider it 
as a polygon, but with curves instead of straight lines. so I would make it as 
a sub-
tool of the path tool and with the same expectations from the user which are 
very 
different from the freehand tool.

Such a tool would become very important for designs that involve natural 
objects 
since in nature the rounded shapes occur much more often. also for interactive 
tracing..

I would like to know which part of this "algorithm" is still unclear so i can 
provide 
some ideas..

in the editing phase the attractor and the nodes should be treated as we 
already 
treat paths. the only discussion now is about the creation process of the path.

Original comment by idealllove on 19 Feb 2010 at 10:55

GoogleCodeExporter commented 9 years ago 
Excuse me, but your nick doesn't appear in the previous discussion, so who are 
you
(amongst the posters)?
Thanks.

Original comment by worms_...@yahoo.com on 19 Feb 2010 at 11:04

GoogleCodeExporter commented 9 years ago 
Christian.Tzurcanu = idealllove 

sometimes i am unable to log into the Christian.Tzurcanu account. sorry.. 
Google 
business..

Original comment by Christia...@gmail.com on 25 Mar 2010 at 2:55

GoogleCodeExporter commented 9 years ago 
I think we may be able to accomplish this the way yarhalla suggests (and 
suggested by
someone else elsewhere).  Christian, are you familiar with this method (used in
Ink./Ill.) ? Would that be acceptable or would you prefer to stick with a 
different
tool that makes the curves based on the algorithm you've suggested?

Either way, I suspect we will have to push it to 2.6...

Original comment by adeve...@gmail.com on 30 Mar 2010 at 11:44

GoogleCodeExporter commented 9 years ago 
Pushing to 2.6 as suggested by adeveria

Original comment by codedr...@gmail.com on 6 Apr 2010 at 1:44

GoogleCodeExporter commented 9 years ago 
@adeveria:

for a long while i was unable to see what you refer to in Inkscape because i 
was not aware that by dragging, it 
produces curves with that bezier tool. I like it. It's even more versatile than 
the algorithm i've described above. 
the algorithm may be useful for other plugins (designing curves with same 
attractor value, etc.), but for what i 
need, i'd rather go with your proposal for a tool similar to the Inkscape 
bezier. thanks.

Original comment by Christia...@gmail.com on 14 Apr 2010 at 7:35

GoogleCodeExporter commented 9 years ago

Original comment by adeve...@gmail.com on 19 Jul 2010 at 4:05

GoogleCodeExporter commented 9 years ago 
Changed the summary to reflect what we want here...and I think it's important 
to have in 2.6, so bumped up the priority.

Original comment by adeve...@gmail.com on 28 Sep 2010 at 11:20

GoogleCodeExporter commented 9 years ago 
This ability has now been added in r1824! Might need some minor tweaks but it 
works quite well. Just click to add regular points, click-and-drag to set the 
control points.

Original comment by adeve...@gmail.com on 27 Oct 2010 at 4:06

GoogleCodeExporter commented 9 years ago 
Oops, I lied, I meant r1825.

Original comment by adeve...@gmail.com on 27 Oct 2010 at 4:35

GoogleCodeExporter commented 9 years ago 
i still don't see this working in the trunk. i'd love to test it

Original comment by Christia...@gmail.com on 27 Oct 2010 at 5:12