Download presentation

Presentation is loading. Please wait.

Published byMary Dwyer Modified over 4 years ago

1
7.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 7 Introducing SVG Transformations on Elements

2
7.2 Si23_03 SVG Fundamentals n Structure of an SVG document – Document data – Start of document – Graphic content – End of document Element type name Attribute name Attribute value

3
7.3 Si23_03 SVG Shapes n Rectangles n Circles n Ellipses n Lines n Areas

4
7.4 Si23_03 SVG Styles n The style determines how a shape appears – Stroke – Fill <line x1=10 y1=20 x2=30 y2=10 style=stroke:black;/> <polygon points=10,10 20,10 15,30 style=stroke:black;fill:yellow;/>

5
7.5 Si23_03 Elementary Transformations n The basic transformations we look at are: – TRANSLATION – SCALING (about origin) – ROTATION (about origin) n Complex transformations are built from combinations of these elementary ones

6
7.6 Si23_03 Translation (x,y) (x*,y*) x* = x + a; y* = y + b Suppose we want to translate a point (x,y) by an amount (a,b) - we increase x-coord by a, and y-coord by b

7
7.7 Si23_03 Translating an Object To translate an object by (a,b), we translate its defining points by (a,b) x* y* = xyxy + abab for each defining point on object

8
7.8 Si23_03 Scaling Scaling relative to origin by 1.5 in x, and by 2.0 in y x* = 1.5 x; y* = 2.0 y x* y* = sx0sx0 0sy0sy xyxy If s x = s y, then scaling is UNIFORM - otherwise NON-UNIFORM Remember scaling here is relative to the origin

9
7.9 Si23_03 Rotation Rotation of 90 degrees anti-clockwise relative to origin x* = -y ; y* = x

10
7.10 Si23_03 Rotation x* = cos. x - sin. y y* = sin. x + cos. y x* y* = cos sin -sin cos xyxy Rotation is relative to origin

11
7.11 Si23_03 Transformations - Summary n TRANSLATION: P* = P + T n SCALING: P* = S. P n ROTATION: P* = R. P

12
7.12 Si23_03 Combining Transformations n In practice, it is often necessary to apply a sequence of transformations eg rotate, then scale : P (1) = R. PP (2) = S. P (1) = S. R. P = M. PM = (S. R) n Thus successive scale or rotate transformations can be accumulated into a single matrix.

13
7.13 Si23_03 Combining Transformations n But translation does not fit this pattern: – Consider translate then scale - P (1) = P + T P (2) = S. P (1) = S. (P + T) – The accumulation of successive transformations starts to get messy n Can we express translation as a matrix vector multiplication?

14
7.14 Si23_03 Homogeneous Coordinates n A 2D point in Cartesian coordinates corresponds to a 3D point in homogeneous coordinates xyxy xy1xy1 You can think of homogeneous coordinates in terms of a plane through z = 1 in three dimensional space.

15
7.15 Si23_03 Translation in Homogeneous Coordinates n Translation can now be written as: x* y* 1 = 100100 010010 ab1ab1 xy1xy1 So we have:P* = T. P

16
7.16 Si23_03 Scaling and Rotation in Homogeneous Coordinates n Scaling and rotation are: = sx00sx00 0sy00sy0 001001 x* y* 1 xy1xy1 x* y* 1 =xy1xy1 cos sin 0 -sin cos 0 001001

17
7.17 Si23_03 Combining Transformations n We now have: – TRANSLATION: P* = T. P – SCALING: P* = S. P – ROTATION: P* = R. P n We can thus combine transformations by multiplying the matrices – eg translate then scale becomes: P (1) = T. P P (2) = S. P (1) = S. T. P

18
7.18 Si23_03 Example: Rotate object about centre (i) translate centre to originT(-cx,-cy) (ii) rotate through 90 degreesR( /2) (iii) translate centre back to original positionT(+cx, +cy) Computed as (taking M initially as I, identity matrix): (i) M = T(-cx,-cy). M (ii) M = R( /2). M (iii) M = T(cx,cy). M then P* = M. P

19
7.19 Si23_03 SVG Transformations n Translate n Scale (about origin) n Rotate (about origin, angle in degrees, positive clockwise) <rect x="200" y="110" width="100" height="80" transform="translate(0,120)" style="fill:red;"/> <rect x="200" y="110" width="100" height="80" transform="scale(0.5,1.0)" style="fill:green;"/> <rect x="200" y="110" width="100" height="80" transform="rotate(30)"/>

20
7.20 Si23_03 Tomorrow … n SVG – How to group elements into objects – How to scale and rotate about a point n Curve Drawing – How to draw smooth curves – Specifying curves in SVG

Similar presentations

Presentation is loading. Please wait....

OK

0 - 0.

0 - 0.

© 2018 SlidePlayer.com Inc.

All rights reserved.

To make this website work, we log user data and share it with processors. To use this website, you must agree to our Privacy Policy, including cookie policy.

Ads by Google