Pengembangan antarmuka melingkar. Bagian 2. Porting perpustakaan dari JavaScript ke QML

Daftar Isi

Pendahuluan

Circular Interface Library v2.0

Circular CAPTCHA

Porting Library dari JavaScript ke

Demo QML Aplikasi Seluler

Kesimpulan

pengantar

Artikel sebelumnya adalah pengantar pengembangan antarmuka melingkar. Ini membahas definisi, klasifikasi, prinsip-prinsip membangun antarmuka melingkar, serta pendekatan desainnya. Artikel ini menjelaskan perubahan utama dalam pustaka yang saya kembangkan untuk mempermudah dan mempercepat pembuatan antarmuka melingkar.

Pertama, versi kedua dari pustaka JavaScript dirilis , yang mengimplementasikan kontrol melingkar.

Kedua, pustaka yang dikembangkan diimplementasikan dalam QML , dan aplikasi seluler untuk Android dirilis untuk mendemonstrasikan kemampuannya .

Circular Interface Library v2.0

Elemen dasar dan tambahan baru

, . , 1.

. 1 –

Segment Grid – (. 1A). . , , .

Segment Spiral – (. 1B). , , . , , .

Segment Gradient “Conic” — (. 1C). , . , , «».

.

Progress Bar – . (. 2).

. 2 –

Timer – , (. 3).

. 3 –

Gauge – (. 4). , . -.

. 4 –

Chart – . 3 : «», «», «» (. 5 ).

. 5 –

Equalizer – (. 6). .

. 6 –

Knob – (. 7).

. 7 –

Volume Control – (. 8). : .

. 8 –

Radar – . (. 9). , .

. 9 –

CAPTCHA

CAPTCHA (. 10).

. 10 – CAPTCHA

CAPTCHA — , (, ). , , , , , .

CAPTCHA , . , .

.

:

• ;
• ;
• ;
• .

.

, .

JavaScript .

JavaScript QML

, QML .

, , , .

QML .

1.

JavaScript . QML . JS- QML- .

2. JavaScript QML

JavaScript QML . . JavaScript , dispatchEvent, .

3. QML Canvas HTML

QML Canvas c API, HTML- . .

JavaScript - . QML , context Canvas, . paint , .

Canvas , . onPaint Canvas context ( — Segment), initialized true. onPaint draw, .

QML:

JavaScript, QML requestAnimationFrame window, Canvas. , Canvas . :

QML:

segment.context.canvas.requestAnimationFrame(appearAnim);

4. setTimeout

QML setTimeout . JavaScript , Timer Utilities .

QML:

Utilities { id: utilities }

setTimeout utilities.setTimeout.

5.

, ,

JS:

Segment.prototype.calc = function() { … }

QML:

function calc() { … }

6.

JavaScript ( build) , :

JS:

let segment = new Segment (‘id’, context, cx, cy, r_in, thickness, init_angle, angle);

QML:

let component = Qt.createComponent("Segment.qml");

let segment = component.createObject(parent_id, { id: ‘id’, context: this.context,

cx: this.cx, cy: this.cy, r_in: segment_r_in, thickness: segment_thickness,

init_angle: new_init_angle, angle: segment_angle });

7. MouseArea

JavaScript addEventListener, QML MouseArea. , JavaScript , , ‘mouse’ ‘wheel’ ‘e’, , :

JS:

e.offsetX

e.offsetY

e.deltaY

:

QML:

e.x

e.y

e.angleDelta.y

8.

, :

SegmentProgressBar SegmentTimer . 100% , .. , , (. 11).

. 11 –

JavaScript- SegmentTimer SegmentProgressBar, , r_in, .. , , . .

, Segment, . Segment 360°, . . , Segment.

, 2- 2- (. 12) QML- Canvas, Context2D. .

. 12 –

360° JavaScript, QML. 360°.

, , , 2D JavaScript, fillRule :

• "nonzero":

• "evenodd": -

“nonzero”.

, , beginPath, fill . , , , “evenodd”.

Context2D QML 2 fillRule:

• Qt.OddEvenFill

• Qt.WindingFill

“Qt.WindingFill”.

JavaScript- . QML-, , :

QML:

context.fillRule = Qt.OddEvenFill;

, , Segment QML, , .

QML .

. . . .

. 13 —

- Google Play .

, « CAPTCHA», .

, JavaScript QML .

, .

: .. - QML iOS, - , , , igor@tiunovs.com.

!