Add support for scaling editor and viewer sketches

[lamikae]

This patch provides support for arbitrary scaling of sketches.
Use case, eg. a scenario where the editor and/or viewer area need to be scaled to overlay an area that might be dynamically sized by the browser.

Live demonstration is up at jsFiddle:

http://jsfiddle.net/PpsUt/2/
http://jsfiddle.net/PpsUt/2/embedded/result/ (full-screen)

[fuelxc]

Does this support dynamic changing of the editor once things are edited?

I have a case where I have a canvas that can be resized and I need the svg canvas to scale with it.

[lamikae]

@fuelxc As far as I recall, yes. I think I used it on a widget that dynamically resized with respect to browser window size. Try it and refresh my memory ;)

[rmsandu]

@lamikae your fix is great. I used it to create some Zoom In/Zoom Out buttons. There is no offset when drawing on the editor, IF my editor has width=height (square dimensions). Nonetheless, if my editor has rectangle shape (let's say width > height) an offset appears when drawing on the sketchpad (e.g. width: 500, height: 300);. Any suggestions how to solve this?

[rmsandu]

I solved the issue of a scaling a sketchpad with width different than height dimension. So, in my html file:

`scale_factor_width = 30; // let's say a I want to scale by a factor of 30 //

scale_factor_height = scale_factor_width / sketchpad_width * sketchpad_height;

sketchpad_editor.scale(sketchpad_width + scale_factor_width, sketchpad_height + scale_factor_height); // + as an example//

// update with new dimensions of sketchpad //
sketchpad_width = sketchpad_width + scale_factor_width ;
sketchpad_height = sketchpad_height +scale_factor_height `

[gaucho1978]

Is this scaling related to the sketchpad zooming or to the webpage pinch by means of 2 fingers?

[gaucho1978]

OPS! solution #10 does not work in my case...
to try it i just replaced original file with the modified raphael.sketchpad.js
the problem persists on chrome for android.

[gaucho1978]

some problems solved: gaucho1978@fe1c437

the reported problem (by me) was a bug related to offset() call that appears on chrome for android after a pinch.
I solved it.
I also allowed the ability to pinch and pan with 2 fingers and to draw with one finger.
i also made some other minor changes. see them all on the link.

[rmsandu]

created an example of using Scale(). Zoom can be achieved by Mouse Wheel or by button click. No offset appears. The fiddle seems to be outdated.
https://github.com/raluca-san/raphael-sketchpad/blob/master/_includes/how-%20to-zoom-scale
rmsandu@6cbcd4c

Fiddle: https://jsfiddle.net/1ct0xb4r/15/