1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
import QtQuick 2.0
import "../contents"
Item {
id:container
width:360
height:600
Column {
spacing:5
anchors.fill:parent
Text { font.pointSize:25; text:"Squircles"; anchors.horizontalCenter:parent.horizontalCenter}
Image {
anchors.horizontalCenter:parent.horizontalCenter
source:"squircle.png"
width:250
height:25
}
Canvas {
id:canvas
width:360
height:360
smooth:true
renderTarget:Canvas.Image
threadRendering:false
property string strokeStyle:"blue"
property string fillStyle:"steelblue"
property int lineWidth:2
property int nSize:nCtrl.value
property real radius:rCtrl.value
property bool fill:true
property bool stroke:false
property real px:xCtrl.value
property real py:yCtrl.value
property real alpha:alphaCtrl.value
onAlphaChanged:requestPaint();
onRadiusChanged:requestPaint();
onLineWidthChanged:requestPaint();
onNSizeChanged:requestPaint();
onFillChanged:requestPaint();
onStrokeChanged:requestPaint();
onPxChanged:requestPaint();
onPyChanged:requestPaint();
onPaint: squcirle();
function squcirle() {
var ctx = canvas.getContext("2d");
var N = canvas.nSize;
var R = canvas.radius;
N=Math.abs(N);
var M=N;
if (N>100) M=100;
if (N<0.00000000001) M=0.00000000001;
ctx.reset();
ctx.globalAlpha =canvas.alpha;
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = canvas.strokeStyle;
ctx.fillStyle = canvas.fillStyle;
ctx.lineWidth = canvas.lineWidth;
ctx.beginPath();
var i = 0, x, y;
for (i=0; i<(2*R+1); i++){
x = Math.round(i-R) + canvas.px;
y = Math.round(Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(i-R),M)),1/M)) + canvas.py;
if (i == 0)
ctx.moveTo(x, y);
else
ctx.lineTo(x, y);
}
for (i=(2*R); i<(4*R+1); i++){
x =Math.round(3*R-i)+canvas.px;
y = Math.round(-Math.pow(Math.abs(Math.pow(R,M)-Math.pow(Math.abs(3*R-i),M)),1/M)) + canvas.py;
ctx.lineTo(x, y);
}
ctx.closePath();
if (canvas.stroke) {
ctx.stroke();
}
if (canvas.fill) {
ctx.fill();
}
ctx.fillStyle = "yellow";
ctx.font = "Helvetica 16px";
ctx.fillText("|X-" + Math.round(canvas.px) + "|^" + N + " + |Y-"+Math.round(canvas.py)+"|^" + N + " = |" + Math.round(R) + "|^" + N, canvas.px - 125, canvas.py);
}
}
Rectangle {
id:controls
width:360
height:160
Column {
spacing:3
Slider {id:nCtrl; width:300; height:30; min:1; max:10; init:4; name:"N"}
Slider {id:rCtrl; width:300; height:30; min:30; max:180; init:100; name:"Radius"}
Slider {id:xCtrl; width:300; height:30; min:50; max:300; init:180; name:"X"}
Slider {id:yCtrl; width:300; height:30; min:30; max:300; init:220; name:"Y"}
Slider {id:alphaCtrl; width:300; height:30; min:0; max:1; init:1; name:"Alpha"}
}
}
}
}
|
