تطوير واجهات دائرية. الجزء 2. نقل المكتبة من JavaScript إلى QML

جدول المحتويات

مقدمة

مكتبة الواجهة الدائرية v2.0

Circular CAPTCHA

نقل المكتبة من JavaScript إلى QML

Demo Mobile Application

Conclusion

المقدمة

كانت المقالة السابقة مقدمة لتطوير الواجهات الدائرية. يناقش التعريف ، التصنيف ، مبادئ بناء الواجهات الدائرية ، بالإضافة إلى مقاربة تصميمها. توضح هذه المقالة التغييرات الرئيسية في المكتبة التي أقوم بتطويرها لتسهيل إنشاء واجهات دائرية بشكل أسرع.

أولاً ، تم إصدار الإصدار الثاني من مكتبة JavaScript ، والذي يقوم بتنفيذ عناصر تحكم دائرية.

ثانيًا ، تم تنفيذ المكتبة المطورة في QML ، وتم إطلاق تطبيق جوال لنظام Android لإثبات إمكاناتها .

مكتبة الواجهة الدائرية v2.0

عناصر أساسية ومساعدة جديدة

في الإصدار الأول من المكتبة ، تم تنفيذ العناصر الأساسية للواجهات الدائرية ، والتي أتاح الجمع بينها الحصول على تركيبات رسومية غير عادية. في الإصدار الثاني من المكتبة ، تم توسيع هذه المجموعة بالعناصر الموضحة في الشكل 1.

الشكل: 1 - عناصر أساسية ومساعدة جديدة

شبكة القطعة - شبكة المقطع (الشكل 1 أ). هذا جزء به شبكة قطبية مرسومة. يتم استخدامه في بناء مثل هذه العناصر الرسومية ، على سبيل المثال ، الرادار أو الهدف.

الجزء الحلزوني (الشكل 1 ب). هذا جزء من قطعة مفصولة بمنحنى حلزوني. غالبًا ما يستخدم للإشارة إلى قيمة متغيرة مثل الحجم.

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.

!