2

I recently asked a question on how to flip an SVG object, vertically or horizontally:

Scale and mirror SVG object

Now, programmatically I wanna be able to move, rotate and scale the object while it's still being flipped vertically or horizontaly.

I draw all usual objects in my Android app, then I'm saving it as an SVG object. All of my calculations on Android work's just right.

When I export to SVG, I know: Each objects properties (ScaleX, ScaleY, Rotation, CenterX, CenterY, MovedX, MovedY) and Width of SVG Document, Height of SVG Document but I can't seem to get it to export right. I thought I solved it, but then something's missing and I can't figure out what. And I guess I can't be the only one ever thought of this, otherwise at least this question serve some purpose.

An example of what can be done through "touch" input on my Android app:

  1. Draw a rectangle from Left, Top to Right, Bottom
  2. On add: Calculate center of the object (fix if right < left and such) save as CenterX and CenterY
  3. Move the object if wanted, save it as MoveX and MoveY (won't override Left/Top/Right/Bottom)
  4. Rotate the object and convert it to a degree and save it as Rotation
  5. Scale the object, but not lower than 0.1 Scale and save it as ScaleX and ScaleY
  6. Export it as Rectangle (x=Left, y=Top, Width=Right-Left, Height=Bottom-Right)
  7. Add the colors, strokes and such and then the "transform" attribute.

When an object is scaled, it's scaled around it's CENTER. When an object is rotated, it's rotated around it's center. When it's moved, it adds the difference between Current touched point on the screen and the Previous one.

Now if certain flags are set "VerticalFlip" or "HorizontalFlip", Android draws the flipped variant at the same time you draw it. When exported, it checks the object if it has either of these flags.

This is an example of how I've been calculating but maybe I'm missing something entirely, or I'm complicating things:

http://pastebin.com/z7PDbusN

There's also a link below each algorithm that demonstrates that the algorithm works at least at that instance.

Now when I save it, using the exact system. Being provided all the necessary values to export it correctly, it still doesn't work. Some objects look just right, other's are entirely out of shape. Even if they've all been flipped, moved, rotated and scaled. Some of the objects exported look exactly like they should - while others do not.

Left is a screenshot of the drawing in the app, the right is the exported SVG in Inkscape. SVG Size = Size of screen that was drawing it. No scaling of the whole screen when exporting. All objects here have been scaled, rotated and moved. Only the red object here is obvious that something's wrong.

enter image description here

Community
  • 1
  • 1
Deukalion
  • 2,516
  • 9
  • 32
  • 50
  • As I always, I try to be as thorough as I can be: so, when exported to SVG. It adds one object per flag: Normal SVG Object, Verticall Flipped SVG Object, Horizontally Flipped SVG Object or HorizontalVertical Flipped SVG Object - depending on the "flags" set by the Object drawn. So what I see on my Android app does not exist "twice", it just mirrors it. When I save it as SVG I need to save it as two different objects, or four, which is what I do. So when Vertical Flip is set = two objects will be saved, when both flags are set = Four objects are saved. – Deukalion May 30 '14 at 18:48
  • Update and explanation of when each algorithm is used on the bottom of the page: http://pastebin.com/PirA0kpx – Deukalion May 30 '14 at 18:54
  • Can you show an example of something that looks wrong ? – Ian May 30 '14 at 21:31
  • Also are you sure its scaling around its centre correct ? – Ian May 30 '14 at 21:45
  • Since I can't specify the coordinate around which to scale in SVG, I can't say. But whatever I put in Rotate(Degrees, CenterX, CenterY) is the Center of the object. – Deukalion May 31 '14 at 05:57
  • Added a picture, and more explanation above it. As you can see. Most of the vertical and horizontal flips are as they should be. Except the red one. But all of the green ones have been scaled, and the green in the middle have been scaled, rotated and moved. – Deukalion May 31 '14 at 06:11

0 Answers0