2 Q: one on varying strokeWidth & one on path.remove()

[M. Scott Veach]

Hi, I'm newish to JS and paper.js; so I apologize if I've missed something obvious.

1) Is there a way to easily give a path a strokeWidth that tapers or widens? I don't mean
does this in an animation but rather instead of a having a constant strokeWidth along the
length of the path, it starts out with one strokeWidth and then as move along the path it
either widens or tapers to a different strokeWidth?

Since, strokeWidth is a property of Path, I haven't found an easy to get this effect.

2) This is probably really basic, but consider the following two lines of code:

var anArrayOfSegments = aPath.segments();
aPath.remove();

in the above example, is anArrayOfSegments guaranteed to be defined? I'm using these lines
and it's working but it dawned on me that I might be getting lucky. Does that first line copy
the array of segments or just give anArrayOfSegments a reference to one? And if it's the latter,
does that mean once I've called aPath.remove() that memory is up-for-grabs?

Thanks for any information/help!
Scott.

[Daniel Finlay]

I'm also curious how to vary a stroke width over the course of a path.  

[Alex Blackwood]

Since paper.js uses the functions native to the canvas element to style and render strokes, there is no current way to create a 'tapered stroke'.  Instead, you'll need to create a filled, closed path that is offset by variable amounts on either side of your path.  Check out the Spiral Raster example, or Pomax's excellent Primer on Bezier Curves.

[m. scott veach]

Thank you!  This introduction to Bezier curves gets at exactly what I'm missing... it's perfect!

On Mon, May 6, 2013 at 8:25 AM, Alex Blackwood <bigbla...@gmail.com> wrote:

Since paper.js uses the functions native to the canvas element to style and render strokes, there is no current way to create a 'tapered stroke'.  Instead, you'll need to create a filled, closed path that is offset by variable amounts on either side of your path.  Check out the Spiral Raster example, or Pomax's excellent Primer on Bezier Curves.

--
You received this message because you are subscribed to a topic in the Google Groups "Paper.js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/paperjs/Q57gXcwHEEI/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to paperjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Jürg Lehni]

I am currently working on adding stroke expansion / offsetting to the library. And I will do so in a way that will allow variable stroke width.

Best,

Jürg

> You received this message because you are subscribed to the Google Groups "Paper.js" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.

[Jake Ingman]

That's awesome! Let me know if I can help test in any way!

[Jan Aerts]

Hi Jürg,

Has any progress been made on the stroke expansion?

Thx,

jan.

[Jürg Lehni]

I'm not sure. That's a question for Hari!

For more options, visit https://groups.google.com/d/optout.

[Harikrishnan G.]

I think I will be able to find some time next week to finish off path offsetting.
I am talking about offsetting by a fixed amount. Still have to look into variable stroke widths.

/Hari

[Robin Lankes]

Path offsetting sounds exiting!

A laser cutter for instance removes a certain amount of material along the cutting line - for the one I'm using the kerf is about 0.05mm when cutting 3mm - 6mm thick material. So a 10 x 10mm square ends up measuring 9.95 x 9.95mm. If you offset the path by half the kerf you should get real close to 10 x 10mm. That would mean you can create artwork in paper.js that can be sent straight to a laser cutter without requiring further manual editing :)

Robin

[Alvaro Lourenço]

Have you made it?

[Jürg Lehni]

It’s not finished, but far progressed… You can track the progress here:

https://github.com/paperjs/paper.js/issues/371

For more options, visit https://groups.google.com/d/optout.