import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.2
import QtQuick.Layouts 1.1
import QtQuick.Dialogs 1.1
Rectangle {
id: rectangleWindowView;
visible: true;
width: 1000;
height: 618;
color: "#EEE9E9";
property bool flag: false;
property real radiobuttonFlage;
property int cbxFlage;
function hiddenOrDisplay(flag){
if(!flag){
btnDisplayOrHidden.text = qsTr("Hidden");
}
else{
btnDisplayOrHidden.text = qsTr("display");
}
}
function backgroundColor(flag){
if(!flag){
rectangleWindowView.color = "#E0FFFF";
rectangleDrawArea.color = "#AAAAAA";
rectangleFunctionArea.color ="#F0F8FF";
rectangleDrawArea.border.color = "#5CACEE";
rectangleFunctionArea.border.color = "#5CACEE";
txtMode.color = "#9F79EE";
txtWidth.color = "#9F79EE";
txtHeight.color = "#9F79EE";
}
else{
rectangleWindowView.color = "#EEE9E9";
rectangleDrawArea.color = "#EBEBEB";
rectangleFunctionArea.color ="#EBEBEB";
rectangleDrawArea.border.color = "#AAAAAA";
rectangleFunctionArea.border.color = "#AAAAAA";
txtMode.color = "#black";
txtWidth.color = "#black";
txtHeight.color = "#black";
}
}
function cbxSelectArea(){
cbxFlage = cbxSelecting.currentIndex;
}
GridLayout {
anchors.left: parent.left;
anchors.leftMargin: 2;
anchors.top: parent.top;
anchors.bottomMargin: 5;
width: 1000;
height: 618;
rows: 1;
columns: 2;
rowSpacing: 4;
columnSpacing: 5;
flow: GridLayout.TopToBottom;
Rectangle {
id: rectangleDrawArea;
anchors.left: parent.left;
anchors.leftMargin: 4;
anchors.top: parent.top;
anchors.topMargin: 5;
width: 750;
height: 608;
color: "#EBEBEB";
border.width: 2;
border.color: "#AAAAAA";
Canvas {
id: canvasRectangle;
anchors.fill: rectangleDrawArea;
property real shapeX : -50;
property real shapeY : -50;
property real shapeWidth ;
property real shapeHeight ;
onPaint: {
switch(radiobuttonFlage){
case 0:
var ctx =getContext("2d");
ctx.fillStyle = "red";
ctx.linewidth = 2;
ctx.beginPath();
ctx.rect(shapeX,shapeY,shapeWidth,shapeHeight);
ctx.fill();
ctx.stroke();
break;
case 1:
var ctx1 =getContext("2d");
ctx1.fillStyle = "blue";
ctx1.linewidth = 2;
ctx1.beginPath();
ctx1.ellipse(shapeX,shapeY,shapeWidth,shapeHeight);
ctx1.fill();
ctx1.stroke();
break;
case 2:
var ctx2 =getContext("2d");
ctx2.fillStyle = "green"
ctx2.linewidth = 2;
ctx2.beginPath();
ctx2.moveTo(shapeWidth/2 + shapeX,shapeY);
ctx2.lineTo(shapeWidth + shapeX,shapeHeight + shapeY);
ctx2.lineTo(shapeX,shapeHeight + shapeY);
ctx2.closePath();
ctx2.fill;
ctx2.stroke();
break;
}
}
MouseArea {
id: mouseAreaClicked;
anchors.fill: parent;
onPressed: {
if(cbxFlage == 1){
canvasRectangle.shapeX = mouseX;
canvasRectangle.shapeY = mouseY;
canvasRectangle.shapeWidth = textfieldWidth.displayText;
canvasRectangle.shapeHeight = textfieldHeight.displayText;
}
}
onPositionChanged: {
canvasRectangle.requestPaint();
}
}//End of mouseAreaClicked
}// End of canvasRectangle
}// End of rectangleDrawArea
Rectangle {
id: rectangleFunctionArea;
anchors.left: rectangleDrawArea.right;
anchors.leftMargin: 4;
anchors.top: rectangleDrawArea.top;
width: 235;
height: 608;
color: "#EBEBEB";
border.width: 2;
border.color: "#AAAAAA";
property bool flag: false;
function hiddenOrDisplay(flag){
if(!flag){
display.text = qsTr("Hidden");
}
else{
display.text = qsTr("display");
}
}
ComboBox {
id: cbxSelecting;
currentIndex: 0;
anchors.top: rectangleFunctionArea.top;
anchors.topMargin: 10;
anchors.right: rectangleFunctionArea.right;
anchors.rightMargin: 20;
width: 110;
model: ["View","Add","Remove"];
onCurrentIndexChanged: cbxSelectArea();
}
Text {
id:txtMode;
anchors.left: rectangleFunctionArea.left;
anchors.leftMargin: 30;
anchors.top: rectangleFunctionArea.top;
anchors.topMargin: 20;
color: "black";
text: qsTr("Mode :");
font.pixelSize: 16;
}
Text {
id: txtWidth;
anchors.left: rectangleFunctionArea.left;
anchors.leftMargin: 30;
anchors.top: rectangleFunctionArea.top;
anchors.topMargin: 70;
color: "black";
text: qsTr("Width :");
font.pixelSize: 16;
}
TextField {
id: textfieldWidth;
validator: IntValidator{ top: 100; bottom: 0}
anchors.right: rectangleFunctionArea.right;
anchors.rightMargin: 20;
anchors.top: rectangleFunctionArea.top;
anchors.topMargin: 70;
placeholderText: "20";
width: 110;
height: 25;
}
Text {
id: txtHeight;
anchors.left: rectangleFunctionArea.left;
anchors.leftMargin: 30;
anchors.top: rectangleFunctionArea.top;
anchors.topMargin: 100;
color: "black";
text: qsTr("Heigth:");
font.pixelSize: 16;
}
TextField {
id: textfieldHeight;
validator: IntValidator{ top: 100; bottom: 0}
anchors.right: rectangleFunctionArea.right;
anchors.rightMargin: 20;
anchors.top: rectangleFunctionArea.top;
anchors.topMargin: 100;
placeholderText: "20";
width: 110;
height: 25;
}
GroupBox {
id: gbxGroup ;
title: "please choose a shapes!";
anchors.top: rectangleFunctionArea.top;
anchors.topMargin: 150;
anchors.left: rectangleFunctionArea.left;
anchors.leftMargin: 30;
width: 185;
height: 180;
Column {
RadioButton {
id: radiobuttonSquare;
text: qsTr("Rectangle");
checked: true;
onClicked: radiobuttonFlage = 0;
}
RadioButton {
id:radiobuttonTriangle;
text: qsTr("Ellipse");
onClicked: radiobuttonFlage = 1;
}
RadioButton {
id:radiobuttonEllipse;
text: qsTr("Triangle");
onClicked: radiobuttonFlage = 2;
}
}//End of Column
}//End of GroupBox
Button {
id: btnDisplayOrHidden;
text:qsTr("Display")
anchors.top: rectangleFunctionArea.top;
anchors.topMargin: 350;
anchors.right: rectangleFunctionArea.right;
anchors.rightMargin: 20;
width: 85;
onClicked: {
hiddenOrDisplay(flag);
flag = !flag;
}
}
Button {
id: btnChangeStyle;
text:qsTr("Style")
anchors.top: rectangleFunctionArea.top;
anchors.topMargin: 350;
anchors.left: rectangleFunctionArea.left;
anchors.leftMargin: 30;
width: 85;
}
Connections {
target: btnChangeStyle;
onClicked: {
backgroundColor(flag);
flag = ! flag;
}
}
}//End of rectangleFunctionArea
}//End of the first GridLayout
}//End of ALL