From c744c0e88f8aff91c0f443982d4ee27473ba7b44 Mon Sep 17 00:00:00 2001 From: Alan Alpert Date: Wed, 25 Jul 2012 14:26:11 +1000 Subject: [PATCH] Visual coordinates documentation Task-number: QTBUG-26367 Change-Id: I4a782118e96aecfaf7cfa6921afcb6dd1f86d665 Reviewed-by: Chris Adams --- .../doc/images/visual-coordinates-example.png | Bin 0 -> 1147 bytes .../doc/src/concepts/visualcanvas/coordinates.qdoc | 53 ++++++++++++++++++++- 2 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 src/quick/doc/images/visual-coordinates-example.png diff --git a/src/quick/doc/images/visual-coordinates-example.png b/src/quick/doc/images/visual-coordinates-example.png new file mode 100644 index 0000000000000000000000000000000000000000..c5ccf5dbfc9dc8f9d7c0fbf961805dfe8bd21f15 GIT binary patch literal 1147 zcmeAS@N?(olHy`uVBq!ia0vp^XF!;P4M^H6`FsLWEX7WqAsj$Z!;#Vf2?p zUk71ECym(^Ktah8*NBqf{Irtt#G+J&^73-M%)IR4c=wyVvnkn^03$ef)_yBR&j6->9N zG2t-%-URGw4Uho$BQI=@tL1f2isIw=9=RPMNi=SH)iCr1J4kGC@{ zU#24MS?9T_?A@DwmFVQ2`|10*#I6MSBpWg>EdC*4(fJ$=smUc-H} z9?C^zoc>?BW8RwdS;y8KJJ4hubLu4fzt(+o?+WY?Tc#4Pe)HT(^V2JD%ga~EHwU+S z%m25!=k+Og(%!Es_g!@gCT8{&&)3)&`M{{%`*R$__0EI^3KAL|Y+Ox^O(Tk#CYYP2 zc7DD(JNwDm<|j9&pPXy`InH%bW>4X}lO}rqG>r@2$9?*gTJ-qX&F8;=pS%{fX}kIS zSe26trPD6j)ctuMG3m*-w@)rEzWM$kkNKHJmKGj)cXxewarm6yy}SGEA3KJd_oh6p zxTn1?@03N%yzd<6D*ykxv^d`U->GNw-Hl~Fcgn0&-G1*}_0g$!&+MKZcT((ZxA=7V zr=N_|4r||Bw6og$<~_e_*Us78JDVr>Eb-fB`}wiqAAjC4ILx~_BW}N+oQ=mkyR+?c z=k7VR+UDfs*V3ockMV9kaBtnZXWg%VoGqFs&Gv6T3p49M2S{ZAp4M2fODZ_C2`y@l1HZLQQ3D%ea}} g`TW*AsrbX2Yug(3_v$t+U_rs)>FVdQ&MBb@016kS5&!@I literal 0 HcmV?d00001 diff --git a/src/quick/doc/src/concepts/visualcanvas/coordinates.qdoc b/src/quick/doc/src/concepts/visualcanvas/coordinates.qdoc index bcbf8ae..f323a9c 100644 --- a/src/quick/doc/src/concepts/visualcanvas/coordinates.qdoc +++ b/src/quick/doc/src/concepts/visualcanvas/coordinates.qdoc @@ -30,6 +30,57 @@ \title Concepts - Visual Coordinates in Qt Quick \brief Description of the concept of visual coordinates in Qt Quick -XXX TODO - Fill with content. +\section1 Item Coordinates +The default system of visual coordinates used in Qt Quick is item coordinates. This is a cartesian coordinate system +with (0,0) at the top left corner of the item. The x-axis grows to the right and the y-axis grows downwards, so that +the bottom right corner of the item is at coordinates (width, height). + +An individual item's position is specified in terms of its parent's coordinate system. This means that reading x,y +values from non-sibling items may require conversion to convert them into the same coordinate system. Scene +coordinates are often used as the intermediate coordinate system when this occurs. + +\section1 Scene Coordinates +Scene coordinates are the coordinates where (0,0) corresponds to the top left corner of the window the scene is +currently being rendered. Scene coordinates are usually the same as the item coordinates of the root item in the +window. + +You can convert from item to scene coordinates using the functions on the item whose coordinate system you are +interested in. See \l Item::mapFromItem and \l Item::mapToItem for converting to scene coordinates, or another item's +coordinates. + +\section1 Worked Example +The below QML code creates an arrangment of squares, with dots added for identification of points: +\code +Rectangle { + width: 200 + height: 200 + color: "red" + + Rectangle { + x: 100 + y: 100 + width: 100 + height: 100 + color: "blue" + + Rectangle { + width: 50 + height: 50 + color: "green" + } + } +} +\endcode + +\image visual-coordinates-example.png + +In this image the black dot is positioned at (0,0) within the item coordinates of the red rectangle. If the red +rectangle was the root item of the scene, then the black dot would also be positioned at (0,0) in scene coordinates. + +The blue rectangle is positioned at the white dot, (100,100), relative to the red rectangle's top left corner. + +The green rectangle has no x,y specified, so its position defaults to (0,0). Because it is at (0,0) in the coordinates of its parent, +the blue rectangle, it is positioned at the top left corner of that rectangle. This is the same point as the white dot at +(100,100) in the coordinates of the red rectangle. */ -- 2.7.4