Controlling a path with a slider

[Robin Lankes]

Hi all,

I'm working on a website that will let you control the shape of an item, say a pendant, via sliders and then save resulting shape to svg and send it to a laser cutter. I've had a look at most of the 2d JavaScript libraries and I quite like paper.js for its support of boolean path operations and what looks like painless export to SVG according to the docs.

Last night I had a quick look at svg.js and I must say I quite like the simplicity of it all. I did a little test where I hooked up the radius of a circle to a jquery UI slider and the circle updated instantly with the slider movement.

Today I tried the same with paper.js, first using a html 5 input tag with type set to range and connecting it to scale a circle. Strangely the circle only updates when you move the mouse out of the the slider handle so no instant feedback. Next I tried a jquery UI slider and it's doing exactly the same thing. I also tried moving the x position of the circle instead of scaling it, but again the circle only moves once you exit the slider handle.

Updating the text of an html element with the slider works with instant feedback as expected.

Does this have something to do with controlling something that sits inside the canvas from the outside?

I see that interface components are mentioned in the docs, but not documented yet. I played a bit with the Palette.html example file in the interface folder, but got myself in a tangle rather quickly (I'm used to working in ActionScript so switching over to html5 and JS etc. is quite a learning curve at the moment).

I haven't added any code samples yet in case this is a known issue and not me doing something stupid.

Robin

[Robin Lankes]

I managed to get the slider to work by adding

paper.view.draw();

in the function that is called when the slider value changes. Hopefully this is the right way of doing it.

Robin

[Jürg Lehni]

Yes that's correct

--
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.
For more options, visit https://groups.google.com/d/optout.

[Robin Lankes]

Thanks Jürg