User Tools

Site Tools


fitting_a_square_inside_a_rectangle_and_maintaining_aspect_ratio

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

fitting_a_square_inside_a_rectangle_and_maintaining_aspect_ratio [2018/04/04 09:13]
xylene created
fitting_a_square_inside_a_rectangle_and_maintaining_aspect_ratio [2018/05/01 19:01] (current)
xylene
Line 7: Line 7:
 Unsolved problems/​idea. Unsolved problems/​idea.
   * "​Math.min"​ is called a lot. Trying to substitute "​width"​ in the "​x"​ calculations and "​height"​ in the "​y"​ calculations does not work. Probably something to do with ordering.   * "​Math.min"​ is called a lot. Trying to substitute "​width"​ in the "​x"​ calculations and "​height"​ in the "​y"​ calculations does not work. Probably something to do with ordering.
-  * Use an "​Item"​ between the outer and inner rectangle to perform the margin calculations using "​anchors.margin"​ then the inner rectangle only need to work out centering ​the +  * Use an "​Item"​ between the outer and inner rectangle to perform the margin calculations using "​anchors.margin"​ then the inner rectangle only needs to work out centering
  
 <code javascript>​ <code javascript>​
Line 13: Line 13:
 import QtQuick.Controls 2.2 import QtQuick.Controls 2.2
 import QtQuick.Window 2.10 import QtQuick.Window 2.10
-import QtQuick.Layouts 1.3 
  
 Window { Window {
Line 19: Line 18:
     width: 640     width: 640
     height: 480     height: 480
-    title: qsTr("Hello World") +    title: qsTr("Square in a Rectangle")
     Rectangle {     Rectangle {
         color:"#​606060"​         color:"#​606060"​
         anchors.fill:​ parent         anchors.fill:​ parent
-        ​Rectangle ​+        ​Item 
-            width: Math.min(parent.width,​ parent.height) ​- 20 +            ​anchors.fill:​ parent 
-            height: Math.min(parent.width,​ parent.height) ​- 20 +            anchors.margins:​ 10 
-            x: (parent.width - Math.min(parent.width,​ parent.height)) / 2 + 10 +            Rectangle { 
-            y: (parent.height - Math.min(parent.width,​ parent.height)) / 2 + 10 +                // Math.min(parent.width,​ parent.height) gives the width AND height of this box 
-            color: '#​a0a0a0'​ +                // wrap this in a further item if you want a margin (see above) 
-            Button { +                ​width: Math.min(parent.width,​ parent.height) 
-                anchors.fill:​parent +                height: Math.min(parent.width,​ parent.height) 
-                text:'​Stretchy Box' +                // Either x or y will be 0. The other will be a delta between the min 
-                font.pixelSize:​ height * 0.1+                // and itself. Half of that is enough to center the object 
 +                ​x: (parent.width - Math.min(parent.width,​ parent.height)) / 2 
 +                y: (parent.height - Math.min(parent.width,​ parent.height)) / 2 
 +                color: '#​a0a0a0'​ 
 +                Button { 
 +                    // this is just here to show you how to put things inside 
 +                    ​anchors.fill:​parent 
 +                    text:'​Stretchy Box' 
 +                    font.pixelSize:​ height * 0.1 
 +                    onClicked: { 
 +                        text = "​You\nclicked\nme!"​ 
 +                    } 
 +                }
             }             }
         }         }
fitting_a_square_inside_a_rectangle_and_maintaining_aspect_ratio.txt · Last modified: 2018/05/01 19:01 by xylene