Question

I’m very new to javascript and raphaelJS, so sorry for my messy code, but I need to fulfill the next task: I need to draw a rectangle and make a way to drag&drop and resize it. And this way must work on tablets. I wanted to draw 2 little circles at bottom and right side and resize this rectange with them, but I got a problem with maths I guess, because the next code has some problems: http://jsfiddle.net/x5zHp/ (there is only one circle)

When I drag the rectangle you can see that the mouse and the rectangle don’t move simultaneously, and the mouse arrow slips out.

Could you please point out my errors and maybe some best code solutions, I would appreciate any help.
I found a plugin called free transform, but I wanted to do this task by myself, because eventually I’ll need to do some stuff with it and it would be hard to work with this plugin (for example I’ll change size of circles or make invisible circles because it must work on tablets easily. The reason is that it’s hard to catch the circles on tablet using your finger)
Thanks for advance and sorry for my English

Update

Finally http://jsfiddle.net/y5Jag/7/ I got it work. I also added an invisible circle so it’s easy to catch the visible circle (actually I’ll use it in tablets)
The only thing that I really hate is the code. It’s very messy:

this.ox = this.attr('cx');
this.oy = this.attr('cy');
this.rox = Spectrum.resizer.attr('cx');
this.roy = Spectrum.resizer.attr('cy');
this.rwidth = Spectrum.rect.attr('width');
this.rheight = Spectrum.rect.attr('height');

Any suggestions how to beautify this…

Answer 1

If I understand your question correctly you were almost there, you just need to multiply the distance by two since the square is scaled on both sides…

this.scale = params.scale.y + dy*2 / rect.attr('height');

http://jsfiddle.net/y5Jag/