开发圆形接口。第2部分。将库从JavaScript移植到QML

目录

简介

循环接口库v2.0

循环CAPTCHA

将库从JavaScript移植到QML

演示移动应用程序

结束语

介绍

上一篇文章介绍了循环接口的开发。它讨论了构建圆形接口的定义，分类，原理以及它们的设计方法。本文介绍了我正在开发的库的主要更改，以使创建循环接口变得更加轻松快捷。

首先，发布了JavaScript库的第二个版本，该版本实现了循环控件。

其次，开发的库在QML中实现，并且发布了Android移动应用程序以演示其功能。

圆形接口库v2.0

新的基础和辅助元素

在该库的第一个版本中，实现了圆形界面的基本元素，将圆形界面的基本元素组合在一起就可以获取不同寻常的图形。在库的第二个版本中，此集合使用图1中所示的元素进行了扩展。

数字：1-新的基本和辅助元素

段网格-段网格（图1A）。这是一个带有绘制的极网格的线段。它用于构建诸如雷达或目标之类的图形元素。

段螺旋（图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.

!