• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2020-2021 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16/**
17 * @file
18 * @kit ArkUI
19 */
20
21import { Image, ImageData, ImageBitmap } from "./global";
22import image from "../../@ohos.multimedia.image";
23import { CanvasPattern } from './canvaspattern';
24
25/**
26 * Defines the focus param.
27 *
28 * @interface FocusParamObj
29 * @syscap SystemCapability.ArkUI.ArkUI.Full
30 * @since 3
31 */
32export interface FocusParamObj {
33  /**
34   * Whether needs to focus.
35   *
36   * @type { boolean }
37   * @syscap SystemCapability.ArkUI.ArkUI.Full
38   * @since 3
39   */
40  focus: boolean;
41}
42
43/**
44 * RectObj
45 *
46 * @interface RectObj
47 * @syscap SystemCapability.ArkUI.ArkUI.Full
48 * @since 6
49 */
50export interface RectObj {
51  /**
52   * @type { number }
53   * @syscap SystemCapability.ArkUI.ArkUI.Full
54   * @since 6
55   */
56  width: number;
57  /**
58   * @type { number }
59   * @syscap SystemCapability.ArkUI.ArkUI.Full
60   * @since 6
61   */
62  height: number;
63  /**
64   * @type { number }
65   * @syscap SystemCapability.ArkUI.ArkUI.Full
66   * @since 6
67   */
68  left: number;
69  /**
70   * @type { number }
71   * @syscap SystemCapability.ArkUI.ArkUI.Full
72   * @since 6
73   */
74  top: number;
75}
76
77/**
78 * ContextAttrOptions
79 *
80 * @interface ContextAttrOptions
81 * @syscap SystemCapability.ArkUI.ArkUI.Full
82 * @since 6
83 */
84export interface ContextAttrOptions {
85  /**
86   * @type { boolean }
87   * @syscap SystemCapability.ArkUI.ArkUI.Full
88   * @since 6
89   */
90  antialias: boolean;
91}
92
93/**
94 * AnimateStyle
95 *
96 * @interface AnimateStyle
97 * @syscap SystemCapability.ArkUI.ArkUI.Full
98 * @since 4
99 */
100export interface AnimateStyle {
101  /**
102   * Width value applied to the component after the animation is executed.
103   *
104   * @type { number }
105   * @syscap SystemCapability.ArkUI.ArkUI.Full
106   * @since 4
107   */
108  width: number;
109  /**
110   * Height value applied to the component after the animation is executed.
111   *
112   * @type { number }
113   * @syscap SystemCapability.ArkUI.ArkUI.Full
114   * @since 4
115   */
116  height: number;
117  /**
118   * left offset applied to the component after the animation is executed.
119   *
120   * @type { number }
121   * @syscap SystemCapability.ArkUI.ArkUI.Full
122   * @since 4
123   */
124  left: number;
125  /**
126   * top offset applied to the component after the animation is executed.
127   *
128   * @type { number }
129   * @syscap SystemCapability.ArkUI.ArkUI.Full
130   * @since 4
131   */
132  top: number;
133  /**
134   * right offset applied to the component after the animation is executed.
135   *
136   * @type { number }
137   * @syscap SystemCapability.ArkUI.ArkUI.Full
138   * @since 4
139   */
140  right: number;
141  /**
142   * bottom offset applied to the component after the animation is executed.
143   *
144   * @type { number }
145   * @syscap SystemCapability.ArkUI.ArkUI.Full
146   * @since 4
147   */
148  bottom: number;
149  /**
150   * Background color applied to the component after the animation is executed.
151   * The default value is none.
152   *
153   * @type { string }
154   * @syscap SystemCapability.ArkUI.ArkUI.Full
155   * @since 4
156   */
157  backgroundColor: string;
158  /**
159   * Opacity applied to the component. The value ranges from 0 to 1.
160   * The default value is 1.
161   *
162   * @type { number }
163   * @syscap SystemCapability.ArkUI.ArkUI.Full
164   * @since 4
165   */
166  opacity: number;
167  /**
168   * The value format is "x y", in percentage or pixels.
169   * The first value indicates the horizontal position, and the second value indicates the vertical position.
170   * If only one value is specified, the other value is 50% by default.
171   *
172   * @type { string }
173   * @syscap SystemCapability.ArkUI.ArkUI.Full
174   * @since 4
175   */
176  backgroundPosition: string;
177  /**
178   * Origin position of the transformed element.
179   * The first value indicates the x-axis position. The value can be left, center, right, a length, or percentage.
180   * The second value indicates the y-axis position. The value can be top, center, bottom, a length, or a percentage.
181   *
182   * @type { string }
183   * @syscap SystemCapability.ArkUI.ArkUI.Full
184   * @since 4
185   */
186  transformOrigin: string;
187  /**
188   * Transformation type applied to an element.
189   *
190   * @type { "none" | TransformObject }
191   * @syscap SystemCapability.ArkUI.ArkUI.Full
192   * @since 4
193   */
194  transform: "none" | TransformObject;
195  /**
196   * The value of offset must be within (0.0,1.0] and sorted in ascending order if it is provided.
197   * If there are only two frames, offset can be left empty.
198   * If there are more than two frames, offset is mandatory.
199   *
200   * @type { ?number }
201   * @syscap SystemCapability.ArkUI.ArkUI.Full
202   * @since 4
203   */
204  offset?: number;
205}
206
207/**
208 * TransformObject
209 *
210 * @interface TransformObject
211 * @syscap SystemCapability.ArkUI.ArkUI.Full
212 * @since 4
213 */
214export interface TransformObject {
215  /**
216   * Defines a 2D transformation, using a matrix of six values..
217   *
218   * @param { number } scaleX - the scale value for x-axis
219   * @param { number } skewX - the skew value for y-axis
220   * @param { number } skewY - the skew value for x-axis
221   * @param { number } scaleY - the scale value for y-axis
222   * @param { number } translateX - the translate value for x-axis
223   * @param { number } translateY - the translate value for y-axis
224   * @syscap SystemCapability.ArkUI.ArkUI.Full
225   * @since 6
226   */
227  matrix(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void;
228  /**
229   * Defines a 3D transformation using a 4x4 matrix of 16 values.
230   *
231   * @param { number } n00 - the value of the 0 row and 0 column of the 4x4 matrix
232   * @param { number } n01 - the value of the 0 row and 1 column of the 4x4 matrix
233   * @param { number } n02 - the value of the 0 row and 2 column of the 4x4 matrix
234   * @param { number } n03 - the value of the 0 row and 3 column of the 4x4 matrix
235   * @param { number } n10 - the value of the 1 row and 0 column of the 4x4 matrix
236   * @param { number } n11 - the value of the 1 row and 1 column of the 4x4 matrix
237   * @param { number } n12 - the value of the 1 row and 2 column of the 4x4 matrix
238   * @param { number } n13 - the value of the 1 row and 3 column of the 4x4 matrix
239   * @param { number } n20 - the value of the 2 row and 0 column of the 4x4 matrix
240   * @param { number } n21 - the value of the 2 row and 1 column of the 4x4 matrix
241   * @param { number } n22 - the value of the 2 row and 2 column of the 4x4 matrix
242   * @param { number } n23 - the value of the 2 row and 3 column of the 4x4 matrix
243   * @param { number } n30 - the value of the 3 row and 0 column of the 4x4 matrix
244   * @param { number } n31 - the value of the 3 row and 1 column of the 4x4 matrix
245   * @param { number } n32 - the value of the 3 row and 2 column of the 4x4 matrix
246   * @param { number } n33 - the value of the 3 row and 3 column of the 4x4 matrix
247   * @syscap SystemCapability.ArkUI.ArkUI.Full
248   * @since 6
249   */
250  matrix3d(
251    n00: number,
252    n01: number,
253    n02: number,
254    n03: number,
255    n10: number,
256    n11: number,
257    n12: number,
258    n13: number,
259    n20: number,
260    n21: number,
261    n22: number,
262    n23: number,
263    n30: number,
264    n31: number,
265    n32: number,
266    n33: number,
267  ): void;
268  /**
269   * Defines 2D transformations for translation of the X and Y axes
270   *
271   * @param { number } x - the translate value for x-axis
272   * @param { number } y - the translate value for y-axis
273   * @syscap SystemCapability.ArkUI.ArkUI.Full
274   * @since 4
275   */
276  translate(x: number, y: number): void;
277  /**
278   * Defines 3D transformations for translation of the X / Y / Z axes
279   *
280   * @param { number } x - the translate value for x-axis
281   * @param { number } y - the translate value for y-axis
282   * @param { number } z - the translate value for z-axis
283   * @syscap SystemCapability.ArkUI.ArkUI.Full
284   * @since 6
285   */
286  translate3d(x: number, y: number, z: number): void;
287  /**
288   * Defines 2D transformations for translation of the X axes
289   *
290   * @param { number } x - the translate value for x-axis
291   * @syscap SystemCapability.ArkUI.ArkUI.Full
292   * @since 4
293   */
294  translateX(x: number): void;
295  /**
296   * Defines 2D transformations for translation of the Y axes
297   *
298   * @param { number } y - the translate value for y-axis
299   * @syscap SystemCapability.ArkUI.ArkUI.Full
300   * @since 4
301   */
302  translateY(y: number): void;
303  /**
304   * Defines 3D transformations for translation of the Z axes
305   *
306   * @param { number } z the translate value for z-axis
307   * @syscap SystemCapability.ArkUI.ArkUI.Full
308   * @since 6
309   */
310  translateZ(z: number): void;
311  /**
312   * Defines 2D transformations for scaling of the X and Y axes
313   *
314   * @param { number } x - the scale value for x-axis
315   * @param { number } y - the scale value for y-axis
316   * @syscap SystemCapability.ArkUI.ArkUI.Full
317   * @since 4
318   */
319  scale(x: number, y: number): void;
320  /**
321   * Defines 3D transformations for scaling of the X / Y / Z axes
322   *
323   * @param { number } x - the scale value for x-axis
324   * @param { number } y - the scale value for y-axis
325   * @param { number } z - the scale value for z-axis
326   * @syscap SystemCapability.ArkUI.ArkUI.Full
327   * @since 6
328   */
329  scale3d(x: number, y: number, z: number): void;
330  /**
331   * Defines 2D transformations for scaling of the X axes
332   *
333   * @param { number } x - the scale value for x-axis
334   * @syscap SystemCapability.ArkUI.ArkUI.Full
335   * @since 4
336   */
337  scaleX(x: number): void;
338  /**
339   * Defines 2D transformations for scaling of the Y axes
340   *
341   * @param { number } y - the scale value for y-axis
342   * @syscap SystemCapability.ArkUI.ArkUI.Full
343   * @since 4
344   */
345  scaleY(y: number): void;
346  /**
347   * Defines 3D transformations for scaling of the Z axes
348   *
349   * @param { number } z - the scale value for z-axis
350   * @syscap SystemCapability.ArkUI.ArkUI.Full
351   * @since 6
352   */
353  scaleZ(z: number): void;
354  /**
355   * Define the 2D rotation and specify the angle in the parameters.
356   *
357   * @param { number } angle - the rotate value for z-axis
358   * @syscap SystemCapability.ArkUI.ArkUI.Full
359   * @since 4
360   */
361  rotate(angle: number): void;
362  /**
363   * Defines a 3D transformation for rotating the X / Y / Z axes.
364   *
365   * @param { number } x - the vector value of the x-axis
366   * @param { number } y - the vector value of the y-axis
367   * @param { number } z - the vector value of the z-axis
368   * @param { number } angle - the rotate value for x&y&z vector.
369   * @syscap SystemCapability.ArkUI.ArkUI.Full
370   * @since 6
371   */
372  rotate3d(x: number, y: number, z: number, angle: number): void;
373  /**
374   * Defines 3D transformations for rotating of the X axes.
375   *
376   * @param { number } angle - the scale value for x-axis
377   * @syscap SystemCapability.ArkUI.ArkUI.Full
378   * @since 4
379   */
380  rotateX(angle: number): void;
381  /**
382   * Defines 3D transformations for rotating of the Y axes.
383   *
384   * @param { number } angle - the scale value for y-axis
385   * @syscap SystemCapability.ArkUI.ArkUI.Full
386   * @since 4
387   */
388  rotateY(angle: number): void;
389  /**
390   * Defines 3D transformations for rotating of the Z axes.
391   *
392   * @param { number } angle - the scale value for z-axis
393   * @syscap SystemCapability.ArkUI.ArkUI.Full
394   * @since 6
395   */
396  rotateZ(angle: number): void;
397  /**
398   * Defines the 2D skew transition along the X and Y axes.
399   *
400   * @param { number } xAngle - the angle of inclination along the x axis.
401   * @param { number } yAngle - the angle of inclination along the y axis.
402   * @syscap SystemCapability.ArkUI.ArkUI.Full
403   * @since 6
404   */
405  skew(xAngle: number, yAngle: number): void;
406  /**
407   * Defines the 2D skew transition along the X axes.
408   *
409   * @param { number } angle - the angle of inclination along the x axis.
410   * @syscap SystemCapability.ArkUI.ArkUI.Full
411   * @since 6
412   */
413  skewX(angle: number): void;
414  /**
415   * Defines the 2D skew transition along the Y axes.
416   *
417   * @param { number } angle - the angle of inclination along the y axis.
418   * @syscap SystemCapability.ArkUI.ArkUI.Full
419   * @since 6
420   */
421  skewY(angle: number): void;
422  /**
423   * Defines a perspective view for the 3D transformation element.
424   *
425   * @param { number } verticalDistance - the vertical distance from the observation point to the component plane.
426   * @syscap SystemCapability.ArkUI.ArkUI.Full
427   * @since 6
428   */
429  perspective(verticalDistance: number): void;
430}
431
432/**
433 * AnimateOptions
434 *
435 * @interface AnimateOptions
436 * @syscap SystemCapability.ArkUI.ArkUI.Full
437 * @since 4
438 */
439export interface AnimateOptions {
440  /**
441   * Duration of the animation, in milliseconds.
442   * The default value is 0.
443   *
444   * @type { number }
445   * @syscap SystemCapability.ArkUI.ArkUI.Full
446   * @since 4
447   */
448  duration: number;
449
450  /**
451   * Time curve of the animation. For details about the supported types.
452   * linear The animation speed keeps unchanged.
453   * ease The animation starts and ends at a low speed, cubic-bezier(0.25, 0.1, 0.25, 1.0).
454   * ease-in The animation starts at a low speed, cubic-bezier(0.42, 0.0, 1.0, 1.0).
455   * ease-out The animation ends at a low speed, cubic-bezier(0.0, 0.0, 0.58, 1.0).
456   * ease-in-out The animation starts and ends at a low speed, cubic-bezier(0.42, 0.0, 0.58, 1.0).
457   * fast-out-slow-in Standard curve, cubic-bezier(0.4, 0.0, 0.2, 1.0).
458   * linear-out-slow-in Deceleration curve, cubic-bezier(0.0, 0.0, 0.2, 1.0).
459   * fast-out-linear-in Acceleration curve, cubic-bezier(0.4, 0.0, 1.0, 1.0).
460   * friction Damping curve, cubic-bezier(0.2, 0.0, 0.2, 1.0).
461   * extreme-deceleration Extreme deceleration curve, cubic-bezier(0.0, 0.0, 0.0, 1.0).
462   * sharp Sharp curve, cubic-bezier(0.33, 0.0, 0.67, 1.0).
463   * rhythm Rhythm curve, cubic-bezier(0.7, 0.0, 0.2, 1.0).
464   * smooth Smooth curve, cubic-bezier(0.4, 0.0, 0.4, 1.0).
465   * cubic-bezier(x1, y1, x2, y2) You can customize an animation speed curve in the cubic-bezier() function.
466   * The x and y values of each input parameter must be between 0 and 1.
467   * Step curve. The number must be set and only an integer is supported, step-position is optional. It can be set to start or end. The default value is end.
468   * The default value is ease.
469   *
470   * @type { string }
471   * @syscap SystemCapability.ArkUI.ArkUI.Full
472   * @since 4
473   */
474  easing: string;
475
476  /**
477   * Delay for the animation start. The default value indicates no delay.
478   * The default value is 0.
479   *
480   * @type { number }
481   * @syscap SystemCapability.ArkUI.ArkUI.Full
482   * @since 4
483   */
484  delay: number;
485
486  /**
487   * Number of times the animation will be played. number indicates a fixed number of playback operations,
488   * and Infinity indicates an unlimited number of playback operations.
489   * The default value is 1.
490   *
491   * @type { number | string }
492   * @syscap SystemCapability.ArkUI.ArkUI.Full
493   * @since 4
494   */
495  iterations: number | string;
496
497  /**
498   * The animation playback mode.
499   * The default value is "normal".
500   *
501   * @type { "normal" | "reverse" | "alternate" | "alternate-reverse" }
502   * @syscap SystemCapability.ArkUI.ArkUI.Full
503   * @since 6
504   */
505  direction: "normal" | "reverse" | "alternate" | "alternate-reverse";
506
507  /**
508   * Whether to resume to the initial state after the animation is executed.
509   * none: The initial state is restored after the animation is executed.
510   * forwards: The state at the end of the animation (defined in the last key frame) is retained after the animation is executed.
511   *
512   * @type { "none" | "forwards" | "backwards" | "both" }
513   * @syscap SystemCapability.ArkUI.ArkUI.Full
514   * @since 4
515   */
516  fill: "none" | "forwards" | "backwards" | "both";
517}
518
519/**
520 * AnimationResult
521 *
522 * @interface AnimationResult
523 * @syscap SystemCapability.ArkUI.ArkUI.Full
524 * @since 4
525 */
526export interface AnimationResult {
527  /**
528   * Read-only attribute, which indicates whether the animation playback is complete.
529   *
530   * @type { boolean }
531   * @syscap SystemCapability.ArkUI.ArkUI.Full
532   * @since 4
533   */
534  finished: boolean;
535  /**
536   * Read-only attribute, which indicates whether an animation is waiting for the completion of other asynchronous operations
537   * (for example, start an animation with a delay).
538   *
539   * @type { boolean }
540   * @syscap SystemCapability.ArkUI.ArkUI.Full
541   * @since 4
542   */
543  pending: boolean;
544  /**
545   * Animation running state:
546   * idle: The animation is not running (playback ended or not started).
547   * running: The animation is running.
548   * paused: The animation is paused.
549   * finished: Animation playback ends.
550   *
551   * @type { string }
552   * @syscap SystemCapability.ArkUI.ArkUI.Full
553   * @since 4
554   */
555  playstate: string;
556  /**
557   * Animation start time. This attribute is similar to that of delay in the options parameters.
558   *
559   * @type { number }
560   * @syscap SystemCapability.ArkUI.ArkUI.Full
561   * @since 4
562   */
563  startTime: number;
564  /**
565   * Starts the animation.
566   *
567   * @syscap SystemCapability.ArkUI.ArkUI.Full
568   * @since 4
569   */
570  play(): void;
571  /**
572   * Ends the animation.
573   *
574   * @syscap SystemCapability.ArkUI.ArkUI.Full
575   * @since 4
576   */
577  finish(): void;
578  /**
579   * Pauses the animation.
580   *
581   * @syscap SystemCapability.ArkUI.ArkUI.Full
582   * @since 4
583   */
584  pause(): void;
585  /**
586   * Cancels the animation.
587   *
588   * @syscap SystemCapability.ArkUI.ArkUI.Full
589   * @since 4
590   */
591  cancel(): void;
592  /**
593   * Plays the animation in reverse direction.
594   *
595   * @syscap SystemCapability.ArkUI.ArkUI.Full
596   * @since 4
597   */
598  reverse(): void;
599  /**
600   * The animation is started.
601   *
602   * @type { function }
603   * @syscap SystemCapability.ArkUI.ArkUI.Full
604   * @since 4
605   */
606  onstart: () => void;
607  /**
608   * The animation is finished.
609   *
610   * @type { function }
611   * @syscap SystemCapability.ArkUI.ArkUI.Full
612   * @since 4
613   */
614  onfinish: () => void;
615  /**
616   * The animation is canceled.
617   *
618   * @type { function }
619   * @syscap SystemCapability.ArkUI.ArkUI.Full
620   * @since 4
621   */
622  oncancel: () => void;
623  /**
624   * The animation is repeated.
625   *
626   * @type { function }
627   * @syscap SystemCapability.ArkUI.ArkUI.Full
628   * @since 4
629   */
630  onrepeat: () => void;
631}
632
633/**
634 * Element
635 *
636 * @interface Element
637 * @syscap SystemCapability.ArkUI.ArkUI.Full
638 * @since 4
639 */
640export interface Element {
641  /**
642   * Requests or cancels the focus for a component.
643   * If focus is set to true, the focus is requested for the component.
644   * If focus is set to false, the focus is canceled for the component.
645   * This attribute can be defaulted to true.
646   *
647   * @param { FocusParamObj } [obj] - { focus: true | false }
648   * @syscap SystemCapability.ArkUI.ArkUI.Full
649   * @since 4
650   */
651  focus(obj?: FocusParamObj): void;
652
653  /**
654   * Requests or cancels the crown rotation focus for a component.
655   * If focus is set to true, the crown event focus is requested.
656   * If focus is set to false, the crown event focus is canceled.
657   * This attribute can be defaulted to true.
658   *
659   * @param { FocusParamObj } [obj] - { focus: true | false }
660   * @syscap SystemCapability.ArkUI.ArkUI.Full
661   * @since 4
662   */
663  rotation(obj?: FocusParamObj): void;
664
665  /**
666   * Creates and runs an animation shortcut on the component. Specify the keyframes and options required for the animation.
667   *
668   * @param { Array<AnimateStyle> } keyframes - keyframes is used to describe key frame parameters of the animation.
669   * @param { AnimateOptions } options - Options. is used to describe animation parameters.
670   * @returns { AnimationResult } This method returns the animation object.
671   * @syscap SystemCapability.ArkUI.ArkUI.Full
672   * @since 4
673   */
674  animate(keyframes: Array<AnimateStyle>, options: AnimateOptions): AnimationResult;
675
676  /**
677   * Obtains the size and position of the element.
678   *
679   * @returns { RectObj } RectObj the size position of the element.
680   * @syscap SystemCapability.ArkUI.ArkUI.Full
681   * @since 6
682   */
683  getBoundingClientRect(): RectObj;
684
685  /**
686   * Obtains attributes of the element.
687   *
688   * @returns { string } attributes of the element in json string.
689   * @syscap SystemCapability.ArkUI.ArkUI.Full
690   * @systemapi
691   * @since 8
692   */
693  getInspector(): string;
694
695  /**
696   * If 0.5 is returned, 50% of the current component is visible.
697   *
698   * @param { object } param - Scope of Monitoring components.
699   * @returns { observer }
700   * @syscap SystemCapability.ArkUI.ArkUI.Full
701   * @since 6
702   */
703  createIntersectionObserver(param: { ratios: Array<number> }): observer;
704
705  /**
706   * Adds a node to the end of the child node list of the current node.
707   *
708   * @param { Element } child - Subnode object to be added
709   * @syscap SystemCapability.ArkUI.ArkUI.Full
710   * @since 8
711   */
712  addChild(child: Element): void;
713
714  /**
715   * Sets the value of an attribute on a specified element. If the attribute already exists, update the value. Otherwise, a new attribute is added with the specified name and value.
716   *
717   * @param { string } name - attribute name
718   * @param { string } value - attribute value¡¢
719   * @syscap SystemCapability.ArkUI.ArkUI.Full
720   * @since 8
721   */
722  setAttribute(name: string, value: string): void;
723
724  /**
725   * Sets a style value on a specified element. If the style exists and the style value is valid, the setting is successful. Otherwise, the setting is invalid.
726   *
727   * @param { string } name - style name
728   * @param { string } value - style value
729   * @returns { boolean } If the setting is successful, true is returned. If the setting fails, false is returned.
730   * @syscap SystemCapability.ArkUI.ArkUI.Full
731   * @since 8
732   */
733  setStyle(name: string, value: string): boolean;
734}
735
736/**
737 * Defines the observer interface.
738 *
739 * @interface observer
740 * @syscap SystemCapability.ArkUI.ArkUI.Full
741 * @since 6
742 */
743export interface observer {
744  /**
745   * Turn on the listener.
746   *
747   * @param { string } callback
748   * @syscap SystemCapability.ArkUI.ArkUI.Full
749   * @since 6
750   */
751  observe(callback: string): void;
752
753  /**
754   * Turn off the listener.
755   *
756   * @syscap SystemCapability.ArkUI.ArkUI.Full
757   * @since 6
758   */
759  unobserve(): void;
760}
761
762/**
763 * animation element
764 *
765 * @extends Element
766 * @interface AnimationElement
767 * @syscap SystemCapability.ArkUI.ArkUI.Full
768 * @since 4
769 */
770export interface AnimationElement extends Element {
771  /**
772   * Starts the animation.
773   *
774   * @syscap SystemCapability.ArkUI.ArkUI.Full
775   * @since 4
776   */
777  play(): void;
778  /**
779   * Ends the animation.
780   *
781   * @syscap SystemCapability.ArkUI.ArkUI.Full
782   * @since 4
783   */
784  finish(): void;
785  /**
786   * Pauses the animation.
787   *
788   * @syscap SystemCapability.ArkUI.ArkUI.Full
789   * @since 4
790   */
791  pause(): void;
792  /**
793   * Cancels the animation.
794   *
795   * @syscap SystemCapability.ArkUI.ArkUI.Full
796   * @since 4
797   */
798  cancel(): void;
799  /**
800   * Plays the animation in reverse direction.
801   *
802   * @syscap SystemCapability.ArkUI.ArkUI.Full
803   * @since 4
804   */
805  reverse(): void;
806}
807
808/**
809 * ScrollParam
810 *
811 * @interface ScrollParam
812 * @syscap SystemCapability.ArkUI.ArkUI.Full
813 * @since 4
814 */
815export interface ScrollParam {
816  /**
817   * Offset for scrolling in the horizontal direction, in px.
818   *
819   * @type { ?number }
820   * @syscap SystemCapability.ArkUI.ArkUI.Full
821   * @since 4
822   */
823  dx?: number;
824
825  /**
826   * Offset for scrolling in the vertical direction, in px.
827   *
828   * @type { ?number }
829   * @syscap SystemCapability.ArkUI.ArkUI.Full
830   * @since 4
831   */
832  dy?: number;
833
834  /**
835   * Whether a sliding animation is displayed when scroll position is changed.
836   *
837   * @type { ?boolean }
838   * @syscap SystemCapability.ArkUI.ArkUI.Full
839   * @since 4
840   */
841  smooth?: boolean;
842}
843
844/**
845 * CurrentOffsetResultValue
846 *
847 * @interface CurrentOffsetResultValue
848 * @syscap SystemCapability.ArkUI.ArkUI.Full
849 * @since 4
850 */
851export interface CurrentOffsetResultValue {
852  /**
853   * Scrolling offset in the x-axis, in px.
854   *
855   * @type { number }
856   * @syscap SystemCapability.ArkUI.ArkUI.Full
857   * @since 4
858   */
859  x: number;
860
861  /**
862   * Scrolling offset in the y-axis, in px.
863   *
864   * @type { number }
865   * @syscap SystemCapability.ArkUI.ArkUI.Full
866   * @since 4
867   */
868  y: number;
869}
870
871/**
872 * ListScrollToOptions
873 *
874 * @interface ListScrollToOptions
875 * @syscap SystemCapability.ArkUI.ArkUI.Full
876 * @since 4
877 */
878export interface ListScrollToOptions {
879  /**
880   * specified position.
881   *
882   * @type { number }
883   * @syscap SystemCapability.ArkUI.ArkUI.Lite
884   * @since 4
885   */
886  index: number;
887}
888
889/**
890 * The <list> component provides a list container.
891 *
892 * @extends Element
893 * @interface ListElement
894 * @syscap SystemCapability.ArkUI.ArkUI.Full
895 * @since 4
896 */
897export interface ListElement extends Element {
898  /**
899   * Scrolls the list to the position of the item at the specified index.
900   *
901   * @param { ListScrollToOptions } position
902   * @syscap SystemCapability.ArkUI.ArkUI.Lite
903   * @since 4
904   */
905  scrollTo(position: ListScrollToOptions): void;
906
907  /**
908   * Scrolls the list for a certain distance.
909   * This method applies only to smart TVs.
910   *
911   * @param { ScrollParam } data
912   * @syscap SystemCapability.ArkUI.ArkUI.Full
913   * @since 4
914   */
915  scrollBy(data: ScrollParam): void;
916
917  /**
918   * If smooth is set to false (default value), the list is directly scrolled to the top.
919   * If smooth is set to true, the list is smoothly scrolled to the top.
920   *
921   * @param { object } param
922   * @syscap SystemCapability.ArkUI.ArkUI.Full
923   * @since 4
924   */
925  scrollTop(param: { smooth: boolean }): void;
926
927  /**
928   * If smooth is set to false (default value), the list is directly scrolled to the bottom.
929   * If smooth is set to true, the list is smoothly scrolled to the bottom.
930   *
931   * @param { object } param
932   * @syscap SystemCapability.ArkUI.ArkUI.Full
933   * @since 4
934   */
935  scrollBottom(param: { smooth: boolean }): void;
936
937  /**
938   * If reverse is set to false (default value), the next page is displayed. If there is no next page, the list scrolls to the bottom.
939   * If reverse is set to true, the previous page is displayed. If there is no previous page, the list scrolls to the top.
940   * If smooth is set to false (default value), the list is directly scrolled to another page.
941   * If smooth is set to true, the list is smoothly scrolled to another page.
942   *
943   * @param { object } params
944   * @syscap SystemCapability.ArkUI.ArkUI.Full
945   * @since 4
946   */
947  scrollPage(params: { reverse: boolean; smooth: boolean }): void;
948
949  /**
950   * If reverse is set to false (default value), the list scrolls towards the bottom for a certain distance. If there is no sufficient distance, the list scrolls to the bottom.
951   * If reverse is set to true, the list scrolls towards the top for a certain distance. If there is no sufficient distance, the list scrolls to the top.
952   * If smooth is set to false (default value), the list is directly scrolled.
953   * If smooth is set to true, the list is smoothly scrolled.
954   *
955   * @param { object } params
956   * @syscap SystemCapability.ArkUI.ArkUI.Full
957   * @since 4
958   */
959  scrollArrow(params: { reverse: boolean; smooth: boolean }): void;
960
961  /**
962   * Collapses a group.
963   *
964   * @param { object } param
965   * @syscap SystemCapability.ArkUI.ArkUI.Full
966   * @since 4
967   */
968  collapseGroup(param: {
969    /**
970     * groupid: ID of the group to collapse.
971     * All groups are collapsed when groupid is not specified.
972     *
973     * @type { string }
974     * @syscap SystemCapability.ArkUI.ArkUI.Full
975     * @since 4
976     */
977    groupid: string;
978  }): void;
979
980  /**
981   * Expands a group.
982   *
983   * @param { object } param
984   * @syscap SystemCapability.ArkUI.ArkUI.Full
985   * @since 4
986   */
987  expandGroup(param: {
988    /**
989     * groupid: ID of the group to expand.
990     * All groups are expanded when groupid is not specified.
991     *
992     * @type { string }
993     * @syscap SystemCapability.ArkUI.ArkUI.Full
994     * @since 4
995     */
996    groupid: string;
997  }): void;
998
999  /**
1000   * Returns the offset of the current scrolling. The return value type is Object.
1001   *
1002   * @returns { CurrentOffsetResultValue }
1003   * @syscap SystemCapability.ArkUI.ArkUI.Full
1004   * @since 4
1005   */
1006  currentOffset(): CurrentOffsetResultValue;
1007}
1008
1009/**
1010 * The <swiper> component provides a swiper container.
1011 *
1012 * @extends Element
1013 * @interface SwiperElement
1014 * @syscap SystemCapability.ArkUI.ArkUI.Full
1015 * @since 4
1016 */
1017export interface SwiperElement extends Element {
1018  /**
1019   * Scrolls the child component to the position at the specified index.
1020   *
1021   * @param { object } position
1022   * @syscap SystemCapability.ArkUI.ArkUI.Full
1023   * @since 4
1024   */
1025  swipeTo(position: {
1026    /**
1027     * specified position.
1028     *
1029     * @type { number }
1030     * @syscap SystemCapability.ArkUI.ArkUI.Full
1031     * @since 4
1032     */
1033    index: number;
1034  }): void;
1035
1036  /**
1037   * Shows the next child component.
1038   *
1039   * @syscap SystemCapability.ArkUI.ArkUI.Full
1040   * @since 4
1041   */
1042  showNext(): void;
1043
1044  /**
1045   * Shows the previous child component.
1046   *
1047   * @syscap SystemCapability.ArkUI.ArkUI.Full
1048   * @since 4
1049   */
1050  showPrevious(): void;
1051}
1052
1053/**
1054 * CameraTakePhotoOptions
1055 *
1056 * @interface CameraTakePhotoOptions
1057 * @syscap SystemCapability.ArkUI.ArkUI.Full
1058 * @since 6
1059 */
1060export interface CameraTakePhotoOptions {
1061  /**
1062   * Picture quality.
1063   *
1064   * @type { "high" | "normal" | "low" }
1065   * @syscap SystemCapability.ArkUI.ArkUI.Full
1066   * @since 6
1067   */
1068  quality: "high" | "normal" | "low";
1069
1070  /**
1071   * Callback function for successful interface invocation.
1072   *
1073   * @type { ?function }
1074   * @syscap SystemCapability.ArkUI.ArkUI.Full
1075   * @since 6
1076   */
1077  success?: (result: Object) => void;
1078
1079  /**
1080   * Callback function for interface invocation failure.
1081   *
1082   * @type { ?function }
1083   * @syscap SystemCapability.ArkUI.ArkUI.Full
1084   * @since 6
1085   */
1086  fail?: (result: Object) => void;
1087
1088  /**
1089   * Callback function at the end of the interface invoking (executed both successfully and unsuccessfully).
1090   *
1091   * @type { ?function }
1092   * @syscap SystemCapability.ArkUI.ArkUI.Full
1093   * @since 6
1094   */
1095  complete?: (result: Object) => void;
1096}
1097
1098/**
1099 * The <camera> component provides preview and photographing functions.
1100 *
1101 * @extends Element
1102 * @interface CameraElement
1103 * @syscap SystemCapability.ArkUI.ArkUI.Full
1104 * @since 6
1105 */
1106export interface CameraElement extends Element {
1107  /**
1108   * Take photos with specified parameters.
1109   *
1110   * @param { CameraTakePhotoOptions } options - the parameters of camera.
1111   * @syscap SystemCapability.ArkUI.ArkUI.Full
1112   * @since 6
1113   */
1114  takePhoto(options: CameraTakePhotoOptions): void;
1115}
1116
1117/**
1118 * The <web> component is a container for displaying web page content.
1119 *
1120 * @extends Element
1121 * @interface WebElement
1122 * @syscap SystemCapability.ArkUI.ArkUI.Full
1123 * @since 6
1124 */
1125export interface WebElement extends Element {
1126  /**
1127   * Reload the web page content
1128   *
1129   * @syscap SystemCapability.ArkUI.ArkUI.Full
1130   * @since 6
1131   */
1132  reload(): void;
1133}
1134
1135/**
1136 * The <dialog> component is a custom pop-up container.
1137 *
1138 * @extends Element
1139 * @interface DialogElement
1140 * @syscap SystemCapability.ArkUI.ArkUI.Full
1141 * @since 4
1142 */
1143export interface DialogElement extends Element {
1144  /**
1145   * Shows a dialog box.
1146   *
1147   * @syscap SystemCapability.ArkUI.ArkUI.Full
1148   * @since 4
1149   */
1150  show(): void;
1151  /**
1152   * Closes a dialog box.
1153   *
1154   * @syscap SystemCapability.ArkUI.ArkUI.Full
1155   * @since 4
1156   */
1157  close(): void;
1158}
1159
1160/**
1161 * The <image-animator> component is used to provide an image frame animator.
1162 *
1163 * @extends Element
1164 * @interface ImageAnimatorElement
1165 * @syscap SystemCapability.ArkUI.ArkUI.Lite
1166 * @since 4
1167 */
1168export interface ImageAnimatorElement extends Element {
1169  /**
1170   * Starts to play the frame animation of an image. If this method is called again, the playback starts from the first frame.
1171   *
1172   * @syscap SystemCapability.ArkUI.ArkUI.Full
1173   * @since 4
1174   */
1175  start(): void;
1176  /**
1177   * Pauses the frame animation playback of an image.
1178   *
1179   * @syscap SystemCapability.ArkUI.ArkUI.Full
1180   * @since 4
1181   */
1182  pause(): void;
1183  /**
1184   * Stops the frame animation playback of an image.
1185   *
1186   * @syscap SystemCapability.ArkUI.ArkUI.Full
1187   * @since 4
1188   */
1189  stop(): void;
1190  /**
1191   * Resumes the frame animation playback of an image.
1192   *
1193   * @syscap SystemCapability.ArkUI.ArkUI.Full
1194   * @since 4
1195   */
1196  resume(): void;
1197  /**
1198   * Obtains the playback state. Available values are as follows:
1199   * Playing
1200   * Paused
1201   * Stopped
1202   *
1203   * @returns { "Playing" | "Paused" | "Stopped" }
1204   * @syscap SystemCapability.ArkUI.ArkUI.Full
1205   * @since 4
1206   */
1207  getState(): "Playing" | "Paused" | "Stopped";
1208}
1209
1210/**
1211 * The <marquee> component inserts scrolling text, which is displayed in a single line by default.
1212 * When the text length exceeds the display area of the component, the marquee effect is displayed.
1213 *
1214 * @extends Element
1215 * @interface MarqueeElement
1216 * @syscap SystemCapability.ArkUI.ArkUI.Full
1217 * @since 4
1218 */
1219export interface MarqueeElement extends Element {
1220  /**
1221   * Starts scrolling.
1222   *
1223   * @syscap SystemCapability.ArkUI.ArkUI.Full
1224   * @since 4
1225   */
1226  start(): void;
1227
1228  /**
1229   * Stops scrolling.
1230   *
1231   * @syscap SystemCapability.ArkUI.ArkUI.Full
1232   * @since 4
1233   */
1234  stop(): void;
1235}
1236
1237/**
1238 * The <menu> component provides menus as temporary pop-up windows to display operations that can be performed by users.
1239 *
1240 * @extends Element
1241 * @interface MenuElement
1242 * @syscap SystemCapability.ArkUI.ArkUI.Full
1243 * @since 4
1244 */
1245export interface MenuElement extends Element {
1246  /**
1247   * Displays the menu.
1248   * x and y specify the position of the displayed menu.
1249   * x indicates the X-axis coordinate from the left edge of the visible area, and does not include any scrolling offset.
1250   * y indicates the Y-axis coordinate from the upper edge of the visible area, and does not include any scrolling offset or a status bar.
1251   * The menu is preferentially displayed in the lower right corner.
1252   * When the visible space on the right is insufficient, the menu is moved leftward.
1253   * When the visible space in the lower part is insufficient, the menu is moved upward.
1254   *
1255   * @param { object } position
1256   * @syscap SystemCapability.ArkUI.ArkUI.Full
1257   * @since 4
1258   */
1259  show(position: { x: number; y: number }): void;
1260}
1261
1262/**
1263 * The <chart> component displays line charts, gauge charts, and bar charts.
1264 *
1265 * @extends Element
1266 * @interface ChartElement
1267 * @syscap SystemCapability.ArkUI.ArkUI.Full
1268 * @since 4
1269 */
1270export interface ChartElement extends Element {
1271  /**
1272   * Data is dynamically added to an existing data sequence.
1273   * The target sequence is specified based on serial, which is the subscript of the datasets array and starts from 0.
1274   * datasets[index].data is not updated. Only line charts support this attribute.
1275   * The value is incremented by 1 based on the horizontal coordinate and is related to the xAxis min/max setting.
1276   *
1277   * @param { object } params
1278   * @syscap SystemCapability.ArkUI.ArkUI.Full
1279   * @since 4
1280   */
1281  append(params: {
1282    /**
1283     * Set the data subscript of the line chart to be updated.
1284     *
1285     * @type { number }
1286     * @syscap SystemCapability.ArkUI.ArkUI.Full
1287     * @since 4
1288     */
1289    serial: number;
1290    /**
1291     * Set the new data.
1292     *
1293     * @type { Array<number> }
1294     * @syscap SystemCapability.ArkUI.ArkUI.Full
1295     * @since 4
1296     */
1297    data: Array<number>;
1298  }): void;
1299}
1300
1301/**
1302 * The <input> component provides an interactive interface to receive user input, which is displayed in a single line by default.
1303 *
1304 * @extends Element
1305 * @interface InputElement
1306 * @syscap SystemCapability.ArkUI.ArkUI.Full
1307 * @since 4
1308 */
1309export interface InputElement extends Element {
1310  /**
1311   * Obtains or loses the focus of a component.
1312   * When the component type is set to text, email, date, time, number, or password, the input method can be displayed or collapsed.
1313   *
1314   * @param { object } param - If focus is not passed, the default value true is used.
1315   * @syscap SystemCapability.ArkUI.ArkUI.Full
1316   * @since 4
1317   */
1318  focus(param: { focus: boolean }): void;
1319
1320  /**
1321   * Displays the error message.
1322   * This attribute is available when the component type is set to text, email, date, time, number, or password.
1323   *
1324   * @param { object } param
1325   * @syscap SystemCapability.ArkUI.ArkUI.Full
1326   * @since 4
1327   */
1328  showError(param: { error: string }): void;
1329
1330  /**
1331   * Deletes the previous character at the cursor position.
1332   *
1333   * @syscap SystemCapability.ArkUI.ArkUI.Full
1334   * @since 6
1335   */
1336  delete(): void;
1337}
1338
1339/**
1340 * The <button> component includes capsule, circle, text, arc, and download buttons.
1341 *
1342 * @extends Element
1343 * @interface ButtonElement
1344 * @syscap SystemCapability.ArkUI.ArkUI.Full
1345 * @since 4
1346 */
1347export interface ButtonElement extends Element {
1348  /**
1349   * Progress bar of the download button.
1350   * The value ranges from 0 to 100. The progress bar is displayed if the value is greater than 0.
1351   * If the value is greater than or equal to 100, the progress bar is not displayed.
1352   * NOTE
1353   * The text displayed on the progress bar is changed based on the value.
1354   *
1355   * @param { object } param
1356   * @syscap SystemCapability.ArkUI.ArkUI.Full
1357   * @since 4
1358   */
1359  setProgress(param: { progress: number }): void;
1360}
1361
1362/**
1363 * The <textarea> component provides an interactive interface to receive user input, which is displayed in multiple lines by default.
1364 *
1365 * @extends Element
1366 * @interface TextAreaElement
1367 * @syscap SystemCapability.ArkUI.ArkUI.Full
1368 * @since 4
1369 */
1370export interface TextAreaElement extends Element {
1371  /**
1372   * Obtains or loses the focus of a component, which can display or collapse the input method.
1373   *
1374   * @param { object } param - If focus is not passed, the default value true is used.
1375   * @syscap SystemCapability.ArkUI.ArkUI.Full
1376   * @since 4
1377   */
1378  focus(param: { focus: boolean }): void;
1379}
1380
1381/**
1382 * The <picker> component supports common, date, time, and multi-column text selectors.
1383 *
1384 * @extends Element
1385 * @interface PickerElement
1386 * @syscap SystemCapability.ArkUI.ArkUI.Full
1387 * @since 4
1388 */
1389export interface PickerElement extends Element {
1390  /**
1391   * Displays the picker.
1392   *
1393   * @syscap SystemCapability.ArkUI.ArkUI.Full
1394   * @since 4
1395   */
1396  show(): void;
1397}
1398
1399/**
1400 * The <video> component provides a video player.
1401 *
1402 * @extends Element
1403 * @interface VideoElement
1404 * @syscap SystemCapability.ArkUI.ArkUI.Full
1405 * @since 4
1406 */
1407export interface VideoElement extends Element {
1408  /**
1409   * Requests to start playing a video.
1410   *
1411   * @syscap SystemCapability.ArkUI.ArkUI.Full
1412   * @since 4
1413   */
1414  start(): void;
1415
1416  /**
1417   * Requests to pause a video.
1418   *
1419   * @syscap SystemCapability.ArkUI.ArkUI.Full
1420   * @since 4
1421   */
1422  pause(): void;
1423
1424  /**
1425   * Specifies the video playing position.
1426   *
1427   * @param { object } param
1428   * @syscap SystemCapability.ArkUI.ArkUI.Full
1429   * @since 4
1430   */
1431  setCurrentTime(param: { currenttime: number }): void;
1432
1433  /**
1434   * Requests to enter the full screen mode.
1435   *
1436   * @param { object } param
1437   * @syscap SystemCapability.ArkUI.ArkUI.Full
1438   * @since 4
1439   */
1440  requestFullscreen(param: { screenOrientation: "default" }): void;
1441
1442  /**
1443   * Requests to exit the full screen mode.
1444   *
1445   * @syscap SystemCapability.ArkUI.ArkUI.Full
1446   * @since 4
1447   */
1448  exitFullscreen(): void;
1449
1450  /**
1451   * Requests to stop playing a video.
1452   *
1453   * @syscap SystemCapability.ArkUI.ArkUI.Full
1454   * @since 6
1455   */
1456  stop(): void;
1457}
1458
1459/**
1460 * TextMetrics
1461 *
1462 * @interface TextMetrics
1463 * @syscap SystemCapability.ArkUI.ArkUI.Full
1464 * @since 4
1465 */
1466export interface TextMetrics {
1467  /**
1468   * @type { number }
1469   * @syscap SystemCapability.ArkUI.ArkUI.Full
1470   * @since 4
1471   */
1472  width: number;
1473  /**
1474   * @type { number }
1475   * @syscap SystemCapability.ArkUI.ArkUI.Full
1476   * @since 8
1477   */
1478  height: number;
1479}
1480
1481/**
1482 * Provides a 2D rendering context for the drawing surface of the < Canvas > element.
1483 * It is used to draw shapes, text, images and other objects.
1484 *
1485 * @interface OffscreenCanvasRenderingContext2D
1486 * @syscap SystemCapability.ArkUI.ArkUI.Full
1487 * @since 7
1488 */
1489export interface OffscreenCanvasRenderingContext2D {
1490  /**
1491   * Gets the dotted spacing of a line.
1492   * Returns the current line segment style array containing an even number of non-negative numbers.
1493   *
1494   * @type { Array<number> }
1495   * @syscap SystemCapability.ArkUI.ArkUI.Full
1496   * @since 7
1497   */
1498  getLineDash: Array<number>;
1499
1500  /**
1501   * Fill style attribute.
1502   * Paint color used to fill the area.
1503   * Canvas gradient object used by the paint. You can call createLinearGradient() to create a CanvasGradient object.
1504   * Canvas pattern. You can call createPattern() to create a CanvasPattern object.
1505   *
1506   * @type { ?(string | CanvasGradient | CanvasPattern) }
1507   * @syscap SystemCapability.ArkUI.ArkUI.Full
1508   * @since 7
1509   */
1510  fillStyle?: string | CanvasGradient | CanvasPattern;
1511
1512  /**
1513   * Sets the stroke paint style.
1514   * Color of the stroke paint.
1515   * Canvas gradient object used by the paint. You can call createLinearGradient() to create a CanvasGradient object.
1516   * Canvas pattern. You can call createPattern() to create a CanvasPattern object.
1517   *
1518   * @type { ?(string | CanvasGradient | CanvasPattern) }
1519   * @syscap SystemCapability.ArkUI.ArkUI.Full
1520   * @since 7
1521   */
1522  strokeStyle?: string | CanvasGradient | CanvasPattern;
1523
1524  /**
1525   * Sets the dotted spacing of a line.
1526   *
1527   * @param { Array<number> } segments - A set of numbers describing the length of alternating drawn line segments and spacing (coordinate space units).
1528   * @syscap SystemCapability.ArkUI.ArkUI.Full
1529   * @since 7
1530   */
1531  setLineDash(segments: Array<number>): void;
1532
1533  /**
1534   * Draw an Image object.
1535   *
1536   * @param { Image } image - An element drawn to the context.
1537   * @param { number } dx - The top left corner of the image is the X-axis coordinates on the target canvas.
1538   * @param { number } dy - The top left corner of the image is the Y-axis coordinates on the target canvas.
1539   * @param { number } dw - Image The width drawn on the target canvas.
1540   * @param { number } dh - Image The height drawn on the target canvas.
1541   * @syscap SystemCapability.ArkUI.ArkUI.Full
1542   * @since 7
1543   */
1544  drawImage(image: Image, dx: number, dy: number, dw: number, dh: number): void;
1545
1546  /**
1547   * Draw an Image object.
1548   *
1549   * @param { Image } image - An element drawn to the context.
1550   * @param { number } sx - The upper-left X-axis coordinates of the image's rectangular (clipped) selection box that need to be drawn into the target context.
1551   * @param { number } sy - The upper-left Y-axis coordinates of the image's rectangular (clipped) selection box that need to be drawn into the target context.
1552   * @param { number } sw - The width of the image's rectangular (clipped) selection box that needs to be drawn into the target context.
1553   * @param { number } sh - The height of the image's rectangular (clipped) selection box that needs to be drawn into the target context.
1554   * @param { number } dx - The top left corner of the image is the X-axis coordinates on the target canvas.
1555   * @param { number } dy - The top left corner of the image is the Y-axis coordinates on the target canvas.
1556   * @param { number } dw - Image The width drawn on the target canvas.
1557   * @param { number } dh - Image The height drawn on the target canvas.
1558   * @syscap SystemCapability.ArkUI.ArkUI.Full
1559   * @since 7
1560   */
1561  drawImage(
1562    image: Image,
1563    sx: number,
1564    sy: number,
1565    sw: number,
1566    sh: number,
1567    dx: number,
1568    dy: number,
1569    dw: number,
1570    dh: number,
1571  ): void;
1572
1573  /**
1574   * Draw an Image object.
1575   *
1576   * @param { image.PixelMap } image - An element drawn to the context.
1577   * @param { number } dx - The top left corner of the image is the X-axis coordinates on the target canvas.
1578   * @param { number } dy - The top left corner of the image is the Y-axis coordinates on the target canvas.
1579   * @param { number } dw - Image The width drawn on the target canvas.
1580   * @param { number } dh - Image The height drawn on the target canvas.
1581   * @syscap SystemCapability.ArkUI.ArkUI.Full
1582   * @since 9
1583   */
1584  drawImage(image: image.PixelMap, dx: number, dy: number, dw: number, dh: number): void;
1585
1586  /**
1587   * Draw an Image object.
1588   *
1589   * @param { image.PixelMap } image - An element drawn to the context.
1590   * @param { number } sx - The upper-left X-axis coordinates of the image's rectangular (clipped) selection box that need to be drawn into the target context.
1591   * @param { number } sy - The upper-left Y-axis coordinates of the image's rectangular (clipped) selection box that need to be drawn into the target context.
1592   * @param { number } sw - The width of the image's rectangular (clipped) selection box that needs to be drawn into the target context.
1593   * @param { number } sh - The height of the image's rectangular (clipped) selection box that needs to be drawn into the target context.
1594   * @param { number } dx - The top left corner of the image is the X-axis coordinates on the target canvas.
1595   * @param { number } dy - The top left corner of the image is the Y-axis coordinates on the target canvas.
1596   * @param { number } dw - Image The width drawn on the target canvas.
1597   * @param { number } dh - Image The height drawn on the target canvas.
1598   * @syscap SystemCapability.ArkUI.ArkUI.Full
1599   * @since 9
1600   */
1601  drawImage(
1602    image: image.PixelMap,
1603    sx: number,
1604    sy: number,
1605    sw: number,
1606    sh: number,
1607    dx: number,
1608    dy: number,
1609    dw: number,
1610    dh: number,
1611  ): void;
1612
1613  /**
1614   * Creates a drawing path.
1615   *
1616   * @syscap SystemCapability.ArkUI.ArkUI.Full
1617   * @since 7
1618   */
1619  beginPath(): void;
1620
1621  /**
1622   * Crop the current canvas.
1623   *
1624   * @syscap SystemCapability.ArkUI.ArkUI.Full
1625   * @since 7
1626   */
1627  clip(): void;
1628
1629  /**
1630   * Fills the current canvas with color.
1631   *
1632   * @syscap SystemCapability.ArkUI.ArkUI.Full
1633   * @since 7
1634   */
1635  fill(): void;
1636
1637  /**
1638   * Check whether the specified coordinate point is on the Path.
1639   *
1640   * @param { number } x - The X coordinate of the detection point.
1641   * @param { number } y - The Y coordinate of the detection point.
1642   * @returns { boolean } boolean Return true if the detection point is contained within the current or specified path Otherwise return false.
1643   * @syscap SystemCapability.ArkUI.ArkUI.Full
1644   * @since 7
1645   */
1646  isPointInPath(x: number, y: number): boolean;
1647
1648  /**
1649   * Check whether the specified coordinate point is on the Path.
1650   *
1651   * @param { Path2D } path - The Path2D path that needs to be populated.
1652   * @param { number } x - The X coordinate of the detection point.
1653   * @param { number } y - The Y coordinate of the detection point.
1654   * @returns { boolean } boolean Return true if the detection point is contained within the current or specified path Otherwise return false.
1655   * @syscap SystemCapability.ArkUI.ArkUI.Full
1656   * @since 7
1657   */
1658  isPointInPath(path: Path2D, x: number, y: number): boolean;
1659
1660  /**
1661   * Checks whether the specified coordinate point is on the stroke edge.
1662   *
1663   * @param { number } x - The X coordinate of the detection point.
1664   * @param { number } y - The Y coordinate of the detection point.
1665   * @returns { boolean } boolean A Boolean value that returns true when the point is on the line of the path, false otherwise.
1666   * @syscap SystemCapability.ArkUI.ArkUI.Full
1667   * @since 7
1668   */
1669  isPointInStroke(x: number, y: number): boolean;
1670
1671  /**
1672   * Checks whether the specified coordinate point is on the stroke edge.
1673   *
1674   * @param { Path2D } path - Path2D path.
1675   * @param { number } x - The X coordinate of the detection point.
1676   * @param { number } y - The Y coordinate of the detection point.
1677   * @returns { boolean } boolean A Boolean value that returns true when the point is on the line of the path, false otherwise.
1678   * @syscap SystemCapability.ArkUI.ArkUI.Full
1679   * @since 7
1680   */
1681  isPointInStroke(path: Path2D, x: number, y: number): boolean;
1682
1683  /**
1684   * Stroke draws the current path.
1685   *
1686   * @syscap SystemCapability.ArkUI.ArkUI.Full
1687   * @since 7
1688   */
1689  stroke(): void;
1690
1691  /**
1692   * Stroke draws the current path.
1693   *
1694   * @param { Path2D } path - The object of Path2D.
1695   * @syscap SystemCapability.ArkUI.ArkUI.Full
1696   * @since 7
1697   */
1698  stroke(path: Path2D): void;
1699
1700  /**
1701   * Create a radial tween object.
1702   *
1703   * @param { number } x0 - The x coordinate of the circle at the beginning.
1704   * @param { number } y0 - The y coordinate of the circle at the beginning.
1705   * @param { number } r0 - The radius of the starting circle.
1706   * @param { number } x1 - X-coordinate of the end point.
1707   * @param { number } y1 - Y-coordinate of the end point.
1708   * @param { number } r1 - The radius of End Circle.
1709   * @returns { CanvasGradient } RadialGradient object.
1710   * @syscap SystemCapability.ArkUI.ArkUI.Full
1711   * @since 7
1712   */
1713  createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
1714
1715  /**
1716   * Create a drawing style template.
1717   *
1718   * @param { Image } image - The CanvasImageSource object that is the source of the duplicate image.
1719   * @param { string } repetition - Specify how to repeat images.
1720   * @returns { CanvasPattern } CanvasPattern An opaque object that describes a schema.
1721   * @syscap SystemCapability.ArkUI.ArkUI.Full
1722   * @since 7
1723   */
1724  createPattern(image: Image, repetition: string): CanvasPattern;
1725
1726  /**
1727   * Creates a linear gradient color.
1728   *
1729   * @param { number } x0 - X-coordinate of the start point.
1730   * @param { number } y0 - Y-coordinate of the start point.
1731   * @param { number } x1 - X-coordinate of the end point.
1732   * @param { number } y1 - Y-coordinate of the end point.
1733   * @returns { CanvasGradient } LinearGradient object.
1734   * @syscap SystemCapability.ArkUI.ArkUI.Full
1735   * @since 7
1736   */
1737  createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient;
1738
1739  /**
1740   * Create an ImageData object.
1741   *
1742   * @param { number } sw - The width of the new object.
1743   * @param { number } sh - The height of the new object.
1744   * @returns { ImageData } ImageData New ImageData object with width and height specified.
1745   * @syscap SystemCapability.ArkUI.ArkUI.Full
1746   * @since 7
1747   */
1748  createImageData(sw: number, sh: number): ImageData;
1749
1750  /**
1751   * Create an ImageData object.
1752   *
1753   * @param { ImageData } imagedata - Copy an object of the same width and height from an existing ImageData object
1754   * The image itself is not allowed to be copied.
1755   * @returns { ImageData } ImageData New ImageData object with width and height specified.
1756   * @syscap SystemCapability.ArkUI.ArkUI.Full
1757   * @since 7
1758   */
1759  createImageData(imagedata: ImageData): ImageData;
1760
1761  /**
1762   * Creates a path that is later used by the CanvasRenderingContext2D object.
1763   *
1764   * @param { Path2D } [path] - another created Path2D object.
1765   * @returns { Path2D } the object of Path2D.
1766   * @syscap SystemCapability.ArkUI.ArkUI.Full
1767   * @since 7
1768   */
1769  createPath2D(path?: Path2D): Path2D;
1770
1771  /**
1772   * Creates a path that is later used by the CanvasRenderingContext2D object.
1773   *
1774   * @param { string } [cmds] - a string defined using the SVG path command.
1775   * @returns { Path2D } the object of Path2D.
1776   * @syscap SystemCapability.ArkUI.ArkUI.Full
1777   * @since 7
1778   */
1779  createPath2D(cmds?: string): Path2D;
1780
1781  /**
1782   * Get an ImageData object.
1783   *
1784   * @param { number } sx - The upper-left x-coordinate of the rectangular area of the image data to be extracted.
1785   * @param { number } sy - The upper-left y coordinate of the rectangular region of the image data to be extracted.
1786   * @param { number } sw - The width of the rectangular area of the image data to be extracted.
1787   * @param { number } sh - The height of the rectangular area of the image data to be extracted.
1788   * @returns { ImageData } ImageData An ImageData object that contains the rectangular ImageData given by the canvas.
1789   * @syscap SystemCapability.ArkUI.ArkUI.Full
1790   * @since 7
1791   */
1792  getImageData(sx: number, sy: number, sw: number, sh: number): ImageData;
1793
1794  /**
1795   * Get an PixelMap object.
1796   *
1797   * @param { number } sx - The upper-left x-coordinate of the rectangular area of the image data to be extracted.
1798   * @param { number } sy - The upper-left y coordinate of the rectangular region of the image data to be extracted.
1799   * @param { number } sw - The width of the rectangular area of the image data to be extracted.
1800   * @param { number } sh - The height of the rectangular area of the image data to be extracted.
1801   * @returns { image.PixelMap } PixelMap A PixelMap object that contains the rectangular ImageData given by the canvas.
1802   * @syscap SystemCapability.ArkUI.ArkUI.Full
1803   * @since 9
1804   */
1805  getPixelMap(sx: number, sy: number, sw: number, sh: number): image.PixelMap
1806
1807  /**
1808   * Draws the specified ImageData object to the canvas.
1809   *
1810   * @param { ImageData } imagedata - An array object containing pixel values.
1811   * @param { number } dx - The offset of the position of the source image data in the target canvas (the offset in the X-axis direction).
1812   * @param { number } dy - The offset of the position of the source image data in the target canvas (the Y-axis offset).
1813   * @syscap SystemCapability.ArkUI.ArkUI.Full
1814   * @since 7
1815   */
1816  putImageData(imagedata: ImageData, dx: number, dy: number): void;
1817
1818  /**
1819   * Draws the specified ImageData object to the canvas.
1820   *
1821   * @param { ImageData } imagedata - An array object containing pixel values.
1822   * @param { number } dx - The offset of the position of the source image data in the target canvas (the offset in the X-axis direction).
1823   * @param { number } dy - he offset of the position of the source image data in the target canvas (the Y-axis offset).
1824   * @param { number } dirtyX - In the source image data,
1825   * the position of the upper left corner of the rectangular region Default is the upper left corner of the entire image data (x coordinate).
1826   * @param { number } dirtyY - In the source image data,
1827   * the position of the upper left corner of the rectangular region Default is the top left corner (y coordinate) of the entire image data.
1828   * @param { number } dirtyWidth - In the source image data, the width of a rectangular region. Default is the width of the image data.
1829   * @param { number } dirtyHeight - In the source image data, the height of a rectangular region. Default is the height of the image data.
1830   * @syscap SystemCapability.ArkUI.ArkUI.Full
1831   * @since 7
1832   */
1833  putImageData(
1834    imagedata: ImageData,
1835    dx: number,
1836    dy: number,
1837    dirtyX: number,
1838    dirtyY: number,
1839    dirtyWidth: number,
1840    dirtyHeight: number,
1841  ): void;
1842
1843  /**
1844   * Draw an arc.
1845   *
1846   * @param { number } radius - Radius of an arc.
1847   * @param { number } x - The X-axis coordinates of the center of the circle.
1848   * @param { number } y - The Y-axis coordinates of the center of an arc (center of a circle).
1849   * @param { number } startAngle - The starting point of the arc, in the X-axis direction, is calculated in radians.
1850   * @param { number } endAngle - The end point of an arc, expressed in radians.
1851   * @param { boolean } [anticlockwise] - An optional Boolean value. If true, the arc is drawn counterclockwise, and otherwise clockwise.
1852   * @syscap SystemCapability.ArkUI.ArkUI.Full
1853   * @since 7
1854   */
1855  arc(radius: number, x: number, y: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;
1856
1857  /**
1858   * Draws an arc from the beginning to the end.
1859   *
1860   * @param { number } x1 - The X-axis coordinates of the first control point.
1861   * @param { number } x2 - The X-axis coordinates of the second control point.
1862   * @param { number } y1 - The y-coordinate of the first control point.
1863   * @param { number } y2 - The Y-axis coordinates of the second control point.
1864   * @param { number } radius - Radius of an arc.
1865   * @syscap SystemCapability.ArkUI.ArkUI.Full
1866   * @since 7
1867   */
1868  arcTo(x1: number, x2: number, y1: number, y2: number, radius: number): void;
1869
1870  /**
1871   * Draw a third order Bezier curve.
1872   *
1873   * @param { number } cp1x - The X-axis coordinates of the first control point.
1874   * @param { number } cp1y - The y-coordinate of the first control point.
1875   * @param { number } cp2x - The X-axis coordinates of the second control point.
1876   * @param { number } cp2y - The Y-axis coordinates of the second control point.
1877   * @param { number } x - The x-coordinate of the end point.
1878   * @param { number } y - The y-coordinate of the end point
1879   * @syscap SystemCapability.ArkUI.ArkUI.Full
1880   * @since 7
1881   */
1882  bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
1883
1884  /**
1885   * Closing the current path.
1886   *
1887   * @syscap SystemCapability.ArkUI.ArkUI.Full
1888   * @since 7
1889   */
1890  closePath(): void;
1891
1892  /**
1893   * Draw a straight line.
1894   *
1895   * @param { number } x - The X-axis coordinates at the end of the line.
1896   * @param { number } y - The Y-axis coordinates at the end of the line.
1897   * @syscap SystemCapability.ArkUI.ArkUI.Full
1898   * @since 7
1899   */
1900  lineTo(x: number, y: number): void;
1901
1902  /**
1903   * Draw an ellipse.
1904   *
1905   * @param { number } x - The X-axis coordinates of the center of the ellipse.
1906   * @param { number } y - The Y-axis coordinates of the center of the ellipse.
1907   * @param { number } radiusX - The radius of the major axis of an ellipse.
1908   * @param { number } radiusY - The radius of the short axis of an ellipse.
1909   * @param { number } rotation - The Angle of rotation of an ellipse, expressed in radians.
1910   * @param { number } startAngle - The starting point Angle to be plotted, measured from the X-axis, is expressed in radians.
1911   * @param { number } endAngle - The Angle, expressed in radians, at which the ellipse will be drawn.
1912   * @param { boolean } [anticlockwise] - If true, the ellipse is drawn counterclockwise (counterclockwise) and clockwise otherwise.
1913   * @syscap SystemCapability.ArkUI.ArkUI.Full
1914   * @since 7
1915   */
1916  ellipse(
1917    x: number,
1918    y: number,
1919    radiusX: number,
1920    radiusY: number,
1921    rotation: number,
1922    startAngle: number,
1923    endAngle: number,
1924    anticlockwise?: boolean,
1925  ): void;
1926
1927  /**
1928   * Moves the current canvas to the specified coordinate point.
1929   *
1930   * @param { number } x - The x axis.
1931   * @param { number } y - The y axis.
1932   * @syscap SystemCapability.ArkUI.ArkUI.Full
1933   * @since 7
1934   */
1935  moveTo(x: number, y: number): void;
1936
1937  /**
1938   * Draw a second order Bezier curve.
1939   *
1940   * @param { number } cpx - The X-axis coordinates of the control points.
1941   * @param { number } cpy - The y-coordinate of the control point.
1942   * @param { number } x - The X-axis of the end point.
1943   * @param { number } y - The Y-axis of the end point.
1944   * @syscap SystemCapability.ArkUI.ArkUI.Full
1945   * @since 7
1946   */
1947  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
1948
1949  /**
1950   * Draw a rectangle.
1951   *
1952   * @param { number } x - The X-axis coordinates at the beginning of the rectangle.
1953   * @param { number } y - The Y-axis coordinates at the beginning of the rectangle.
1954   * @param { number } w - The width of a rectangle.
1955   * @param { number } h - The height of a rectangle.
1956   * @syscap SystemCapability.ArkUI.ArkUI.Full
1957   * @since 7
1958   */
1959  rect(x: number, y: number, w: number, h: number): void;
1960
1961  /**
1962   * Clears the contents of the specified rectangular area.
1963   *
1964   * @param { number } x - The X-axis coordinates at the beginning of the rectangle.
1965   * @param { number } y - The Y-axis coordinates at the beginning of the rectangle.
1966   * @param { number } w - The width of a rectangle.
1967   * @param { number } h - The height of a rectangle.
1968   * @syscap SystemCapability.ArkUI.ArkUI.Full
1969   * @since 7
1970   */
1971  clearRect(x: number, y: number, w: number, h: number): void;
1972
1973  /**
1974   * Fills a rectangular area.
1975   *
1976   * @param { number } x - The X-axis coordinates at the beginning of the rectangle.
1977   * @param { number } y - The Y-axis coordinates at the beginning of the rectangle.
1978   * @param { number } w - The width of a rectangle.
1979   * @param { number } h - The height of a rectangle.
1980   * @syscap SystemCapability.ArkUI.ArkUI.Full
1981   * @since 7
1982   */
1983  fillRect(x: number, y: number, w: number, h: number): void;
1984
1985  /**
1986   * Stroke a rectangular area.
1987   *
1988   * @param { number } x - The X-axis coordinates at the beginning of the rectangle.
1989   * @param { number } y - The Y-axis coordinates at the beginning of the rectangle.
1990   * @param { number } w - The width of the rectangle. Positive values on the right, negative values on the left.
1991   * @param { number } h - The height of the rectangle. Positive values are down, negative values are up.
1992   * @syscap SystemCapability.ArkUI.ArkUI.Full
1993   * @since 7
1994   */
1995  strokeRect(x: number, y: number, w: number, h: number): void;
1996
1997  /**
1998   * Stroke a rectangular area.
1999   *
2000   * @param { string } text - Render text using the current values of font, textAlign, textBaseline, and direction.
2001   * @param { number } y - The Y-axis coordinates of the starting point of the text.
2002   * @param { number } x - The X-axis coordinates of the starting point of the text.
2003   * @syscap SystemCapability.ArkUI.ArkUI.Full
2004   * @since 7
2005   */
2006  fillText(text: string, y: number, x: number /*, maxWidth?: number*/): void;
2007
2008  /**
2009   * Returns a TextMetrics object used to obtain the width of specified text.
2010   *
2011   * @param { string } text - Text to be measured.
2012   * @returns { TextMetrics } Object that contains the text width. You can obtain the width by TextMetrics.width.
2013   * @syscap SystemCapability.ArkUI.ArkUI.Full
2014   * @since 7
2015   */
2016  measureText(text: string): TextMetrics;
2017
2018  /**
2019   * Draws the stroke of a text string.
2020   *
2021   * @param { string } text - Text stroke to draw.
2022   * @param { number } x - X-coordinate of the lower left corner of the text stroke.
2023   * @param { number } y - Y-coordinate of the lower left corner of the text stroke.
2024   * @syscap SystemCapability.ArkUI.ArkUI.Full
2025   * @since 7
2026   */
2027  strokeText(text: string, x: number, y: number /*, maxWidth?: number*/): void;
2028
2029  /**
2030   * Resets the current matrix transformation effect.
2031   *
2032   * @syscap SystemCapability.ArkUI.ArkUI.Full
2033   * @since 7
2034   */
2035  resetTransform(): void;
2036
2037  /**
2038   * Adds a rotation effect to the current canvas.
2039   *
2040   * @param { number } angle - The radian of clockwise rotation.
2041   * @syscap SystemCapability.ArkUI.ArkUI.Full
2042   * @since 7
2043   */
2044  rotate(angle: number): void;
2045
2046  /**
2047   * Adds a zoom effect to the current canvas.
2048   *
2049   * @param { number } x - The horizontal scaling factor.
2050   * @param { number } y - The scaling factor in the vertical direction.
2051   * @syscap SystemCapability.ArkUI.ArkUI.Full
2052   * @since 7
2053   */
2054  scale(x: number, y: number): void;
2055
2056  /**
2057   * Set the rotation, pan, and zoom effects.
2058   *
2059   * @param { number } a - The level of zoom.
2060   * @param { number } b - Vertical tilt.
2061   * @param { number } c - Horizontal tilt.
2062   * @param { number } d - Vertical scaling.
2063   * @param { number } e - The level of mobile.
2064   * @param { number } f - Vertical movement.
2065   * @syscap SystemCapability.ArkUI.ArkUI.Full
2066   * @since 7
2067   */
2068  setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
2069
2070  /**
2071   * Set the rotation, pan, and zoom effects.
2072   *
2073   * @param { number } a - The level of zoom.
2074   * @param { number } b - Vertical tilt.
2075   * @param { number } c - Horizontal tilt.
2076   * @param { number } d - Vertical scaling.
2077   * @param { number } e - The level of mobile.
2078   * @param { number } f - Vertical movement.
2079   * @syscap SystemCapability.ArkUI.ArkUI.Full
2080   * @since 7
2081   */
2082  transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
2083
2084  /**
2085   * Adds a pan effect to the current canvas.
2086   *
2087   * @param { number } x - Horizontal movement distance.
2088   * @param { number } y - Vertical movement.
2089   * @syscap SystemCapability.ArkUI.ArkUI.Full
2090   * @since 7
2091   */
2092  translate(x: number, y: number): void;
2093
2094  /**
2095   * Restores the configuration information of the last saved canvas context.
2096   *
2097   * @syscap SystemCapability.ArkUI.ArkUI.Full
2098   * @since 7
2099   */
2100  restore(): void;
2101
2102  /**
2103   * Saves configuration information for the current canvas context.
2104   *
2105   * @syscap SystemCapability.ArkUI.ArkUI.Full
2106   * @since 7
2107   */
2108  save(): void;
2109}
2110
2111/**
2112 * CanvasRenderingContext2D allows you to draw rectangles, text, images, and other objects on a canvas.
2113 * You can call getContext('2d') on canvas to obtain a CanvasRenderingContext2D object.
2114 *
2115 * @interface CanvasRenderingContext2D
2116 * @syscap SystemCapability.ArkUI.ArkUI.Full
2117 * @since 4
2118 */
2119export interface CanvasRenderingContext2D {
2120  /**
2121   * Fills a rectangle on the canvas.
2122   *
2123   * @param { number } x - X-coordinate of the upper left corner of the rectangle.
2124   * @param { number } y - Y-coordinate of the upper left corner of the rectangle.
2125   * @param { number } width - Width of the rectangle.
2126   * @param { number } height - Height of the rectangle.
2127   * @syscap SystemCapability.ArkUI.ArkUI.Full
2128   * @since 4
2129   */
2130  fillRect(x: number, y: number, width: number, height: number): void;
2131
2132  /**
2133   * Sets the style of a paint to fill an area.
2134   * Paint color used to fill the area.
2135   * Canvas gradient object used by the paint. You can call createLinearGradient() to create a CanvasGradient object.
2136   * Canvas pattern. You can call createPattern() to create a CanvasPattern object.
2137   *
2138   * @type { ?(string | CanvasGradient | CanvasPattern) }
2139   * @syscap SystemCapability.ArkUI.ArkUI.Full
2140   * @since 4
2141   */
2142  fillStyle?: string | CanvasGradient | CanvasPattern;
2143
2144  /**
2145   * Clears the content in a rectangle on the canvas.
2146   *
2147   * @param { number } x - X-coordinate of the upper left corner of the rectangle.
2148   * @param { number } y - Y-coordinate of the upper left corner of the rectangle.
2149   * @param { number } width - Width of the rectangle.
2150   * @param { number } height - Height of the rectangle.
2151   * @syscap SystemCapability.ArkUI.ArkUI.Full
2152   * @since 4
2153   */
2154  clearRect(x: number, y: number, width: number, height: number): void;
2155
2156  /**
2157   * Draws a rectangle stroke on the canvas.
2158   *
2159   * @param { number } x - X-coordinate of the upper left corner of the rectangle stroke.
2160   * @param { number } y - Y-coordinate of the upper left corner of the rectangle stroke.
2161   * @param { number } width - Width of the rectangle stroke.
2162   * @param { number } height - Height of the rectangle stroke.
2163   * @syscap SystemCapability.ArkUI.ArkUI.Full
2164   * @since 4
2165   */
2166  strokeRect(x: number, y: number, width: number, height: number): void;
2167
2168  /**
2169   * Draws filled text on the canvas.
2170   *
2171   * @param { string } text - Text to draw.
2172   * @param { number } x - X-coordinate of the lower left corner of the text.
2173   * @param { number } y - Y-coordinate of the lower left corner of the text.
2174   * @syscap SystemCapability.ArkUI.ArkUI.Full
2175   * @since 4
2176   */
2177  fillText(text: string, x: number, y: number): void;
2178
2179  /**
2180   * Draws a text stroke on the canvas.
2181   *
2182   * @param { string } text - Text stroke to draw.
2183   * @param { number } x - X-coordinate of the lower left corner of the text stroke.
2184   * @param { number } y - Y-coordinate of the lower left corner of the text stroke.
2185   * @syscap SystemCapability.ArkUI.ArkUI.Full
2186   * @since 4
2187   */
2188  strokeText(text: string, x: number, y: number): void;
2189
2190  /**
2191   * Returns a TextMetrics object used to obtain the width of specified text.
2192   *
2193   * @param { string } text - Text to be measured.
2194   * @returns { TextMetrics } Object that contains the text width. You can obtain the width by TextMetrics.width.
2195   * @syscap SystemCapability.ArkUI.ArkUI.Full
2196   * @since 4
2197   */
2198  measureText(text: string): TextMetrics;
2199
2200  /**
2201   * Sets the width of a line.
2202   *
2203   * @type { ?number }
2204   * @syscap SystemCapability.ArkUI.ArkUI.Full
2205   * @since 4
2206   */
2207  lineWidth?: number;
2208
2209  /**
2210   * Sets the stroke paint style.
2211   * Color of the stroke paint.
2212   * Canvas gradient object used by the paint. You can call createLinearGradient() to create a CanvasGradient object.
2213   * Canvas pattern. You can call createPattern() to create a CanvasPattern object.
2214   *
2215   * @type { ?(string | CanvasGradient | CanvasPattern) }
2216   * @syscap SystemCapability.ArkUI.ArkUI.Full
2217   * @since 4
2218   */
2219  strokeStyle?: string | CanvasGradient | CanvasPattern;
2220
2221  /**
2222   * Draws a border stroke.
2223   *
2224   * @syscap SystemCapability.ArkUI.ArkUI.Full
2225   * @since 4
2226   */
2227  stroke(): void;
2228
2229  /**
2230   * Draws a path stroke.
2231   *
2232   * @param { Path2D } path - The object of Path2D.
2233   * @syscap SystemCapability.ArkUI.ArkUI.Full
2234   * @since 4
2235   */
2236  stroke(path: Path2D): void;
2237
2238  /**
2239   * Creates a drawing path.
2240   *
2241   * @syscap SystemCapability.ArkUI.ArkUI.Full
2242   * @since 4
2243   */
2244  beginPath(): void;
2245
2246  /**
2247   * Moves a drawing path to a target position on the canvas.
2248   *
2249   * @param { number } x - X-coordinate of the target position.
2250   * @param { number } y - Y-coordinate of the target position.
2251   * @syscap SystemCapability.ArkUI.ArkUI.Full
2252   * @since 4
2253   */
2254  moveTo(x: number, y: number): void;
2255
2256  /**
2257   * Connects the current point to a target position using a straight line.
2258   *
2259   * @param { number } x - X-coordinate of the target position.
2260   * @param { number } y - Y-coordinate of the target position.
2261   * @syscap SystemCapability.ArkUI.ArkUI.Full
2262   * @since 4
2263   */
2264  lineTo(x: number, y: number): void;
2265
2266  /**
2267   * Draws a closed path.
2268   *
2269   * @syscap SystemCapability.ArkUI.ArkUI.Full
2270   * @since 4
2271   */
2272  closePath(): void;
2273
2274  /**
2275   * Sets the style of line endpoints.
2276   * Style of line endpoints. Available values include:
2277   * butt (default): The endpoints of the line are in square.
2278   * round: The endpoints of the line are rounded.
2279   * square: The endpoints of the line are in square,
2280   * and each end of the line is added with a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.
2281   *
2282   * @type { string }
2283   * @syscap SystemCapability.ArkUI.ArkUI.Full
2284   * @since 4
2285   */
2286  lineCap: string;
2287
2288  /**
2289   * Sets the style for an intersection point where a line joins another.
2290   * Style of the intersection point of lines. Available values include:
2291   * round: The intersection part is a sector. The radius of a rounded corner is equal to the line width.
2292   * bevel: The intersection part is a triangle. The rectangular corner of each line is independent.
2293   * miter (default): The intersection part has a miter corner by extending the outside edges of the lines until they meet.
2294   * You can view the effect of this attribute in miterLimit.
2295   *
2296   * @type { string }
2297   * @syscap SystemCapability.ArkUI.ArkUI.Full
2298   * @since 4
2299   */
2300  lineJoin: string;
2301
2302  /**
2303   * Sets the maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.
2304   * Maximum miter length. The default value is 10.
2305   *
2306   * @type { number }
2307   * @syscap SystemCapability.ArkUI.ArkUI.Full
2308   * @since 4
2309   */
2310  miterLimit: number;
2311
2312  /**
2313   * Sets the font style.
2314   * Font style.
2315   * The default value is 10px sans-serif in tv, phone, tablet, wearable.
2316   * The default value is 30px SourceHanSansSC-Regular in smartVision.
2317   *
2318   * @type { string }
2319   * @syscap SystemCapability.ArkUI.ArkUI.Full
2320   * @since 4
2321   */
2322  font: string;
2323
2324  /**
2325   * Sets the text alignment mode.
2326   * Text alignment mode. Available values include:
2327   * left (default): The text is left-aligned.
2328   * right: The text is right-aligned.
2329   * center: The text is center-aligned.
2330   * start: The text is aligned with the start bound. Can't be supported by smartVision.
2331   * end: The text is aligned with the end bound. Can't be supported by smartVision.
2332   * NOTE
2333   * In the ltr layout mode, the value start equals to left. In the rtl layout mode, the value start equals to right.
2334   *
2335   * @type { "left" | "right" | "center" | "start" | "end" }
2336   * @syscap SystemCapability.ArkUI.ArkUI.Full
2337   * @since 4
2338   */
2339  textAlign: "left" | "right" | "center" | "start" | "end";
2340
2341  /**
2342   * Sets whether an image is smooth.
2343   * default value is true.
2344   *
2345   * @type { boolean }
2346   * @syscap SystemCapability.ArkUI.ArkUI.Full
2347   * @since 4
2348   */
2349  imageSmoothingEnabled: boolean;
2350
2351  /**
2352   * Sets a text baseline in the horizontal direction for text alignment.
2353   * Text baseline. Available values include:
2354   * alphabetic (default): The text baseline is the normal alphabetic baseline.
2355   * top: The text baseline is on the top of the text bounding box.
2356   * hanging: The text baseline is a hanging baseline over the text.
2357   * middle: The text baseline is in the middle of the text bounding box.
2358   * ideographic: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline,
2359   * the ideographic baseline is located at the bottom of the excessive character.
2360   * bottom: The text baseline is at the bottom of the text bounding box.
2361   * Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.
2362   *
2363   * @type { string }
2364   * @syscap SystemCapability.ArkUI.ArkUI.Full
2365   * @since 4
2366   */
2367  textBaseline: string;
2368
2369  /**
2370   * Creates a linear gradient color.
2371   *
2372   * @param { number } x0 - X-coordinate of the start point.
2373   * @param { number } y0 - Y-coordinate of the start point.
2374   * @param { number } x1 - X-coordinate of the end point.
2375   * @param { number } y1 - Y-coordinate of the end point.
2376   * @returns { CanvasGradient } LinearGradient object.
2377   * @syscap SystemCapability.ArkUI.ArkUI.Full
2378   * @since 6
2379   */
2380  createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient;
2381
2382  /**
2383   * Creates a radial gradient color.
2384   *
2385   * @param { number } x0 - X-coordinate of the start point.
2386   * @param { number } y0 - Y-coordinate of the start point.
2387   * @param { number } r0 - The radius of the starting circle.
2388   * @param { number } x1 - X-coordinate of the end point.
2389   * @param { number } y1 - Y-coordinate of the end point.
2390   * @param { number } r1 - The radius of End Circle.
2391   * @returns { CanvasGradient } RadialGradient object.
2392   * @syscap SystemCapability.ArkUI.ArkUI.Full
2393   * @since 6
2394   */
2395  createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
2396
2397  /**
2398   * Creates a pattern for image filling based on a specified source image and repetition mode.
2399   *
2400   * @param { Image } image - Source image.
2401   * @param { string } repetition - Repetition mode. The value can be "repeat", "repeat-x", "repeat-y", or "no-repeat".
2402   * @returns { object } Pattern of image filling.
2403   * @syscap SystemCapability.ArkUI.ArkUI.Full
2404   * @since 4
2405   */
2406  createPattern(image: Image, repetition: string): object;
2407
2408  /**
2409   * Creates a path that is later used by the CanvasRenderingContext2D object.
2410   *
2411   * @param { Path2D } [path] - another created Path2D object.
2412   * @returns { Path2D } the object of Path2D.
2413   * @syscap SystemCapability.ArkUI.ArkUI.Full
2414   * @since 4
2415   */
2416  createPath2D(path?: Path2D): Path2D;
2417
2418  /**
2419   * Creates a path that is later used by the CanvasRenderingContext2D object.
2420   *
2421   * @param { string } [cmds] - a string defined using the SVG path command.
2422   * @returns { Path2D } the object of Path2D.
2423   * @syscap SystemCapability.ArkUI.ArkUI.Full
2424   * @since 4
2425   */
2426  createPath2D(cmds?: string): Path2D;
2427
2428  /**
2429   * Draws a cubic bezier curve on the canvas.
2430   *
2431   * @param { number } cp1x - X-coordinate of the first parameter of the bezier curve.
2432   * @param { number } cp1y - Y-coordinate of the first parameter of the bezier curve.
2433   * @param { number } cp2x - X-coordinate of the second parameter of the bezier curve.
2434   * @param { number } cp2y - Y-coordinate of the second parameter of the bezier curve.
2435   * @param { number } x - End point x-coordinate of the bezier curve.
2436   * @param { number } y - End point y-coordinate of the bezier curve.
2437   * @syscap SystemCapability.ArkUI.ArkUI.Full
2438   * @since 4
2439   */
2440  bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
2441
2442  /**
2443   * Draws a quadratic curve on the canvas.
2444   *
2445   * @param { number } cpx - X-coordinate of the bezier curve parameter.
2446   * @param { number } cpy - Y-coordinate of the bezier curve parameter.
2447   * @param { number } x - End point x-coordinate of the bezier curve.
2448   * @param { number } y - End point y-coordinate of the bezier curve.
2449   * @syscap SystemCapability.ArkUI.ArkUI.Full
2450   * @since 4
2451   */
2452  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
2453
2454  /**
2455   * Draws an arc on the canvas.
2456   *
2457   * @param { number } x - X-coordinate of the center point of the arc.
2458   * @param { number } y - Y-coordinate of the center point of the arc.
2459   * @param { number } radius - Radius of the arc.
2460   * @param { number } startAngle - Start radian of the arc.
2461   * @param { number } endAngel - End radian of the arc.
2462   * @param { boolean } [anticlockwise] - Whether to draw the arc counterclockwise.
2463   * @syscap SystemCapability.ArkUI.ArkUI.Full
2464   * @since 4
2465   */
2466  arc(x: number, y: number, radius: number, startAngle: number, endAngel: number, anticlockwise?: boolean): void;
2467
2468  /**
2469   * Draws an arc based on the radius and points on the arc.
2470   *
2471   * @param { number } x1 - X-coordinate of the first point on the arc.
2472   * @param { number } y1 - Y-coordinate of the first point on the arc.
2473   * @param { number } x2 - X-coordinate of the second point on the arc.
2474   * @param { number } y2 - Y-coordinate of the second point on the arc.
2475   * @param { number } radius - Radius of the arc.
2476   * @syscap SystemCapability.ArkUI.ArkUI.Full
2477   * @since 4
2478   */
2479  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
2480
2481  /**
2482   * Draws an ellipse based on the coordinate and radius.
2483   *
2484   * @param { number } x - X-coordinate of the center point on the ellipse.
2485   * @param { number } y - Y-coordinate of the center point on the ellipse.
2486   * @param { number } radiusX - X-coordinate of the radius Length on the ellipse.
2487   * @param { number } radiusY - Y-coordinate of the radius Length on the ellipse.
2488   * @param { number } rotation - The rotation angle of the ellipse, in radians.
2489   * @param { number } startAngle - Angle of the start point for ellipse drawing.
2490   * @param { number } endAngle - End Point Angle for Ellipse Drawing.
2491   * @param { number } anticlockwise - Indicates whether to draw an ellipse counterclockwise.
2492   * 0: clockwise; 1: counterclockwise. The default value is 0.
2493   * @syscap SystemCapability.ArkUI.ArkUI.Full
2494   * @since 4
2495   */
2496  ellipse(
2497    x: number,
2498    y: number,
2499    radiusX: number,
2500    radiusY: number,
2501    rotation: number,
2502    startAngle: number,
2503    endAngle: number,
2504    anticlockwise?: number,
2505  ): void;
2506
2507  /**
2508   * Creates a rectangular.
2509   *
2510   * @param { number } x - X-coordinate of the upper left corner of the rectangle.
2511   * @param { number } y - Y-coordinate of the upper left corner of the rectangle.
2512   * @param { number } width - Width of the rectangle.
2513   * @param { number } height - Height of the rectangle.
2514   * @syscap SystemCapability.ArkUI.ArkUI.Full
2515   * @since 4
2516   */
2517  rect(x: number, y: number, width: number, height: number): void;
2518
2519  /**
2520   * Fills the area inside a closed path.
2521   *
2522   * @syscap SystemCapability.ArkUI.ArkUI.Full
2523   * @since 4
2524   */
2525  fill(): void;
2526
2527  /**
2528   * Sets a path as the clipping path.
2529   *
2530   * @syscap SystemCapability.ArkUI.ArkUI.Full
2531   * @since 4
2532   */
2533  clip(): void;
2534
2535  /**
2536   * Rotates a canvas clockwise around its coordinate axes.
2537   *
2538   * @param { number } rotate - Clockwise rotation angle. You can use Math.PI / 180 to convert the angle to radian.
2539   * @syscap SystemCapability.ArkUI.ArkUI.Full
2540   * @since 4
2541   */
2542  rotate(rotate: number): void;
2543
2544  /**
2545   * Scales a canvas based on scaling factors.
2546   *
2547   * @param { number } x - Horizontal scale factor.
2548   * @param { number } y - Vertical scale factor.
2549   * @syscap SystemCapability.ArkUI.ArkUI.Full
2550   * @since 4
2551   */
2552  scale(x: number, y: number): void;
2553
2554  /**
2555   * Defines a transformation matrix.
2556   * To transform a graph, you only need to set parameters of the matrix.
2557   * The coordinates of the corresponding graph are multiplied by the matrix values to obtain new coordinates of the transformed graph.
2558   * You can use the matrix to implement multiple transform effects.
2559   *
2560   * @param { number } scaleX - X-axis scale.
2561   * @param { number } skewX - X-axis skew.
2562   * @param { number } skewY - Y-axis skew.
2563   * @param { number } scaleY - Y-axis scale.
2564   * @param { number } translateX - X-axis translation.
2565   * @param { number } translateY - Y-axis translation.
2566   * @syscap SystemCapability.ArkUI.ArkUI.Full
2567   * @since 4
2568   */
2569  transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void;
2570
2571  /**
2572   * Uses same parameters as the transform() function to reset the existing transformation matrix and create a new transformation matrix.
2573   *
2574   * @param { number } scaleX - X-axis scale.
2575   * @param { number } skewX - X-axis skew.
2576   * @param { number } skewY - Y-axis skew.
2577   * @param { number } scaleY - Y-axis scale.
2578   * @param { number } translateX - X-axis translation.
2579   * @param { number } translateY - Y-axis translation.
2580   * @syscap SystemCapability.ArkUI.ArkUI.Full
2581   * @since 4
2582   */
2583  setTransform(
2584    scaleX: number,
2585    skewX: number,
2586    skewY: number,
2587    scaleY: number,
2588    translateX: number,
2589    translateY: number,
2590  ): void;
2591
2592  /**
2593   * Moves the origin of the coordinate system.
2594   *
2595   * @param { number } x - X-axis translation.
2596   * @param { number } y - Y-axis translation.
2597   * @syscap SystemCapability.ArkUI.ArkUI.Full
2598   * @since 4
2599   */
2600  translate(x: number, y: number): void;
2601
2602  /**
2603   * Sets the alpha value.
2604   * Global alpha value to set.
2605   * The value ranges from 0.0 (completely transparent) to 1.0 (completely opaque).
2606   *
2607   * @type { number }
2608   * @syscap SystemCapability.ArkUI.ArkUI.Full
2609   * @since 4
2610   */
2611  globalAlpha: number;
2612
2613  /**
2614   * Draws an image.
2615   *
2616   * @param { Image } image - Image resource.
2617   * @param { number } dx - X-coordinate of the upper left corner of the drawing area on the canvas.
2618   * @param { number } dy - Y-coordinate of the upper left corner of the drawing area on the canvas.
2619   * @param { number } dWidth - Width of the drawing area.
2620   * @param { number } dHeight - Height of the drawing area.
2621   * @syscap SystemCapability.ArkUI.ArkUI.Full
2622   * @since 4
2623   */
2624  drawImage(image: Image, dx: number, dy: number, dWidth: number, dHeight: number): void;
2625
2626  /**
2627   * Draws an image.
2628   *
2629   * @param { Image } image - Image resource.
2630   * @param { number } sx - X-coordinate of the upper left corner of the rectangle used to crop the source image.
2631   * @param { number } sy - Y-coordinate of the upper left corner of the rectangle used to crop the source image.
2632   * @param { number } sWidth - Target width of the image to crop.
2633   * @param { number } sHeight - Target height of the image to crop.
2634   * @param { number } dx - X-coordinate of the upper left corner of the drawing area on the canvas.
2635   * @param { number } dy - Y-coordinate of the upper left corner of the drawing area on the canvas.
2636   * @param { number } dWidth - Width of the drawing area.
2637   * @param { number } dHeight - Height of the drawing area.
2638   * @syscap SystemCapability.ArkUI.ArkUI.Full
2639   * @since 4
2640   */
2641  drawImage(
2642    image: Image,
2643    sx: number,
2644    sy: number,
2645    sWidth: number,
2646    sHeight: number,
2647    dx: number,
2648    dy: number,
2649    dWidth: number,
2650    dHeight: number,
2651  ): void;
2652
2653  /**
2654   * Draws an image.
2655   *
2656   * @param { image.PixelMap } image - Image resource.
2657   * @param { number } dx - X-coordinate of the upper left corner of the drawing area on the canvas.
2658   * @param { number } dy - Y-coordinate of the upper left corner of the drawing area on the canvas.
2659   * @param { number } dWidth - Width of the drawing area.
2660   * @param { number } dHeight - Height of the drawing area.
2661   * @syscap SystemCapability.ArkUI.ArkUI.Full
2662   * @since 9
2663   */
2664  drawImage(image: image.PixelMap, dx: number, dy: number, dWidth: number, dHeight: number): void;
2665
2666  /**
2667   * Draws an image.
2668   *
2669   * @param { image.PixelMap } image - Image resource.
2670   * @param { number } sx - X-coordinate of the upper left corner of the rectangle used to crop the source image.
2671   * @param { number } sy - Y-coordinate of the upper left corner of the rectangle used to crop the source image.
2672   * @param { number } sWidth - Target width of the image to crop.
2673   * @param { number } sHeight - Target height of the image to crop.
2674   * @param { number } dx - X-coordinate of the upper left corner of the drawing area on the canvas.
2675   * @param { number } dy - Y-coordinate of the upper left corner of the drawing area on the canvas.
2676   * @param { number } dWidth - Width of the drawing area.
2677   * @param { number } dHeight - Height of the drawing area.
2678   * @syscap SystemCapability.ArkUI.ArkUI.Full
2679   * @since 9
2680   */
2681  drawImage(
2682    image: image.PixelMap,
2683    sx: number,
2684    sy: number,
2685    sWidth: number,
2686    sHeight: number,
2687    dx: number,
2688    dy: number,
2689    dWidth: number,
2690    dHeight: number,
2691  ): void;
2692
2693  /**
2694   * Restores the saved drawing context.
2695   *
2696   * @type { function }
2697   * @syscap SystemCapability.ArkUI.ArkUI.Full
2698   * @since 4
2699   */
2700  restore: () => void;
2701
2702  /**
2703   * Saves the current drawing context.
2704   *
2705   * @type { function }
2706   * @syscap SystemCapability.ArkUI.ArkUI.Full
2707   * @since 4
2708   */
2709  save: () => void;
2710
2711  /**
2712   * Creates an ImageData object.
2713   *
2714   * @param { number } width - Width of the ImageData object.
2715   * @param { number } height - Height of the ImageData object.
2716   * @returns { ImageData } Returns the newly created FunctionCallable object.
2717   * @syscap SystemCapability.ArkUI.ArkUI.Full
2718   * @since 4
2719   */
2720  createImageData(width: number, height: number): ImageData;
2721  /**
2722   * Creates an ImageData object.
2723   *
2724   * @param { ImageData } imagedata - ImageData object with the same width and height copied from the original ImageData object.
2725   * @returns { ImageData } Returns the newly created FunctionCallable object.
2726   * @syscap SystemCapability.ArkUI.ArkUI.Full
2727   * @since 4
2728   */
2729  createImageData(imagedata: ImageData): ImageData;
2730
2731  /**
2732   * ImageData object created with pixels in the specified area on the canvas.
2733   *
2734   * @param { number } sx - X-coordinate of the upper left corner of the output area.
2735   * @param { number } sy - Y-coordinate of the upper left corner of the output area.
2736   * @param { number } sw - Width of the output area.
2737   * @param { number } sh - Height of the output area.
2738   * @returns { ImageData } ImageData object that contains pixels in the specified area on the canvas.
2739   * @syscap SystemCapability.ArkUI.ArkUI.Full
2740   * @since 4
2741   */
2742  getImageData(sx: number, sy: number, sw: number, sh: number): ImageData;
2743
2744  /**
2745   * Get an PixelMap object.
2746   *
2747   * @param { number } sx - The upper-left x-coordinate of the rectangular area of the image data to be extracted.
2748   * @param { number } sy - The upper-left y coordinate of the rectangular region of the image data to be extracted.
2749   * @param { number } sw - The width of the rectangular area of the image data to be extracted.
2750   * @param { number } sh - The height of the rectangular area of the image data to be extracted.
2751   * @returns { image.PixelMap } PixelMap A PixelMap object that contains the rectangular ImageData given by the canvas.
2752   * @syscap SystemCapability.ArkUI.ArkUI.Full
2753   * @since 9
2754   */
2755  getPixelMap(sx: number, sy: number, sw: number, sh: number): image.PixelMap
2756
2757  /**
2758   * Puts the ImageData onto a rectangular area on the canvas.
2759   *
2760   * @param { ImageData } imageData - ImageData object with pixels to put onto the canvas.
2761   * @param { number } dx - X-axis offset of the rectangle area on the canvas.
2762   * @param { number } dy - Y-axis offset of the rectangle area on the canvas.
2763   * @syscap SystemCapability.ArkUI.ArkUI.Full
2764   * @since 4
2765   */
2766  putImageData(imageData: ImageData, dx: number, dy: number): void;
2767
2768  /**
2769   * Puts the ImageData onto a rectangular area on the canvas.
2770   *
2771   * @param { ImageData } imageData - ImageData object with pixels to put onto the canvas.
2772   * @param { number } dx - X-axis offset of the rectangle area on the canvas.
2773   * @param { number } dy - Y-axis offset of the rectangle area on the canvas.
2774   * @param { number } dirtyX - X-axis offset of the upper left corner of the rectangle area relative to that of the source image.
2775   * @param { number } dirtyY - Y-axis offset of the upper left corner of the rectangle area relative to that of the source image.
2776   * @param { number } dirtyWidth - Width of the rectangle area to cop the source image.
2777   * @param { number } dirtyHeight - Height of the rectangle area to cop the source image.
2778   * @syscap SystemCapability.ArkUI.ArkUI.Full
2779   * @since 4
2780   */
2781  putImageData(
2782    imageData: ImageData,
2783    dx: number,
2784    dy: number,
2785    dirtyX: number,
2786    dirtyY: number,
2787    dirtyWidth: number,
2788    dirtyHeight: number,
2789  ): void;
2790
2791  /**
2792   * Sets the dash line style.
2793   *
2794   * @param { Array<number> } segments - Interval of alternate line segments and the length of spacing.
2795   * @syscap SystemCapability.ArkUI.ArkUI.Full
2796   * @since 4
2797   */
2798  setLineDash(segments: Array<number>): void;
2799
2800  /**
2801   * Obtains the dash line style.
2802   *
2803   * @returns { Array<number> } Interval of alternate line segments and the length of spacing.
2804   * @syscap SystemCapability.ArkUI.ArkUI.Full
2805   * @since 4
2806   */
2807  getLineDash(): Array<number>;
2808
2809  /**
2810   * Sets the dash line offset.
2811   * Dash line offset. The value is a float number starting from 0.0.
2812   *
2813   * @type { number }
2814   * @syscap SystemCapability.ArkUI.ArkUI.Full
2815   * @since 4
2816   */
2817  lineDashOffset: number;
2818
2819  /**
2820   * Sets the composite operation type.
2821   * source-over Default value. Displays the new drawing above the existing drawing.
2822   * source-atop Displays the new drawing on the top of the existing drawing.
2823   * source-in Displays the new drawing inside the existing drawing.
2824   * source-out Displays part of the new drawing that is outside of the existing drawing.
2825   * destination-over Displays the existing drawing above the new drawing.
2826   * destination-atop Displays the existing drawing above the new drawing.
2827   * destination-in Displays the existing drawing inside the new drawing.
2828   * destination-out Displays part of the existing drawing that is outside of the new drawing.
2829   * lighter Displays both the new drawing and the existing drawing.
2830   * copy Displays the new drawing and neglects the existing drawing.
2831   * xor Combines the new drawing and existing drawing using the XOR operation.
2832   *
2833   * @type { string }
2834   * @syscap SystemCapability.ArkUI.ArkUI.Full
2835   * @since 4
2836   */
2837  globalCompositeOperation: string;
2838
2839  /**
2840   * Sets the shadow blur degree.
2841   * Shadow blur degree. A larger value indicates a more blurred shadow. The value is of the float type, and the default value is 0.
2842   *
2843   * @type { number }
2844   * @syscap SystemCapability.ArkUI.ArkUI.Full
2845   * @since 4
2846   */
2847  shadowBlur: number;
2848
2849  /**
2850   * Sets the shadow color.
2851   *
2852   * @type { string }
2853   * @syscap SystemCapability.ArkUI.ArkUI.Full
2854   * @since 4
2855   */
2856  shadowColor: string;
2857
2858  /**
2859   * Sets the x-axis shadow offset relative to the original object.
2860   * X-axis shadow offset relative to the original object.
2861   *
2862   * @type { number }
2863   * @syscap SystemCapability.ArkUI.ArkUI.Full
2864   * @since 4
2865   */
2866  shadowOffsetX: number;
2867
2868  /**
2869   * Sets the y-axis shadow offset relative to the original object.
2870   * Y-axis shadow offset relative to the original object.
2871   *
2872   * @type { number }
2873   * @syscap SystemCapability.ArkUI.ArkUI.Full
2874   * @since 4
2875   */
2876  shadowOffsetY: number;
2877
2878  /**
2879   * Draws the Bitmap to the current canvas.
2880   *
2881   * @param { ImageBitmap } bitmap
2882   * @syscap SystemCapability.ArkUI.ArkUI.Full
2883   * @since 7
2884   */
2885  transferFromImageBitmap(bitmap: ImageBitmap): void;
2886}
2887
2888/**
2889 * You can create a gradient object on the canvas by calling CanvasRenderingContext2D.createLinearGradient().
2890 *
2891 * @interface CanvasGradient
2892 * @syscap SystemCapability.ArkUI.ArkUI.Full
2893 * @since 4
2894 */
2895export interface CanvasGradient {
2896  /**
2897   * Adds a color stop for the CanvasGradient object based on the specified offset and gradient color.
2898   *
2899   * @param { number } offset - Proportion of the distance between the color stop and the start point to the total length.
2900   * The value ranges from 0 to 1.
2901   * @param { string } color - Sets the gradient color.
2902   * @syscap SystemCapability.ArkUI.ArkUI.Full
2903   * @since 4
2904   */
2905  addColorStop(offset: number, color: string): void;
2906}
2907
2908/**
2909 * Path2D
2910 *
2911 * @interface Path2D
2912 * @syscap SystemCapability.ArkUI.ArkUI.Full
2913 * @since 4
2914 */
2915export interface Path2D {
2916  /**
2917   * Add another path to current path.
2918   *
2919   * @param { Path2D } path - another created Path2D object.
2920   * @syscap SystemCapability.ArkUI.ArkUI.Full
2921   * @since 4
2922   */
2923  addPath(path: Path2D): void;
2924
2925  /**
2926   * Uses same parameters as the transform() function to reset the existing transformation matrix and create a new transformation matrix.
2927   *
2928   * @param { number } scaleX - X-axis scale.
2929   * @param { number } skewX - X-axis skew.
2930   * @param { number } skewY - Y-axis skew.
2931   * @param { number } scaleY - Y-axis scale.
2932   * @param { number } translateX - X-axis translation.
2933   * @param { number } translateY - Y-axis translation.
2934   * @syscap SystemCapability.ArkUI.ArkUI.Full
2935   * @since 4
2936   */
2937  setTransform(
2938    scaleX: number,
2939    skewX: number,
2940    skewY: number,
2941    scaleY: number,
2942    translateX: number,
2943    translateY: number,
2944  ): void;
2945
2946  /**
2947   * Draws a closed path.
2948   *
2949   * @syscap SystemCapability.ArkUI.ArkUI.Full
2950   * @since 4
2951   */
2952  closePath(): void;
2953
2954  /**
2955   * Moves a drawing path to a target position on the canvas.
2956   *
2957   * @param { number } x - X-coordinate of the target position.
2958   * @param { number } y - Y-coordinate of the target position.
2959   * @syscap SystemCapability.ArkUI.ArkUI.Full
2960   * @since 4
2961   */
2962  moveTo(x: number, y: number): void;
2963
2964  /**
2965   * Connects the current point to a target position using a straight line.
2966   *
2967   * @param { number } x - X-coordinate of the target position.
2968   * @param { number } y - Y-coordinate of the target position.
2969   * @syscap SystemCapability.ArkUI.ArkUI.Full
2970   * @since 4
2971   */
2972  lineTo(x: number, y: number): void;
2973
2974  /**
2975   * Draws a cubic bezier curve on the canvas.
2976   *
2977   * @param { number } cp1x - X-coordinate of the first parameter of the bezier curve.
2978   * @param { number } cp1y - Y-coordinate of the first parameter of the bezier curve.
2979   * @param { number } cp2x - X-coordinate of the second parameter of the bezier curve.
2980   * @param { number } cp2y - Y-coordinate of the second parameter of the bezier curve.
2981   * @param { number } x - End point x-coordinate of the bezier curve.
2982   * @param { number } y - End point y-coordinate of the bezier curve.
2983   * @syscap SystemCapability.ArkUI.ArkUI.Full
2984   * @since 4
2985   */
2986  bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
2987
2988  /**
2989   * Draws a quadratic curve on the canvas.
2990   *
2991   * @param { number } cpx - X-coordinate of the bezier curve parameter.
2992   * @param { number } cpy - Y-coordinate of the bezier curve parameter.
2993   * @param { number } x - End point x-coordinate of the bezier curve.
2994   * @param { number } y - End point y-coordinate of the bezier curve.
2995   * @syscap SystemCapability.ArkUI.ArkUI.Full
2996   * @since 4
2997   */
2998  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
2999
3000  /**
3001   * Draws an arc on the canvas.
3002   *
3003   * @param { number } x - X-coordinate of the center point of the arc.
3004   * @param { number } y - Y-coordinate of the center point of the arc.
3005   * @param { number } radius - Radius of the arc.
3006   * @param { number } startAngle - Start radian of the arc.
3007   * @param { number } endAngel - End radian of the arc.
3008   * @param { boolean } [anticlockwise] - Whether to draw the arc counterclockwise.
3009   * @syscap SystemCapability.ArkUI.ArkUI.Full
3010   * @since 4
3011   */
3012  arc(x: number, y: number, radius: number, startAngle: number, endAngel: number, anticlockwise?: boolean): void;
3013
3014  /**
3015   * Draws an arc based on the radius and points on the arc.
3016   *
3017   * @param { number } x1 - X-coordinate of the first point on the arc.
3018   * @param { number } y1 - Y-coordinate of the first point on the arc.
3019   * @param { number } x2 - X-coordinate of the second point on the arc.
3020   * @param { number } y2 - Y-coordinate of the second point on the arc.
3021   * @param { number } radius - Radius of the arc.
3022   * @syscap SystemCapability.ArkUI.ArkUI.Full
3023   * @since 4
3024   */
3025  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
3026
3027  /**
3028   * Draws an ellipse based on the coordinate and radius.
3029   *
3030   * @param { number } x - X-coordinate of the center point on the ellipse.
3031   * @param { number } y - Y-coordinate of the center point on the ellipse.
3032   * @param { number } radiusX - X-coordinate of the radius Length on the ellipse.
3033   * @param { number } radiusY - Y-coordinate of the radius Length on the ellipse.
3034   * @param { number } rotation - The rotation angle of the ellipse, in radians.
3035   * @param { number } startAngle - Angle of the start point for ellipse drawing.
3036   * @param { number } endAngle - End Point Angle for Ellipse Drawing.
3037   * @param { number } anticlockwise - Indicates whether to draw an ellipse counterclockwise.
3038   * 0: clockwise; 1: counterclockwise. The default value is 0.
3039   * @syscap SystemCapability.ArkUI.ArkUI.Full
3040   * @since 4
3041   */
3042  ellipse(
3043    x: number,
3044    y: number,
3045    radiusX: number,
3046    radiusY: number,
3047    rotation: number,
3048    startAngle: number,
3049    endAngle: number,
3050    anticlockwise?: number,
3051  ): void;
3052
3053  /**
3054   * Creates a rectangular.
3055   *
3056   * @param { number } x - X-coordinate of the upper left corner of the rectangle.
3057   * @param { number } y - Y-coordinate of the upper left corner of the rectangle.
3058   * @param { number } width - Width of the rectangle.
3059   * @param { number } height - Height of the rectangle.
3060   * @syscap SystemCapability.ArkUI.ArkUI.Full
3061   * @since 4
3062   */
3063  rect(x: number, y: number, width: number, height: number): void;
3064}
3065
3066/**
3067 * <canvas> provides a rectangular canvas component for drawing graphics on the screen.
3068 * You can control each pixel to draw on the canvas.
3069 * <canvas> offers a variety of functions for drawing paths, rectangles, circles, text, and allows for adding images to it.
3070 *
3071 * @extends Element
3072 * @interface CanvasElement
3073 * @syscap SystemCapability.ArkUI.ArkUI.Full
3074 * @since 4
3075 */
3076export interface CanvasElement extends Element {
3077  /**
3078   * Obtains the context of 2D canvas drawing.
3079   * Only parameters related to 2D canvas drawing are supported.
3080   * The return value is a 2D drawing object that provides specific 2D drawing operations.
3081   *
3082   * @param { "2d" } type - identifier defining the drawing context associated to the canvas.
3083   * @param { ContextAttrOptions } [options] - use this context attributes to creating rendering context.
3084   * @returns { CanvasRenderingContext2D }
3085   * @syscap SystemCapability.ArkUI.ArkUI.Full
3086   * @since 4
3087   */
3088  getContext(type: "2d", options?: ContextAttrOptions): CanvasRenderingContext2D;
3089
3090  /**
3091   * Obtains the context of webgl canvas drawing.
3092   * Only parameters related to webgl canvas drawing are supported.
3093   * The return value is a webgl drawing object that provides specific webgl drawing operations.
3094   *
3095   * @param { "webgl" } type - identifier defining the drawing context associated to the canvas.
3096   * @param { WebGLContextAttributes } [options] - use this context attributes to creating rendering context.
3097   * @returns { WebGLRenderingContext }
3098   * @syscap SystemCapability.ArkUI.ArkUI.Full
3099   * @since 6
3100   */
3101  getContext(type: "webgl", options?: WebGLContextAttributes): WebGLRenderingContext;
3102
3103  /**
3104   * Obtains the context of webgl2 canvas drawing.
3105   * Only parameters related to webgl2 canvas drawing are supported.
3106   * The return value is a webgl2 drawing object that provides specific webgl2 drawing operations.
3107   *
3108   * @param { "webgl2" } type - identifier defining the drawing context associated to the canvas.
3109   * @param { WebGLContextAttributes } [options] - use this context attributes to creating rendering context.
3110   * @returns { WebGL2RenderingContext }
3111   * @syscap SystemCapability.ArkUI.ArkUI.Full
3112   * @since 4
3113   */
3114  getContext(type: "webgl2", options?: WebGLContextAttributes): WebGL2RenderingContext;
3115
3116  /**
3117   * Creates a data URI that contains the image display.
3118   *
3119   * @param { string } type - A DOMString indicating the image format. The default type is image/png.
3120   * @param { number } [quality] - A Number between 0 and 1 indicating image quality if the type option
3121   * is image/jpeg or image/webp. If this argument is anything else,
3122   * the default value for image quality is used. Other arguments are ignored.
3123   * @returns { string }
3124   * @syscap SystemCapability.ArkUI.ArkUI.Full
3125   * @since 4
3126   */
3127  toDataURL(type?: string, quality?: number): string;
3128}
3129
3130/**
3131 * ScrollOptions
3132 *
3133 * @interface ScrollOptions
3134 * @syscap SystemCapability.ArkUI.ArkUI.Full
3135 * @since 6
3136 */
3137export interface ScrollOptions {
3138  /**
3139   * Scroll to the target position of the page. Unit: px
3140   *
3141   * @type { number }
3142   * @syscap SystemCapability.ArkUI.ArkUI.Full
3143   * @since 6
3144   */
3145  position: number;
3146
3147  /**
3148   * Duration of the scrolling animation, in ms.
3149   *
3150   * @type { number }
3151   * @syscap SystemCapability.ArkUI.ArkUI.Full
3152   * @since 6
3153   */
3154  duration: number;
3155
3156  /**
3157   * The selector for current scroll.
3158   *
3159   * @type { ?string }
3160   * @syscap SystemCapability.ArkUI.ArkUI.Full
3161   * @since 6
3162   */
3163  id?: string;
3164
3165  /**
3166   * The timing function for current scroll animation.
3167   *
3168   * @type { ?string }
3169   * @syscap SystemCapability.ArkUI.ArkUI.Full
3170   * @since 6
3171   */
3172  timingFunction?: string;
3173
3174  /**
3175   * Callback function for successful interface invocation.
3176   *
3177   * @type { ?function }
3178   * @syscap SystemCapability.ArkUI.ArkUI.Full
3179   * @since 6
3180   */
3181  success?: (result: Object) => void;
3182
3183  /**
3184   * Callback function for interface invocation failure.
3185   *
3186   * @type { ?function }
3187   * @syscap SystemCapability.ArkUI.ArkUI.Full
3188   * @since 6
3189   */
3190  fail?: (result: Object) => void;
3191
3192  /**
3193   * Callback function at the end of the interface invoking (executed both successfully and unsuccessfully).
3194   *
3195   * @type { ?function }
3196   * @syscap SystemCapability.ArkUI.ArkUI.Full
3197   * @since 6
3198   */
3199  complete?: (result: Object) => void;
3200}
3201
3202/**
3203 * ScrollOffset
3204 *
3205 * @interface ScrollOffset
3206 * @syscap SystemCapability.ArkUI.ArkUI.Full
3207 * @since 6
3208 */
3209export interface ScrollOffset {
3210  /**
3211   * Scrolling offset in the x-axis, in px.
3212   *
3213   * @type { number }
3214   * @syscap SystemCapability.ArkUI.ArkUI.Full
3215   * @since 6
3216   */
3217  x: number;
3218
3219  /**
3220   * Scrolling offset in the y-axis, in px.
3221   *
3222   * @type { number }
3223   * @syscap SystemCapability.ArkUI.ArkUI.Full
3224   * @since 6
3225   */
3226  y: number;
3227}
3228
3229/**
3230 * The <div> component provides a div container.
3231 *
3232 * @extends Element
3233 * @interface DivElement
3234 * @syscap SystemCapability.ArkUI.ArkUI.Full
3235 * @since 6
3236 */
3237export interface DivElement extends Element {
3238  /**
3239   * Scrolls the div for a certain distance.
3240   *
3241   * @param { ScrollParam } data
3242   * @syscap SystemCapability.ArkUI.ArkUI.Full
3243   * @since 6
3244   */
3245  scrollBy(data: ScrollParam): void;
3246
3247  /**
3248   * Returns the offset of the current scrolling. The return value type is Object.
3249   *
3250   * @returns { ScrollOffset }
3251   * @syscap SystemCapability.ArkUI.ArkUI.Full
3252   * @since 6
3253   */
3254  getScrollOffset(): ScrollOffset;
3255}
3256
3257/**
3258 * Application
3259 *
3260 * @interface Application
3261 * @syscap SystemCapability.ArkUI.ArkUI.Full
3262 * @since 4
3263 */
3264export interface Application {
3265  /**
3266   * Object that is exposed in the app.js file and obtained by this.$app.$def.
3267   *
3268   * @type { any }
3269   * @syscap SystemCapability.ArkUI.ArkUI.Full
3270   * @since 4
3271   */
3272  $def: any;
3273}
3274
3275/**
3276 * ViewModel
3277 *
3278 * @interface ViewModel
3279 * @syscap SystemCapability.ArkUI.ArkUI.Full
3280 * @since 4
3281 */
3282export interface ViewModel {
3283  /**
3284   * Object that is exposed in the app.js file and obtained by this.$app
3285   *
3286   * @type  { Application }
3287   * @syscap SystemCapability.ArkUI.ArkUI.Full
3288   * @since 4
3289   */
3290  $app: Application;
3291
3292  /**
3293   * Sets the parameters based on the system language, for example, this.$t('strings.hello').
3294   *
3295   * @param { string } path - Path of the language resource key.
3296   * @param { object | Array<any> } [params] - Content used to replace placeholders during runtime.
3297   * @returns { string } Content.
3298   * There are two types of placeholders available:Named placeholder, for example, {name}.
3299   * The actual content must be of the object type, for example, $t('strings.object', { name: 'Hello world' }).
3300   * Digit placeholder, for example, {0}. The actual content must be of the array type, for example, $t('strings.array', ['Hello world'].
3301   * @syscap SystemCapability.ArkUI.ArkUI.Lite
3302   * @since 4
3303   */
3304  $t(path: string, params?: object | Array<any>): string;
3305
3306  /**
3307   * Converse between singular and plural forms based on the system language, for example, this.$tc('strings.plurals').
3308   * NOTE
3309   * The resource content is distinguished by the following JSON keys: zero, one, two, few, many, and other.
3310   *
3311   * @param { string } path - Resource file path.
3312   * @param { number } count - Value.
3313   * @returns { string } Content.
3314   * @syscap SystemCapability.ArkUI.ArkUI.Full
3315   * @since 4
3316   */
3317  $tc(path: string, count: number): string;
3318
3319  /**
3320   * Replace the resource path based on the DPI of the current device: this.$r('image.tv').
3321   *
3322   * @param { string } path - Resource file path.
3323   * @returns { string } Content.
3324   * @syscap SystemCapability.ArkUI.ArkUI.Full
3325   * @since 4
3326   */
3327  $r(path: string): string;
3328
3329  /**
3330   * Adds an attribute or modifies an existing attribute.
3331   * Usage: this.$set('key',value): Add an attribute.
3332   *
3333   * @param { string } key
3334   * @param { any } value
3335   * @syscap SystemCapability.ArkUI.ArkUI.Full
3336   * @since 4
3337   */
3338  $set(key: string, value: any): void;
3339
3340  /**
3341   * Deletes an attribute.
3342   * Usage:this.$delete('key'): Delete an attribute.
3343   *
3344   * @param { string } key
3345   * @syscap SystemCapability.ArkUI.ArkUI.Full
3346   * @since 4
3347   */
3348  $delete(key: string): void;
3349
3350  /**
3351   * Obtains the component with a specified ID. If no ID is specified, the root component is returned.
3352   * Usage:
3353   * <div id='xxx'></div>
3354   * this.$element('xxx'): Obtain the component whose ID is xxx.
3355   * this.$element(): Obtain the root component.
3356   *
3357   * @param { string } [id] - Component ID.
3358   * @returns {AnimationElement &CanvasElement &
3359   * object &WebElement &CameraElement &ListElement &
3360   * SwiperElement &DialogElement &ImageAnimatorElement &
3361   * MarqueeElement &MenuElement &ChartElement &InputElement &
3362   * ButtonElement &TextAreaElement &PickerElement &VideoElement &DivElement}
3363   * @syscap SystemCapability.ArkUI.ArkUI.Full
3364   * @since 4
3365   */
3366  $element(
3367    id?: string,
3368  ): AnimationElement &
3369    CanvasElement &
3370    object &
3371    WebElement &
3372    CameraElement &
3373    ListElement &
3374    SwiperElement &
3375    DialogElement &
3376    ImageAnimatorElement &
3377    MarqueeElement &
3378    MenuElement &
3379    ChartElement &
3380    InputElement &
3381    ButtonElement &
3382    TextAreaElement &
3383    PickerElement &
3384    VideoElement &
3385    DivElement;
3386
3387  /**
3388   * Obtains the root ViewModel instance.
3389   *
3390   * @returns { ViewModel & object }
3391   * @syscap SystemCapability.ArkUI.ArkUI.Full
3392   * @since 4
3393   */
3394  $root(): ViewModel & object;
3395
3396  /**
3397   * Obtains the parent ViewModel instance.
3398   *
3399   * @returns { ViewModel & object }
3400   * @syscap SystemCapability.ArkUI.ArkUI.Full
3401   * @since 4
3402   */
3403  $parent(): ViewModel & object;
3404
3405  /**
3406   * Obtains the ViewModel instance of a custom child component with a specified ID.
3407   * Usage:this.$child('xxx'): Obtain the ViewModel instance of a custom child component whose ID is xxx.
3408   *
3409   * @param { string } id - Component ID.
3410   * @returns { ViewModel & object }
3411   * @syscap SystemCapability.ArkUI.ArkUI.Full
3412   * @since 4
3413   */
3414  $child(id: string): ViewModel & object;
3415
3416  /**
3417   * Listens for attribute changes. If the value of the data attribute changes, the bound event is triggered.
3418   *
3419   * @param { string } data - Attribute.
3420   * @param { string } callback - Function name.
3421   * @syscap SystemCapability.ArkUI.ArkUI.Full
3422   * @since 4
3423   */
3424  $watch(data: string, callback: string): void;
3425
3426  /**
3427   * An object that holds all DOM elements and component instances that have been registered with the refs attribute.
3428   *
3429   * @type { ElementReferences }
3430   * @syscap SystemCapability.ArkUI.ArkUI.Lite
3431   * @since 4
3432   */
3433  $refs: ElementReferences;
3434
3435  /**
3436   * Custom events.
3437   *
3438   * @param { string } event - The name of event.
3439   * @param { object } [params] - The params of event.
3440   * @syscap SystemCapability.ArkUI.ArkUI.Full
3441   * @since 4
3442   */
3443  $emit(event: string, params?: object): void;
3444
3445  /**
3446   * Scroll the page to the destination.
3447   *
3448   * @param { ScrollOptions } options - The properties of event.
3449   * @syscap SystemCapability.ArkUI.ArkUI.Full
3450   * @since 6
3451   */
3452  scrollTo(options: ScrollOptions): void;
3453}
3454
3455/**
3456 * ElementReferences
3457 *
3458 * @interface ElementReferences
3459 * @syscap SystemCapability.ArkUI.ArkUI.Full
3460 * @since 4
3461 */
3462export interface ElementReferences {
3463  [k: string]: AnimationElement &
3464  CanvasElement &
3465  object &
3466  WebElement &
3467  CameraElement &
3468  ListElement &
3469  SwiperElement &
3470  DialogElement &
3471  ImageAnimatorElement &
3472  MarqueeElement &
3473  MenuElement &
3474  ChartElement &
3475  InputElement &
3476  ButtonElement &
3477  TextAreaElement &
3478  PickerElement &
3479  VideoElement &
3480  DivElement;
3481}
3482
3483/**
3484 * @syscap SystemCapability.ArkUI.ArkUI.Full
3485 * @since 4
3486 */
3487export declare class Locate {
3488  /**
3489   * language, such as 'zh'.
3490   *
3491   * @type { string }
3492   * @syscap SystemCapability.ArkUI.ArkUI.Full
3493   * @since 4
3494   */
3495  language: string;
3496
3497  /**
3498   * country or region, such ass 'CN'.
3499   *
3500   * @type { string }
3501   * @syscap SystemCapability.ArkUI.ArkUI.Full
3502   * @since 4
3503   */
3504  countryOrRegion: string;
3505
3506  /**
3507   * text layout direction, ltr or rtl.
3508   *
3509   * @type { "ltr" | "rtl" }
3510   * @syscap SystemCapability.ArkUI.ArkUI.Full
3511   * @since 4
3512   */
3513  dir: "ltr" | "rtl";
3514
3515  /**
3516   * The Unicode locale key set defined by the locale. If this locale does not have a specific key set, an empty set is
3517   * returned. For example: {"nu": "arab"}, which means that the numbers in the current environment use Arabic numbers.
3518   *
3519   * @type { object }
3520   * @syscap SystemCapability.ArkUI.ArkUI.Full
3521   * @since 5
3522   */
3523  unicodeSetting: object;
3524}
3525
3526/**
3527 * @syscap SystemCapability.ArkUI.ArkUI.Full
3528 * @since 6
3529 */
3530export declare class Configuration {
3531  /**
3532   * Internationalization related information, such as language, country, text layout direction, etc.
3533   *
3534   * @type { Locate }
3535   * @syscap SystemCapability.ArkUI.ArkUI.Full
3536   * @since 6
3537   */
3538  locate: Locate;
3539
3540  /**
3541   * The magnification of the current system font.
3542   *
3543   * @type { number }
3544   * @syscap SystemCapability.ArkUI.ArkUI.Full
3545   * @since 6
3546   */
3547  fontScale: number;
3548}
3549
3550/**
3551 * Options
3552 *
3553 * @interface Options
3554 * @syscap SystemCapability.ArkUI.ArkUI.Full
3555 * @since 4
3556 */
3557export interface Options<T extends ViewModel, Data = DefaultData<T>> {
3558  /**
3559   * Data model of the page that can be converted into a JSON object.
3560   * The attribute name cannot start with $ or an underscore (_) or contain the reserved words such as for, if, show, and tid.
3561   * For a function, the return value must be an object.
3562   * Set the value of data to the return value of the function during page initialization.
3563   *
3564   * @type { ?Data }
3565   * @syscap SystemCapability.ArkUI.ArkUI.Lite
3566   * @since 4
3567   */
3568  data?: Data;
3569
3570  /**
3571   * Listens for page initialization.
3572   * Called when page initialization is complete. This function is called only once in a lifecycle.
3573   *
3574   * @syscap SystemCapability.ArkUI.ArkUI.Full
3575   * @since 4
3576   */
3577  onInit?(): void;
3578
3579  /**
3580   * Listens for page creation.
3581   * Called when a page is created. This function is called only once in a lifecycle.
3582   *
3583   * @syscap SystemCapability.ArkUI.ArkUI.Full
3584   * @since 4
3585   */
3586  onReady?(): void;
3587
3588  /**
3589   * Listens for page display.
3590   * Called when the page is displayed.
3591   *
3592   * @syscap SystemCapability.ArkUI.ArkUI.Full
3593   * @since 4
3594   */
3595  onShow?(): void;
3596
3597  /**
3598   * Listens for page hiding.
3599   * Called when the page disappears.
3600   *
3601   * @syscap SystemCapability.ArkUI.ArkUI.Full
3602   * @since 4
3603   */
3604  onHide?(): void;
3605
3606  /**
3607   * Listens for page destruction.
3608   * Called when the page is destroyed.
3609   *
3610   * @syscap SystemCapability.ArkUI.ArkUI.Full
3611   * @since 4
3612   */
3613  onDestroy?(): void;
3614
3615  /**
3616   * Listens for the back button action.
3617   * The back button is tapped:
3618   *
3619   * @returns { boolean } true means that the page processes the return logic.
3620   * false means that the default return logic is used.
3621   * If no value is returned, the default return logic is used.
3622   * @syscap SystemCapability.ArkUI.ArkUI.Full
3623   * @since 4
3624   */
3625  onBackPress?(): boolean;
3626
3627  /**
3628   * Listens for page active.
3629   * Called when the page is active.
3630   *
3631   * @syscap SystemCapability.ArkUI.ArkUI.Full
3632   * @since 5
3633   */
3634  onActive?(): void;
3635
3636  /**
3637   * Listens for page inactive.
3638   * Called when the page is paused.
3639   *
3640   * @syscap SystemCapability.ArkUI.ArkUI.Full
3641   * @since 5
3642   */
3643  onInactive?(): void;
3644
3645  /**
3646   * This callback is triggered when a new request is received when the FA has started.
3647   *
3648   * @syscap SystemCapability.ArkUI.ArkUI.Full
3649   * @since 5
3650   */
3651  onNewRequest?(): void;
3652
3653  /**
3654   * Callback when FA initiates a migration, in this callback, the application can decide whether
3655   * to migrate according to the current state.
3656   *
3657   * @returns { boolean }
3658   * @syscap SystemCapability.ArkUI.ArkUI.Full
3659   * @since 5
3660   */
3661  onStartContinuation?(): boolean;
3662
3663  /**
3664   * For the callback of saving state data, the developer needs to fill in the parameter object
3665   * the data to be migrated to the target device.
3666   *
3667   * @param { object } value
3668   * @syscap SystemCapability.ArkUI.ArkUI.Full
3669   * @since 5
3670   */
3671  onSaveData?(value: object): void;
3672
3673  /**
3674   * The callback to restore the data saved by the onSaveData method when the migration was initiated.
3675   *
3676   * @param { object } value
3677   * @syscap SystemCapability.ArkUI.ArkUI.Full
3678   * @since 5
3679   */
3680  onRestoreData?(value: object): void;
3681
3682  /**
3683   * The callback for the completion of the migration, which is triggered on the calling side, indicates
3684   * the result of the application migration to the target device.
3685   *
3686   * @param { number } code
3687   * @syscap SystemCapability.ArkUI.ArkUI.Full
3688   * @since 5
3689   */
3690  onCompleteContinuation?(code: number): void;
3691
3692  /**
3693   * This callback is triggered when the corresponding system configuration changes, such as system font size,
3694   * language region, etc.
3695   *
3696   * @param { Configuration } configuration
3697   * @syscap SystemCapability.ArkUI.ArkUI.Full
3698   * @since 6
3699   */
3700  onConfigurationUpdated?(configuration: Configuration): void;
3701
3702  /**
3703   * Listens for application creation.
3704   * Called when the application is created.
3705   *
3706   * @syscap SystemCapability.ArkUI.ArkUI.Full
3707   * @since 4
3708   */
3709  onCreate?(): void;
3710}
3711
3712/**
3713 * Used for ide.
3714 *
3715 * @typedef { object } DefaultData<T>
3716 * @syscap SystemCapability.ArkUI.ArkUI.Lite
3717 * @systemapi
3718 * @since 4
3719 */
3720type DefaultData<T> = object;
3721/**
3722 * Used for ide.
3723 *
3724 * @typedef { object & Options<T, Data> & ThisType<T & ViewModel & Data> } CombinedOptions<T extends ViewModel, Data>
3725 * @syscap SystemCapability.ArkUI.ArkUI.Lite
3726 * @systemapi
3727 * @since 4
3728 */
3729type CombinedOptions<T extends ViewModel, Data> = object & Options<T, Data> & ThisType<T & ViewModel & Data>;
3730/**
3731 * @param { CombinedOptions<T, Data> } options
3732 * @returns { ViewModel & Data }
3733 * @syscap SystemCapability.ArkUI.ArkUI.Lite
3734 * @systemapi
3735 * @since 4
3736 */
3737export declare function extendViewModel<T extends ViewModel, Data>(options: CombinedOptions<T, Data>): ViewModel & Data;
3738