Entwicklung kreisförmiger Schnittstellen. Teil 2. Portieren der Bibliothek von JavaScript nach QML

Inhaltsverzeichnis

Einführung

Circular Interface Library v2.0

Circular CAPTCHA

Portieren der Bibliothek von JavaScript auf QML

Demo Mobile Application

Fazit

Einführung

Der vorherige Artikel war eine Einführung in die Entwicklung kreisförmiger Schnittstellen. Es werden die Definition, Klassifizierung, Prinzipien des Aufbaus kreisförmiger Schnittstellen sowie ein Ansatz für deren Entwurf erörtert. Dieser Artikel beschreibt die wichtigsten Änderungen in einer Bibliothek, die ich entwickle, um das Erstellen kreisförmiger Schnittstellen einfacher und schneller zu machen.

Zunächst wurde die zweite Version der JavaScript- Bibliothek veröffentlicht , die zirkuläre Steuerelemente implementiert.

Zweitens wurde die entwickelte Bibliothek in QML implementiert und eine mobile Anwendung für Android veröffentlicht, um ihre Funktionen zu demonstrieren .

Circular Interface Library v2.0

Neue Basis- und Hilfselemente

, . , 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.

!