1/* 2 * Copyright (c) 2020 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 16import { Image, ImageData, ImageBitmap } from "./global"; 17import { WebGLContextAttributes, WebGLRenderingContext } from "../../webgl/webgl"; 18import { WebGL2RenderingContext } from "../../webgl/webgl2"; 19import { CanvasPattern } from './canvaspattern'; 20 21/** 22 * Defines the foucs param. 23 * @syscap SystemCapability.ArkUI.ArkUI.Full 24 * @since 3 25 */ 26export interface FocusParamObj { 27 /** 28 * Whether needs to focus. 29 * @since 3 30 */ 31 focus: boolean; 32} 33 34/** 35 * @syscap SystemCapability.ArkUI.ArkUI.Full 36 * @since 6 37 */ 38export interface RectObj { 39 /** 40 * @since 6 41 */ 42 width: number; 43 /** 44 * @since 6 45 */ 46 height: number; 47 /** 48 * @since 6 49 */ 50 left: number; 51 /** 52 * @since 6 53 */ 54 top: number; 55} 56 57/** 58 * @syscap SystemCapability.ArkUI.ArkUI.Full 59 * @since 6 60 */ 61export interface ContextAttrOptions { 62 /** 63 * @since 6 64 */ 65 antialias: boolean; 66} 67 68/** 69 * @syscap SystemCapability.ArkUI.ArkUI.Full 70 * @since 4 71 */ 72export interface AnimateStyle { 73 /** 74 * Width value applied to the component after the animation is executed. 75 * @since 4 76 */ 77 width: number; 78 /** 79 * Height value applied to the component after the animation is executed. 80 * @since 4 81 */ 82 height: number; 83 /** 84 * left offset applied to the component after the animation is executed. 85 * @since 4 86 */ 87 left: number; 88 /** 89 * top offset applied to the component after the animation is executed. 90 * @since 4 91 */ 92 top: number; 93 /** 94 * right offset applied to the component after the animation is executed. 95 * @since 4 96 */ 97 right: number; 98 /** 99 * bottom offset applied to the component after the animation is executed. 100 * @since 4 101 */ 102 bottom: number; 103 /** 104 * Background color applied to the component after the animation is executed. 105 * The default value is none. 106 * @since 4 107 */ 108 backgroundColor: string; 109 /** 110 * Opacity applied to the component. The value ranges from 0 to 1. 111 * The default value is 1. 112 * @since 4 113 */ 114 opacity: number; 115 /** 116 * The value format is "x y", in percentage or pixels. 117 * The first value indicates the horizontal position, and the second value indicates the vertical position. 118 * If only one value is specified, the other value is 50% by default. 119 * @since 4 120 */ 121 backgroundPosition: string; 122 /** 123 * Origin position of the transformed element. 124 * The first value indicates the x-axis position. The value can be left, center, right, a length, or percentage. 125 * The second value indicates the y-axis position. The value can be top, center, bottom, a length, or a percentage. 126 * @since 4 127 */ 128 transformOrigin: string; 129 /** 130 * Transformation type applied to an element. 131 * @since 4 132 */ 133 transform: "none" | TransformObject; 134 /** 135 * The value of offset must be within (0.0,1.0] and sorted in ascending order if it is provided. 136 * If there are only two frames, offset can be left empty. 137 * If there are more than two frames, offset is mandatory. 138 * @since 4 139 */ 140 offset?: number; 141} 142 143/** 144 * @syscap SystemCapability.ArkUI.ArkUI.Full 145 * @since 4 146 */ 147export interface TransformObject { 148 /** 149 * Defines a 2D transformation, using a matrix of six values.. 150 * @param scaleX the scale value for x-axis 151 * @param skewX the skew value for y-axis 152 * @param skewY the skew value for x-axis 153 * @param scaleY the scale value for y-axis 154 * @param translateX the translate value for x-axis 155 * @param translateY the translate value for y-axis 156 * @since 6 157 */ 158 matrix(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void; 159 /** 160 * Defines a 3D transformation using a 4x4 matrix of 16 values. 161 * @param n00 the value of the 0 row and 0 column of the 4x4 matrix 162 * @param n01 the value of the 0 row and 1 column of the 4x4 matrix 163 * @param n02 the value of the 0 row and 2 column of the 4x4 matrix 164 * @param n03 the value of the 0 row and 3 column of the 4x4 matrix 165 * @param n10 the value of the 1 row and 0 column of the 4x4 matrix 166 * @param n11 the value of the 1 row and 1 column of the 4x4 matrix 167 * @param n12 the value of the 1 row and 2 column of the 4x4 matrix 168 * @param n13 the value of the 1 row and 3 column of the 4x4 matrix 169 * @param n20 the value of the 2 row and 0 column of the 4x4 matrix 170 * @param n21 the value of the 2 row and 1 column of the 4x4 matrix 171 * @param n22 the value of the 2 row and 2 column of the 4x4 matrix 172 * @param n23 the value of the 2 row and 3 column of the 4x4 matrix 173 * @param n30 the value of the 3 row and 0 column of the 4x4 matrix 174 * @param n31 the value of the 3 row and 1 column of the 4x4 matrix 175 * @param n32 the value of the 3 row and 2 column of the 4x4 matrix 176 * @param n33 the value of the 3 row and 3 column of the 4x4 matrix 177 * @since 6 178 */ 179 matrix3d( 180 n00: number, 181 n01: number, 182 n02: number, 183 n03: number, 184 n10: number, 185 n11: number, 186 n12: number, 187 n13: number, 188 n20: number, 189 n21: number, 190 n22: number, 191 n23: number, 192 n30: number, 193 n31: number, 194 n32: number, 195 n33: number, 196 ): void; 197 /** 198 * Defines 2D transformations for translation of the X and Y axes 199 * @param x the translate value for x-axis 200 * @param y the translate value for y-axis 201 * @since 4 202 */ 203 translate(x: number, y: number): void; 204 /** 205 * Defines 3D transformations for translation of the X / Y / Z axes 206 * @param x the translate value for x-axis 207 * @param y the translate value for y-axis 208 * @param z the translate value for z-axis 209 * @since 6 210 */ 211 translate3d(x: number, y: number, z: number): void; 212 /** 213 * Defines 2D transformations for translation of the X axes 214 * @param x the translate value for x-axis 215 * @since 4 216 */ 217 translateX(x: number): void; 218 /** 219 * Defines 2D transformations for translation of the Y axes 220 * @param y the translate value for y-axis 221 * @since 4 222 */ 223 translateY(y: number): void; 224 /** 225 * Defines 3D transformations for translation of the Z axes 226 * @param z the translate value for z-axis 227 * @since 6 228 */ 229 translateZ(z: number): void; 230 /** 231 * Defines 2D transformations for scaling of the X and Y axes 232 * @param x the scale value for x-axis 233 * @param y the scale value for y-axis 234 * @since 4 235 */ 236 scale(x: number, y: number): void; 237 /** 238 * Defines 3D transformations for scaling of the X / Y / Z axes 239 * @param x the scale value for x-axis 240 * @param y the scale value for y-axis 241 * @param z the scale value for z-axis 242 * @since 6 243 */ 244 scale3d(x: number, y: number, z: number): void; 245 /** 246 * Defines 2D transformations for scaling of the X axes 247 * @param x the scale value for x-axis 248 * @since 4 249 */ 250 scaleX(x: number): void; 251 /** 252 * Defines 2D transformations for scaling of the Y axes 253 * @param y the scale value for y-axis 254 * @since 4 255 */ 256 scaleY(y: number): void; 257 /** 258 * Defines 3D transformations for scaling of the Z axes 259 * @param z the scale value for z-axis 260 * @since 6 261 */ 262 scaleZ(z: number): void; 263 /** 264 * Define the 2D rotation and specify the angle in the parameters. 265 * @param angle the rotate value for z-axis 266 * @since 4 267 */ 268 rotate(angle: number): void; 269 /** 270 * Defines a 3D transformation for rotating the X / Y / Z axes. 271 * @param x the vector value of the x-axis 272 * @param y the vector value of the y-axis 273 * @param z the vector value of the z-axis 274 * @param angle the rotate value for x&y&z vector. 275 * @since 6 276 */ 277 rotate3d(x: number, y: number, z: number, angle: number): void; 278 /** 279 * Defines 3D transformations for rotating of the X axes. 280 * @param x the scale value for x-axis 281 * @since 4 282 */ 283 rotateX(angle: number): void; 284 /** 285 * Defines 3D transformations for rotating of the Y axes. 286 * @param y the scale value for y-axis 287 * @since 4 288 */ 289 rotateY(angle: number): void; 290 /** 291 * Defines 3D transformations for rotating of the Z axes. 292 * @param z the scale value for z-axis 293 * @since 6 294 */ 295 rotateZ(angle: number): void; 296 /** 297 * Defines the 2D skew transition along the X and Y axes. 298 * @param xAngle the angle of inclination along the x axis. 299 * @param yAngle the angle of inclination along the y axis. 300 * @since 6 301 */ 302 skew(xAngle: number, yAngle: number): void; 303 /** 304 * Defines the 2D skew transition along the X axes. 305 * @param angle the angle of inclination along the x axis. 306 * @since 6 307 */ 308 skewX(angle: number): void; 309 /** 310 * Defines the 2D skew transition along the Y axes. 311 * @param angle the angle of inclination along the y axis. 312 * @since 6 313 */ 314 skewY(angle: number): void; 315 /** 316 * Defines a perspective view for the 3D transformation element. 317 * @param n the vertical distance from the observation point to the component plane. 318 * @since 6 319 */ 320 perspective(verticalDistance: number): void; 321} 322 323/** 324 * @syscap SystemCapability.ArkUI.ArkUI.Full 325 * @since 4 326 */ 327export interface AnimateOptions { 328 /** 329 * Duration of the animation, in milliseconds. 330 * The default value is 0. 331 * @since 4 332 */ 333 duration: number; 334 335 /** 336 * Time curve of the animation. For details about the supported types. 337 * linear The animation speed keeps unchanged. 338 * ease The animation starts and ends at a low speed, cubic-bezier(0.25, 0.1, 0.25, 1.0). 339 * ease-in The animation starts at a low speed, cubic-bezier(0.42, 0.0, 1.0, 1.0). 340 * ease-out The animation ends at a low speed, cubic-bezier(0.0, 0.0, 0.58, 1.0). 341 * ease-in-out The animation starts and ends at a low speed, cubic-bezier(0.42, 0.0, 0.58, 1.0). 342 * fast-out-slow-in Standard curve, cubic-bezier(0.4, 0.0, 0.2, 1.0). 343 * linear-out-slow-in Deceleration curve, cubic-bezier(0.0, 0.0, 0.2, 1.0). 344 * fast-out-linear-in Acceleration curve, cubic-bezier(0.4, 0.0, 1.0, 1.0). 345 * friction Damping curve, cubic-bezier(0.2, 0.0, 0.2, 1.0). 346 * extreme-deceleration Extreme deceleration curve, cubic-bezier(0.0, 0.0, 0.0, 1.0). 347 * sharp Sharp curve, cubic-bezier(0.33, 0.0, 0.67, 1.0). 348 * rhythm Rhythm curve, cubic-bezier(0.7, 0.0, 0.2, 1.0). 349 * smooth Smooth curve, cubic-bezier(0.4, 0.0, 0.4, 1.0). 350 * cubic-bezier(x1, y1, x2, y2) You can customize an animation speed curve in the cubic-bezier() function. The x and y values of each input parameter must be between 0 and 1. 351 * 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. 352 * The default value is ease. 353 * @since 4 354 */ 355 easing: string; 356 357 /** 358 * Delay for the animation start. The default value indicates no delay. 359 * The default value is 0. 360 * @since 4 361 */ 362 delay: number; 363 364 /** 365 * Number of times the animation will be played. number indicates a fixed number of playback operations, and Infinity indicates an unlimited number of playback operations. 366 * The default value is 1. 367 * @since 4 368 */ 369 iterations: number | string; 370 371 /** 372 * The animation playback mode. 373 * The default value is "normal". 374 * @since 6 375 */ 376 direction: "normal" | "reverse" | "alternate" | "alternate-reverse"; 377 378 /** 379 * Whether to resume to the initial state after the animation is executed. 380 * none: The initial state is restored after the animation is executed. 381 * forwards: The state at the end of the animation (defined in the last key frame) is retained after the animation is executed. 382 * @since 4 383 */ 384 fill: "none" | "forwards" | "backwards" | "both"; 385} 386 387/** 388 * @syscap SystemCapability.ArkUI.ArkUI.Full 389 * @since 4 390 */ 391export interface AnimationResult { 392 /** 393 * Read-only attribute, which indicates whether the animation playback is complete. 394 * @since 4 395 */ 396 finished: boolean; 397 /** 398 * Read-only attribute, which indicates whether an animation is waiting for the completion of other asynchronous operations (for example, start an animation with a delay). 399 * @since 4 400 */ 401 pending: boolean; 402 /** 403 * Animation running state: 404 * idle: The animation is not running (playback ended or not started). 405 * running: The animation is running. 406 * paused: The animation is paused. 407 * finished: Animation playback ends. 408 * @since 4 409 */ 410 playstate: string; 411 /** 412 * Animation start time. This attribute is similar to that of delay in the options parameters. 413 * @since 4 414 */ 415 startTime: number; 416 /** 417 * Starts the animation. 418 * @since 4 419 */ 420 play(): void; 421 /** 422 * Ends the animation. 423 * @since 4 424 */ 425 finish(): void; 426 /** 427 * Pauses the animation. 428 * @since 4 429 */ 430 pause(): void; 431 /** 432 * Cancels the animation. 433 * @since 4 434 */ 435 cancel(): void; 436 /** 437 * Plays the animation in reverse direction. 438 * @since 4 439 */ 440 reverse(): void; 441 /** 442 * The animation is started. 443 * @since 4 444 */ 445 onstart: () => void; 446 /** 447 * The animation is finished. 448 * @since 4 449 */ 450 onfinish: () => void; 451 /** 452 * The animation is canceled. 453 * @since 4 454 */ 455 oncancel: () => void; 456 /** 457 * The animation is repeated. 458 * @since 4 459 */ 460 onrepeat: () => void; 461} 462 463/** 464 * @syscap SystemCapability.ArkUI.ArkUI.Full 465 * @since 4 466 */ 467export interface Element { 468 /** 469 * Requests or cancels the focus for a component. 470 * If focus is set to true, the focus is requested for the component. 471 * If focus is set to false, the focus is canceled for the component. 472 * This attribute can be defaulted to true. 473 * @param obj { focus: true | false } 474 * @since 4 475 */ 476 focus(obj?: FocusParamObj): void; 477 478 /** 479 * Requests or cancels the crown rotation focus for a component. 480 * If focus is set to true, the crown event focus is requested. 481 * If focus is set to false, the crown event focus is canceled. 482 * This attribute can be defaulted to true. 483 * @param obj { focus: true | false } 484 * @since 4 485 */ 486 rotation(obj?: FocusParamObj): void; 487 488 /** 489 * Creates and runs an animation shortcut on the component. Specify the keyframes and options required for the animation. 490 * @param keyframes keyframes is used to describe key frame parameters of the animation. 491 * @param options Options. is used to describe animation parameters. 492 * @returns This method returns the animation object. 493 * @since 4 494 */ 495 animate(keyframes: Array<AnimateStyle>, options: AnimateOptions): AnimationResult; 496 497 /** 498 * Obtains the size and position of the element. 499 * @returns RectObj the size position of the element. 500 * @since 6 501 */ 502 getBoundingClientRect(): RectObj; 503 504 /** 505 * Obtains attributes of the element. 506 * @returns attributes of the element in json string. 507 * @since 8 508 * @systemapi 509 */ 510 getInspector(): string; 511 512 /** 513 * If 0.5 is returned, 50% of the current component is visible. 514 * @param radios Scope of Monitoring components. 515 * @since 6 516 */ 517 createIntersectionObserver(param: { ratios: Array<number> }): observer; 518 519 /** 520 * Adds a node to the end of the child node list of the current node. 521 * @param child Subnode object to be added 522 * @since 8 523 */ 524 addChild(child: Element): void; 525 526 /** 527 * 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. 528 * @param name attribute name 529 * @param value attribute value¡¢ 530 * @since 8 531 */ 532 setAttribute(name: string, value: string): void; 533 534 /** 535 * 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. 536 * @param name style name 537 * @param value style value 538 * @returns If the setting is successful, true is returned. If the setting fails, false is returned. 539 * @since 8 540 */ 541 setStyle(name: string, value: string): boolean; 542} 543 544/** 545 * Defines the observer interface. 546 * @syscap SystemCapability.ArkUI.ArkUI.Full 547 * @since 6 548 */ 549export interface observer { 550 /** 551 * Turn on the listener. 552 * @since 6 553 */ 554 observe(callback: string): void; 555 556 /** 557 * Turn off the listenerr. 558 * @since 6 559 */ 560 unobserve(): void; 561} 562 563/** 564 * animation element 565 * @syscap SystemCapability.ArkUI.ArkUI.Full 566 * @since 4 567 */ 568export interface AnimationElement extends Element { 569 /** 570 * Starts the animation. 571 * @since 4 572 */ 573 play(): void; 574 /** 575 * Ends the animation. 576 * @since 4 577 */ 578 finish(): void; 579 /** 580 * Pauses the animation. 581 * @since 4 582 */ 583 pause(): void; 584 /** 585 * Cancels the animation. 586 * @since 4 587 */ 588 cancel(): void; 589 /** 590 * Plays the animation in reverse direction. 591 * @since 4 592 */ 593 reverse(): void; 594} 595 596/** 597 * @syscap SystemCapability.ArkUI.ArkUI.Full 598 * @since 4 599 */ 600export interface ScrollParam { 601 /** 602 * Offset for scrolling in the horizontal direction, in px. 603 * @since 4 604 */ 605 dx?: number; 606 607 /** 608 * Offset for scrolling in the vertical direction, in px. 609 * @since 4 610 */ 611 dy?: number; 612 613 /** 614 * Whether a sliding animation is displayed when scroll position is changed. 615 * @since 4 616 */ 617 smooth?: boolean; 618} 619 620/** 621 * @syscap SystemCapability.ArkUI.ArkUI.Full 622 * @since 4 623 */ 624export interface CurrentOffsetResultValue { 625 /** 626 * Scrolling offset in the x-axis, in px. 627 * @since 4 628 */ 629 x: number; 630 631 /** 632 * Scrolling offset in the y-axis, in px. 633 * @since 4 634 */ 635 y: number; 636} 637 638/** 639 * @syscap SystemCapability.ArkUI.ArkUI.Full 640 * @since 4 641 */ 642export interface ListScrollToOptions { 643 /** 644 * specified position. 645 * @since 4 646 */ 647 index: number; 648} 649 650/** 651 * The <list> component provides a list container. 652 * @syscap SystemCapability.ArkUI.ArkUI.Full 653 */ 654export interface ListElement extends Element { 655 /** 656 * Scrolls the list to the position of the item at the specified index. 657 * @since 4 658 */ 659 scrollTo(position: ListScrollToOptions): void; 660 661 /** 662 * Scrolls the list for a certain distance. 663 * This method applies only to smart TVs. 664 * @since 4 665 */ 666 scrollBy(data: ScrollParam): void; 667 668 /** 669 * If smooth is set to false (default value), the list is directly scrolled to the top. 670 * If smooth is set to true, the list is smoothly scrolled to the top. 671 * @param param 672 * @since 4 673 */ 674 scrollTop(param: { smooth: boolean }): void; 675 676 /** 677 * If smooth is set to false (default value), the list is directly scrolled to the bottom. 678 * If smooth is set to true, the list is smoothly scrolled to the bottom. 679 * @param param 680 * @since 4 681 */ 682 scrollBottom(param: { smooth: boolean }): void; 683 684 /** 685 * 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. 686 * If reverse is set to true, the previous page is displayed. If there is no previous page, the list scrolls to the top. 687 * If smooth is set to false (default value), the list is directly scrolled to another page. 688 * If smooth is set to true, the list is smoothly scrolled to another page. 689 * @param params 690 * @since 4 691 */ 692 scrollPage(params: { reverse: boolean; smooth: boolean }): void; 693 694 /** 695 * 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. 696 * 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. 697 * If smooth is set to false (default value), the list is directly scrolled. 698 * If smooth is set to true, the list is smoothly scrolled. 699 * @param params 700 * @since 4 701 */ 702 scrollArrow(params: { reverse: boolean; smooth: boolean }): void; 703 704 /** 705 * Collapses a group. 706 * @param param 707 * @since 4 708 */ 709 collapseGroup(param: { 710 /** 711 * groupid: ID of the group to collapse. 712 * All groups are collapsed when groupid is not specified. 713 */ 714 groupid: string; 715 }): void; 716 717 /** 718 * Expands a group. 719 * @param param 720 * @since 4 721 */ 722 expandGroup(param: { 723 /** 724 * groupid: ID of the group to expand. 725 * All groups are expanded when groupid is not specified. 726 */ 727 groupid: string; 728 }): void; 729 730 /** 731 * Returns the offset of the current scrolling. The return value type is Object. 732 * @since 4 733 */ 734 currentOffset(): CurrentOffsetResultValue; 735} 736 737/** 738 * The <swiper> component provides a swiper container. 739 * @syscap SystemCapability.ArkUI.ArkUI.Full 740 * @since 4 741 */ 742export interface SwiperElement extends Element { 743 /** 744 * Scrolls the child component to the position at the specified index. 745 * @since 4 746 */ 747 swipeTo(position: { 748 /** 749 * specified position. 750 */ 751 index: number; 752 }): void; 753 754 /** 755 * Shows the next child component. 756 * @since 4 757 */ 758 showNext(): void; 759 760 /** 761 * Shows the previous child component. 762 * @since 4 763 */ 764 showPrevious(): void; 765} 766 767/** 768 * @since 6 769 * @syscap SystemCapability.ArkUI.ArkUI.Full 770 */ 771export interface CameraTakePhotoOptions { 772 /** 773 * Picture quality. 774 * @since 6 775 */ 776 quality: "high" | "normal" | "low"; 777 778 /** 779 * Callback function for successful interface invocation. 780 * @param result the request execution result. 781 * @since 6 782 */ 783 success?: (result: Object) => void; 784 785 /** 786 * Callback function for interface invocation failure. 787 * @param result the request execution result. 788 * @since 6 789 */ 790 fail?: (result: Object) => void; 791 792 /** 793 * Callback function at the end of the interface invoking (executed both successfully and unsuccessfully). 794 * @param result the request execution result. 795 * @since 6 796 */ 797 complete?: (result: Object) => void; 798} 799 800/** 801 * The <camera> component provides preview and photographing functions. 802 * @syscap SystemCapability.ArkUI.ArkUI.Full 803 * @since 6 804 */ 805export interface CameraElement extends Element { 806 /** 807 * Take photos with specified parameters. 808 * @param options the parameters of camera. 809 * @since 6 810 */ 811 takePhoto(options: CameraTakePhotoOptions): void; 812} 813 814/** 815 * The <web> component is a container for displaying web page content. 816 * @syscap SystemCapability.ArkUI.ArkUI.Full 817 * @since 6 818 */ 819export interface WebElement extends Element { 820 /** 821 * Reload the web page content 822 * @since 6 823 */ 824 reload(): void; 825} 826 827/** 828 * The <dialog> component is a custom pop-up container. 829 * @syscap SystemCapability.ArkUI.ArkUI.Full 830 * @since 4 831 */ 832export interface DialogElement extends Element { 833 /** 834 * Shows a dialog box. 835 * @since 4 836 */ 837 show(): void; 838 /** 839 * Closes a dialog box. 840 * @since 4 841 */ 842 close(): void; 843} 844 845/** 846 * The <image-animator> component is used to provide an image frame animator. 847 * @syscap SystemCapability.ArkUI.ArkUI.Full 848 * @since 4 849 */ 850export interface ImageAnimatorElement extends Element { 851 /** 852 * Starts to play the frame animation of an image. If this method is called again, the playback starts from the first frame. 853 * @since 4 854 */ 855 start(): void; 856 /** 857 * Pauses the frame animation playback of an image. 858 * @since 4 859 */ 860 pause(): void; 861 /** 862 * Stops the frame animation playback of an image. 863 * @since 4 864 */ 865 stop(): void; 866 /** 867 * Resumes the frame animation playback of an image. 868 * @since 4 869 */ 870 resume(): void; 871 /** 872 * Obtains the playback state. Available values are as follows: 873 * Playing 874 * Paused 875 * Stopped 876 * @since 4 877 */ 878 getState(): "Playing" | "Paused" | "Stopped"; 879} 880 881/** 882 * The <marquee> component inserts scrolling text, which is displayed in a single line by default. 883 * When the text length exceeds the display area of the component, the marquee effect is displayed. 884 * @syscap SystemCapability.ArkUI.ArkUI.Full 885 * @since 4 886 */ 887export interface MarqueeElement extends Element { 888 /** 889 * Starts scrolling. 890 * @since 4 891 */ 892 start(): void; 893 894 /** 895 * Stops scrolling. 896 * @since 4 897 */ 898 stop(): void; 899} 900 901/** 902 * The <menu> component provides menus as temporary pop-up windows to display operations that can be performed by users. 903 * @syscap SystemCapability.ArkUI.ArkUI.Full 904 * @since 4 905 */ 906export interface MenuElement extends Element { 907 /** 908 * Displays the menu. 909 * x and y specify the position of the displayed menu. 910 * x indicates the X-axis coordinate from the left edge of the visible area, and does not include any scrolling offset. 911 * 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. 912 * The menu is preferentially displayed in the lower right corner. 913 * When the visible space on the right is insufficient, the menu is moved leftward. 914 * When the visible space in the lower part is insufficient, the menu is moved upward. 915 * @param position 916 * @since 4 917 */ 918 show(position: { x: number; y: number }): void; 919} 920 921/** 922 * The <chart> component displays line charts, gauge charts, and bar charts. 923 * @syscap SystemCapability.ArkUI.ArkUI.Full 924 * @since 4 925 */ 926export interface ChartElement extends Element { 927 /** 928 * Data is dynamically added to an existing data sequence. 929 * The target sequence is specified based on serial, which is the subscript of the datasets array and starts from 0. 930 * datasets[index].data is not updated. Only line charts support this attribute. 931 * The value is incremented by 1 based on the horizontal coordinate and is related to the xAxis min/max setting. 932 * @since 4 933 */ 934 append(params: { 935 /** 936 * Set the data subscript of the line chart to be updated. 937 */ 938 serial: number; 939 /** 940 * Set the new data. 941 */ 942 data: Array<number>; 943 }): void; 944} 945 946/** 947 * The <input> component provides an interactive interface to receive user input, which is displayed in a single line by default. 948 * @syscap SystemCapability.ArkUI.ArkUI.Full 949 * @since 4 950 */ 951export interface InputElement extends Element { 952 /** 953 * Obtains or loses the focus of a component. 954 * When the component type is set to text, email, date, time, number, or password, the input method can be displayed or collapsed. 955 * @param param If focus is not passed, the default value true is used. 956 * @since 4 957 */ 958 focus(param: { focus: boolean }): void; 959 960 /** 961 * Displays the error message. 962 * This attribute is available when the component type is set to text, email, date, time, number, or password. 963 * @param param 964 * @since 4 965 */ 966 showError(param: { error: string }): void; 967 968 /** 969 * Deletes the previous character at the cursor position. 970 * @since 6 971 */ 972 delete(): void; 973} 974 975/** 976 * The <button> component includes capsule, circle, text, arc, and download buttons. 977 * @syscap SystemCapability.ArkUI.ArkUI.Full 978 * @since 4 979 */ 980export interface ButtonElement extends Element { 981 /** 982 * Progress bar of the download button. 983 * The value ranges from 0 to 100. The progress bar is displayed if the value is greater than 0. 984 * If the value is greater than or equal to 100, the progress bar is not displayed. 985 * NOTE 986 * The text displayed on the progress bar is changed based on the value. 987 * @param param 988 * @since 4 989 */ 990 setProgress(param: { progress: number }): void; 991} 992 993/** 994 * The <textarea> component provides an interactive interface to receive user input, which is displayed in multiple lines by default. 995 * @syscap SystemCapability.ArkUI.ArkUI.Full 996 * @since 4 997 */ 998export interface TextAreaElement extends Element { 999 /** 1000 * Obtains or loses the focus of a component, which can display or collapse the input method. 1001 * @param param If focus is not passed, the default value true is used. 1002 * @since 4 1003 */ 1004 focus(param: { focus: boolean }): void; 1005} 1006 1007/** 1008 * The <picker> component supports common, date, time, and multi-column text selectors. 1009 * @syscap SystemCapability.ArkUI.ArkUI.Full 1010 * @since 4 1011 */ 1012export interface PickerElement extends Element { 1013 /** 1014 * Displays the picker. 1015 * @since 4 1016 */ 1017 show(): void; 1018} 1019 1020/** 1021 * The <video> component provides a video player. 1022 * @syscap SystemCapability.ArkUI.ArkUI.Full 1023 * @since 4 1024 */ 1025export interface VideoElement extends Element { 1026 /** 1027 * Requests to start playing a video. 1028 * @since 4 1029 */ 1030 start(): void; 1031 1032 /** 1033 * Requests to pause a video. 1034 * @since 4 1035 */ 1036 pause(): void; 1037 1038 /** 1039 * Specifies the video playing position. 1040 * @param param 1041 * @since 4 1042 */ 1043 setCurrentTime(param: { currenttime: number }): void; 1044 1045 /** 1046 * Requests to enter the full screen mode. 1047 * @param param 1048 * @since 4 1049 */ 1050 requestFullscreen(param: { screenOrientation: "default" }): void; 1051 1052 /** 1053 * Requests to exit the full screen mode. 1054 * @since 4 1055 */ 1056 exitFullscreen(): void; 1057 1058 /** 1059 * Requests to stop playing a video. 1060 * @since 6 1061 */ 1062 stop(): void; 1063} 1064 1065/** 1066 * @syscap SystemCapability.ArkUI.ArkUI.Full 1067 * @since 4 1068 */ 1069export interface TextMetrics { 1070 /** 1071 * @since 4 1072 */ 1073 width: number; 1074 /** 1075 * @since 8 1076 */ 1077 height: number; 1078} 1079 1080/** 1081 * Provides a 2D rendering context for the drawing surface of the < Canvas > element. 1082 * It is used to draw shapes, text, images and other objects. 1083 * @syscap SystemCapability.ArkUI.ArkUI.Full 1084 * @since 7 1085 */ 1086export interface OffscreenCanvasRenderingContext2D { 1087 /** 1088 * Gets the dotted spacing of a line. 1089 * Returns the current line segment style array containing an even number of non-negative numbers. 1090 * @since 7 1091 */ 1092 getLineDash: Array<number>; 1093 1094 /** 1095 * Fill style attribute. 1096 * Paint color used to fill the area. 1097 * Canvas gradient object used by the paint. You can call createLinearGradient() to create a CanvasGradient object. 1098 * Canvas pattern. You can call createPattern() to create a CanvasPattern object. 1099 * @since 7 1100 */ 1101 fillStyle?: string | CanvasGradient | CanvasPattern; 1102 1103 /** 1104 * Sets the stroke paint style. 1105 * Color of the stroke paint. 1106 * Canvas gradient object used by the paint. You can call createLinearGradient() to create a CanvasGradient object. 1107 * Canvas pattern. You can call createPattern() to create a CanvasPattern object. 1108 * @since 7 1109 */ 1110 strokeStyle?: string | CanvasGradient | CanvasPattern; 1111 1112 /** 1113 * Sets the dotted spacing of a line. 1114 * @param segments A set of numbers describing the length of alternating drawn line segments and spacing (coordinate space units). 1115 * @since 7 1116 */ 1117 setLineDash(segments: Array<number>): void; 1118 1119 /** 1120 * Draw an Image object. 1121 * @param image An element drawn to the context. 1122 * @param dx The top left corner of the image is the X-axis coordinates on the target canvas. 1123 * @param dy The top left corner of the image is the Y-axis coordinates on the target canvas. 1124 * @param dw Image The width drawn on the target canvas. 1125 * @param dh Image The height drawn on the target canvas. 1126 * @since 7 1127 */ 1128 drawImage(image: Image, dx: number, dy: number, dw: number, dh: number): void; 1129 1130 /** 1131 * Draw an Image object. 1132 * @param image An element drawn to the context. 1133 * @param dx The top left corner of the image is the X-axis coordinates on the target canvas. 1134 * @param dy The top left corner of the image is the Y-axis coordinates on the target canvas. 1135 * @param dw Image The width drawn on the target canvas. 1136 * @param dh Image The height drawn on the target canvas. 1137 * @param sx The upper-left X-axis coordinates of the image's rectangular (clipped) selection box that need to be drawn into the target context. 1138 * @param sy The upper-left Y-axis coordinates of the image's rectangular (clipped) selection box that need to be drawn into the target context. 1139 * @param sw The width of the image's rectangular (clipped) selection box that needs to be drawn into the target context. 1140 * @param sh The height of the image's rectangular (clipped) selection box that needs to be drawn into the target context. 1141 * @since 7 1142 */ 1143 drawImage( 1144 image: Image, 1145 sx: number, 1146 sy: number, 1147 sw: number, 1148 sh: number, 1149 dx: number, 1150 dy: number, 1151 dw: number, 1152 dh: number, 1153 ): void; 1154 1155 /** 1156 * Creates a drawing path. 1157 * @since 7 1158 */ 1159 beginPath(): void; 1160 1161 /** 1162 * Crop the current canvas. 1163 * @since 7 1164 */ 1165 clip(): void; 1166 1167 /** 1168 * Fills the current canvas with color. 1169 * @since 7 1170 */ 1171 fill(): void; 1172 1173 /** 1174 * Check whether the specified coordinate point is on the Path. 1175 * @param x The X coordinate of the detection point. 1176 * @param y The Y coordinate of the detection point. 1177 * @returns boolean Return true if the detection point is contained within the current or specified path Otherwise return false. 1178 * @since 7 1179 */ 1180 isPointInPath(x: number, y: number): boolean; 1181 1182 /** 1183 * Check whether the specified coordinate point is on the Path. 1184 * @param path The Path2D path that needs to be populated. 1185 * @param x The X coordinate of the detection point. 1186 * @param y The Y coordinate of the detection point. 1187 * @param fillRule This algorithm determines whether a point is in or out of the path. 1188 * @returns boolean Return true if the detection point is contained within the current or specified path Otherwise return false. 1189 * @since 7 1190 */ 1191 isPointInPath(path: Path2D, x: number, y: number): boolean; 1192 1193 /** 1194 * Checks whether the specified coordinate point is on the stroke edge. 1195 * @param x The X coordinate of the detection point. 1196 * @param y The Y coordinate of the detection point. 1197 * @returns boolean A Boolean value that returns true when the point is on the line of the path, false otherwise. 1198 * @since 7 1199 */ 1200 isPointInStroke(x: number, y: number): boolean; 1201 1202 /** 1203 * Checks whether the specified coordinate point is on the stroke edge. 1204 * @param path Path2D path. 1205 * @param x The X coordinate of the detection point. 1206 * @param y The Y coordinate of the detection point. 1207 * @returns boolean A Boolean value that returns true when the point is on the line of the path, false otherwise. 1208 * @since 7 1209 */ 1210 isPointInStroke(path: Path2D, x: number, y: number): boolean; 1211 1212 /** 1213 * Stroke draws the current path. 1214 * @since 7 1215 */ 1216 stroke(): void; 1217 1218 /** 1219 * Stroke draws the current path. 1220 * @param path The object of Path2D. 1221 * @since 7 1222 */ 1223 stroke(path: Path2D): void; 1224 1225 /** 1226 * Create a radial tween object. 1227 * @param x0 The x coordinate of the circle at the beginning. 1228 * @param y0 The y coordinate of the circle at the beginning. 1229 * @param r0 The radius of the starting circle. 1230 * @param x1 X-coordinate of the end point. 1231 * @param y1 Y-coordinate of the end point. 1232 * @param r1 The radius of End Circle. 1233 * @returns RadialGradient object. 1234 * @since 7 1235 */ 1236 createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient; 1237 1238 /** 1239 * Create a drawing style template. 1240 * @param image The CanvasImageSource object that is the source of the duplicate image. 1241 * @param repetition Specify how to repeat images. 1242 * @returns CanvasPattern An opaque object that describes a schema. 1243 * @since 7 1244 */ 1245 createPattern(image: Image, repetition: string): CanvasPattern; 1246 1247 /** 1248 * Creates a linear gradient color. 1249 * @param x0 X-coordinate of the start point. 1250 * @param y0 Y-coordinate of the start point. 1251 * @param x1 X-coordinate of the end point. 1252 * @param y1 Y-coordinate of the end point. 1253 * @returns LinearGradient object. 1254 * @since 7 1255 */ 1256 createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient; 1257 1258 /** 1259 * Create an ImageData object. 1260 * @param sw The width of the new object. 1261 * @param sh The height of the new object. 1262 * @returns ImageData New ImageData object with width and height specified. 1263 * @since 7 1264 */ 1265 createImageData(sw: number, sh: number): ImageData; 1266 1267 /** 1268 * Create an ImageData object. 1269 * @param imagedata Copy an object of the same width and height from an existing ImageData object The image itself is not allowed to be copied. 1270 * @returns ImageData New ImageData object with width and height specified. 1271 * @since 7 1272 */ 1273 createImageData(imagedata: ImageData): ImageData; 1274 1275 /** 1276 * Creates a path that is later used by the CanvasRenderingContext2D object. 1277 * @param path another created Path2D object. 1278 * @returns the object of Path2D. 1279 * @since 7 1280 */ 1281 createPath2D(path?: Path2D): Path2D; 1282 1283 /** 1284 * Creates a path that is later used by the CanvasRenderingContext2D object. 1285 * @param cmds a string defined using the SVG path command. 1286 * @returns the object of Path2D. 1287 * @since 7 1288 */ 1289 createPath2D(cmds?: string): Path2D; 1290 1291 /** 1292 * Get an ImageData object. 1293 * @param sx The upper-left x-coordinate of the rectangular area of the image data to be extracted. 1294 * @param sy The upper-left y coordinate of the rectangular region of the image data to be extracted. 1295 * @param sw The width of the rectangular area of the image data to be extracted. 1296 * @param sh The height of the rectangular area of the image data to be extracted. 1297 * @returns ImageData An ImageData object that contains the rectangular ImageData given by the canvas. 1298 * @since 7 1299 */ 1300 getImageData(sx: number, sy: number, sw: number, sh: number): ImageData; 1301 1302 /** 1303 * Draws the specified ImageData object to the canvas. 1304 * @param imagedata An array object containing pixel values. 1305 * @param dx The offset of the position of the source image data in the target canvas (the offset in the X-axis direction). 1306 * @param dy The offset of the position of the source image data in the target canvas (the Y-axis offset). 1307 * @since 7 1308 */ 1309 putImageData(imagedata: ImageData, dx: number, dy: number): void; 1310 1311 /** 1312 * Draws the specified ImageData object to the canvas. 1313 * @param imagedata An array object containing pixel values. 1314 * @param dx The offset of the position of the source image data in the target canvas (the offset in the X-axis direction). 1315 * @param dy The offset of the position of the source image data in the target canvas (the Y-axis offset). 1316 * @param dirtyX In the source image data, the position of the upper left corner of the rectangular region Default is the upper left corner of the entire image data (x coordinate). 1317 * @param dirtyY In the source image data, the position of the upper left corner of the rectangular region Default is the top left corner (y coordinate) of the entire image data. 1318 * @param dirtyWidth In the source image data, the width of a rectangular region. Default is the width of the image data. 1319 * @param dirtyHeight In the source image data, the height of a rectangular region. Default is the height of the image data. 1320 * @since 7 1321 */ 1322 putImageData( 1323 imagedata: ImageData, 1324 dx: number, 1325 dy: number, 1326 dirtyX: number, 1327 dirtyY: number, 1328 dirtyWidth: number, 1329 dirtyHeight: number, 1330 ): void; 1331 1332 /** 1333 * Draw an arc. 1334 * @param radius Radius of an arc. 1335 * @param x The X-axis coordinates of the center of the circle. 1336 * @param y The Y-axis coordinates of the center of an arc (center of a circle). 1337 * @param startAngle The starting point of the arc, in the X-axis direction, is calculated in radians. 1338 * @param endAngle The end point of an arc, expressed in radians. 1339 * @param anticlockwise An optional Boolean value. If true, the arc is drawn counterclockwise, and otherwise clockwise. 1340 * @since 7 1341 */ 1342 arc(radius: number, x: number, y: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void; 1343 1344 /** 1345 * Draws an arc from the beginning to the end. 1346 * @param radius Radius of an arc. 1347 * @param x1 The X-axis coordinates of the first control point. 1348 * @param y1 The y-coordinate of the first control point. 1349 * @param x2 The X-axis coordinates of the second control point. 1350 * @param y2 The Y-axis coordinates of the second control point. 1351 * @since 7 1352 */ 1353 arcTo(x1: number, x2: number, y1: number, y2: number, radius: number): void; 1354 1355 /** 1356 * Draw a third order Bezier curve. 1357 * @param cp1x The X-axis coordinates of the first control point. 1358 * @param cp1y The y-coordinate of the first control point. 1359 * @param cp2x The X-axis coordinates of the second control point. 1360 * @param cp2y The Y-axis coordinates of the second control point. 1361 * @param x The x-coordinate of the end point. 1362 * @param y The y-coordinate of the end point 1363 * @since 7 1364 */ 1365 bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void; 1366 1367 /** 1368 * Closing the current path. 1369 * @since 7 1370 */ 1371 closePath(): void; 1372 1373 /** 1374 * Draw a straight line. 1375 * @param x The X-axis coordinates at the end of the line. 1376 * @param y The Y-axis coordinates at the end of the line. 1377 * @since 7 1378 */ 1379 lineTo(x: number, y: number): void; 1380 1381 /** 1382 * Draw an ellipse. 1383 * @param x The X-axis coordinates of the center of the ellipse. 1384 * @param y The Y-axis coordinates of the center of the ellipse. 1385 * @param radiusX The radius of the major axis of an ellipse. 1386 * @param radiusY The radius of the short axis of an ellipse. 1387 * @param rotation The Angle of rotation of an ellipse, expressed in radians. 1388 * @param startAngle The starting point Angle to be plotted, measured from the X-axis, is expressed in radians. 1389 * @param endAngle The Angle, expressed in radians, at which the ellipse will be drawn. 1390 * @param anticlockwise If true, the ellipse is drawn counterclockwise (counterclockwise) and clockwise otherwise. 1391 * @since 7 1392 */ 1393 ellipse( 1394 x: number, 1395 y: number, 1396 radiusX: number, 1397 radiusY: number, 1398 rotation: number, 1399 startAngle: number, 1400 endAngle: number, 1401 anticlockwise?: boolean, 1402 ): void; 1403 1404 /** 1405 * Moves the current canvas to the specified coordinate point. 1406 * @param x The x axis. 1407 * @param y The y axis. 1408 * @since 7 1409 */ 1410 moveTo(x: number, y: number): void; 1411 1412 /** 1413 * Draw a second order Bezier curve. 1414 * @param x The X-axis of the end point. 1415 * @param y The Y-axis of the end point. 1416 * @param cpx The X-axis coordinates of the control points. 1417 * @param cpy The y-coordinate of the control point. 1418 * @since 7 1419 */ 1420 quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void; 1421 1422 /** 1423 * Draw a rectangle. 1424 * @param x The X-axis coordinates at the beginning of the rectangle. 1425 * @param y The Y-axis coordinates at the beginning of the rectangle. 1426 * @param w The width of a rectangle. 1427 * @param h The height of a rectangle. 1428 * @since 7 1429 */ 1430 rect(x: number, y: number, w: number, h: number): void; 1431 1432 /** 1433 * Clears the contents of the specified rectangular area. 1434 * @param x The X-axis coordinates at the beginning of the rectangle. 1435 * @param y The Y-axis coordinates at the beginning of the rectangle. 1436 * @param w The width of a rectangle. 1437 * @param h The height of a rectangle. 1438 * @since 7 1439 */ 1440 clearRect(x: number, y: number, w: number, h: number): void; 1441 1442 /** 1443 * Fills a rectangular area. 1444 * @param x The X-axis coordinates at the beginning of the rectangle. 1445 * @param y The Y-axis coordinates at the beginning of the rectangle. 1446 * @param w The width of a rectangle. 1447 * @param h The height of a rectangle. 1448 * @since 7 1449 */ 1450 fillRect(x: number, y: number, w: number, h: number): void; 1451 1452 /** 1453 * Stroke a rectangular area. 1454 * @param x The X-axis coordinates at the beginning of the rectangle. 1455 * @param y The Y-axis coordinates at the beginning of the rectangle. 1456 * @param w The width of the rectangle. Positive values on the right, negative values on the left. 1457 * @param h The height of the rectangle. Positive values are down, negative values are up. 1458 * @since 7 1459 */ 1460 strokeRect(x: number, y: number, w: number, h: number): void; 1461 1462 /** 1463 * Stroke a rectangular area. 1464 * @param text Render text using the current values of font, textAlign, textBaseline, and direction. 1465 * @param y The Y-axis coordinates of the starting point of the text. 1466 * @param x The X-axis coordinates of the starting point of the text. 1467 * @param maxWidth Maximum width to draw. 1468 * @since 7 1469 */ 1470 fillText(text: string, y: number, x: number /*, maxWidth?: number*/): void; 1471 1472 /** 1473 * Returns a TextMetrics object used to obtain the width of specified text. 1474 * @param text Text to be measured. 1475 * @returns Object that contains the text width. You can obtain the width by TextMetrics.width. 1476 * @since 7 1477 */ 1478 measureText(text: string): TextMetrics; 1479 1480 /** 1481 * Draws the stroke of a text string. 1482 * @param text Text stroke to draw. 1483 * @param x X-coordinate of the lower left corner of the text stroke. 1484 * @param y Y-coordinate of the lower left corner of the text stroke. 1485 * @param maxWidth Maximum width to draw. 1486 * @since 7 1487 */ 1488 strokeText(text: string, x: number, y: number /*, maxWidth?: number*/): void; 1489 1490 /** 1491 * Resets the current matrix transformation effect. 1492 * @since 7 1493 */ 1494 resetTransform(): void; 1495 1496 /** 1497 * Adds a rotation effect to the current canvas. 1498 * @param angle The radian of clockwise rotation. 1499 * @since 7 1500 */ 1501 rotate(angle: number): void; 1502 1503 /** 1504 * Adds a zoom effect to the current canvas. 1505 * @param x The horizontal scaling factor. 1506 * @param y The scaling factor in the vertical direction. 1507 * @since 7 1508 */ 1509 scale(x: number, y: number): void; 1510 1511 /** 1512 * Set the rotation, pan, and zoom effects. 1513 * @param a The level of zoom. 1514 * @param b Vertical tilt. 1515 * @param c Horizontal tilt. 1516 * @param d Vertical scaling. 1517 * @param e The level of mobile. 1518 * @param f Vertical movement. 1519 * @since 7 1520 */ 1521 setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void; 1522 1523 /** 1524 * Set the rotation, pan, and zoom effects. 1525 * @param a The level of zoom. 1526 * @param b Vertical tilt. 1527 * @param c Horizontal tilt. 1528 * @param d Vertical scaling. 1529 * @param e The level of mobile. 1530 * @param f Vertical movement. 1531 * @since 7 1532 */ 1533 transform(a: number, b: number, c: number, d: number, e: number, f: number): void; 1534 1535 /** 1536 * Adds a pan effect to the current canvas. 1537 * @param x Horizontal movement distance. 1538 * @param y Vertical movement. 1539 * @since 7 1540 */ 1541 translate(x: number, y: number): void; 1542 1543 /** 1544 * Restores the configuration information of the last saved canvas context. 1545 * @since 7 1546 */ 1547 restore(): void; 1548 1549 /** 1550 * Saves configuration information for the current canvas context. 1551 * @since 7 1552 */ 1553 save(): void; 1554} 1555 1556/** 1557 * CanvasRenderingContext2D allows you to draw rectangles, text, images, and other objects on a canvas. 1558 * You can call getContext('2d') on canvas to obtain a CanvasRenderingContext2D object. 1559 * @syscap SystemCapability.ArkUI.ArkUI.Full 1560 * @since 4 1561 */ 1562export interface CanvasRenderingContext2D { 1563 /** 1564 * Fills a rectangle on the canvas. 1565 * @param x X-coordinate of the upper left corner of the rectangle. 1566 * @param y Y-coordinate of the upper left corner of the rectangle. 1567 * @param width Width of the rectangle. 1568 * @param height Height of the rectangle. 1569 * @since 4 1570 */ 1571 fillRect(x: number, y: number, width: number, height: number): void; 1572 1573 /** 1574 * Sets the style of a paint to fill an area. 1575 * Paint color used to fill the area. 1576 * Canvas gradient object used by the paint. You can call createLinearGradient() to create a CanvasGradient object. 1577 * Canvas pattern. You can call createPattern() to create a CanvasPattern object. 1578 * @since 4 1579 */ 1580 fillStyle?: string | CanvasGradient | CanvasPattern; 1581 1582 /** 1583 * Clears the content in a rectangle on the canvas. 1584 * @param x X-coordinate of the upper left corner of the rectangle. 1585 * @param y Y-coordinate of the upper left corner of the rectangle. 1586 * @param width Width of the rectangle. 1587 * @param height Height of the rectangle. 1588 * @since 4 1589 */ 1590 clearRect(x: number, y: number, width: number, height: number): void; 1591 1592 /** 1593 * Draws a rectangle stroke on the canvas. 1594 * @param x X-coordinate of the upper left corner of the rectangle stroke. 1595 * @param y Y-coordinate of the upper left corner of the rectangle stroke. 1596 * @param width Width of the rectangle stroke. 1597 * @param height Height of the rectangle stroke. 1598 * @since 4 1599 */ 1600 strokeRect(x: number, y: number, width: number, height: number): void; 1601 1602 /** 1603 * Draws filled text on the canvas. 1604 * @param text Text to draw. 1605 * @param x X-coordinate of the lower left corner of the text. 1606 * @param y Y-coordinate of the lower left corner of the text. 1607 * @since 4 1608 */ 1609 fillText(text: string, x: number, y: number): void; 1610 1611 /** 1612 * Draws a text stroke on the canvas. 1613 * @param text Text stroke to draw. 1614 * @param x X-coordinate of the lower left corner of the text stroke. 1615 * @param y Y-coordinate of the lower left corner of the text stroke. 1616 * @since 4 1617 */ 1618 strokeText(text: string, x: number, y: number): void; 1619 1620 /** 1621 * Returns a TextMetrics object used to obtain the width of specified text. 1622 * @param text Text to be measured. 1623 * @returns Object that contains the text width. You can obtain the width by TextMetrics.width. 1624 * @since 4 1625 */ 1626 measureText(text: string): TextMetrics; 1627 1628 /** 1629 * Sets the width of a line. 1630 * @since 4 1631 */ 1632 lineWidth?: number; 1633 1634 /** 1635 * Sets the stroke paint style. 1636 * Color of the stroke paint. 1637 * Canvas gradient object used by the paint. You can call createLinearGradient() to create a CanvasGradient object. 1638 * Canvas pattern. You can call createPattern() to create a CanvasPattern object. 1639 * @since 4 1640 */ 1641 strokeStyle?: string | CanvasGradient | CanvasPattern; 1642 1643 /** 1644 * Draws a border stroke. 1645 * @since 4 1646 */ 1647 stroke(): void; 1648 1649 /** 1650 * Draws a path stroke. 1651 * @param path The object of Path2D. 1652 * @since 4 1653 */ 1654 stroke(path: Path2D): void; 1655 1656 /** 1657 * Creates a drawing path. 1658 * @since 4 1659 */ 1660 beginPath(): void; 1661 1662 /** 1663 * Moves a drawing path to a target position on the canvas. 1664 * @param x X-coordinate of the target position. 1665 * @param y Y-coordinate of the target position. 1666 * @since 4 1667 */ 1668 moveTo(x: number, y: number): void; 1669 1670 /** 1671 * Connects the current point to a target position using a straight line. 1672 * @param x X-coordinate of the target position. 1673 * @param y Y-coordinate of the target position. 1674 * @since 4 1675 */ 1676 lineTo(x: number, y: number): void; 1677 1678 /** 1679 * Draws a closed path. 1680 * @since 4 1681 */ 1682 closePath(): void; 1683 1684 /** 1685 * Sets the style of line endpoints. 1686 * Style of line endpoints. Available values include: 1687 * butt (default): The endpoints of the line are in square. 1688 * round: The endpoints of the line are rounded. 1689 * square: The endpoints of the line are in square, 1690 * 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. 1691 * @since 4 1692 */ 1693 lineCap: string; 1694 1695 /** 1696 * Sets the style for an intersection point where a line joins another. 1697 * Style of the intersection point of lines. Available values include: 1698 * round: The intersection part is a sector. The radius of a rounded corner is equal to the line width. 1699 * bevel: The intersection part is a triangle. The rectangular corner of each line is independent. 1700 * miter (default): The intersection part has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in miterLimit. 1701 * @since 4 1702 */ 1703 lineJoin: string; 1704 1705 /** 1706 * Sets the maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. 1707 * Maximum miter length. The default value is 10. 1708 * @since 4 1709 */ 1710 miterLimit: number; 1711 1712 /** 1713 * Sets the font style. 1714 * Font style. 1715 * The default value is 10px sans-serif in tv, phone, tablet, wearable. 1716 * The default value is 30px SourceHanSansSC-Regular in smartVision. 1717 * @since 4 1718 */ 1719 font: string; 1720 1721 /** 1722 * Sets the text alignment mode. 1723 * Text alignment mode. Available values include: 1724 * left (default): The text is left-aligned. 1725 * right: The text is right-aligned. 1726 * center: The text is center-aligned. 1727 * start: The text is aligned with the start bound. Can't be supported by smartVision. 1728 * end: The text is aligned with the end bound. Can't be supported by smartVision. 1729 * NOTE 1730 * In the ltr layout mode, the value start equals to left. In the rtl layout mode, the value start equals to right. 1731 * @since 4 1732 */ 1733 textAlign: "left" | "right" | "center" | "start" | "end"; 1734 1735 /** 1736 * Sets whether an image is smooth. 1737 * default value is true. 1738 * @since 4 1739 */ 1740 imageSmoothingEnabled: boolean; 1741 1742 /** 1743 * Sets a text baseline in the horizontal direction for text alignment. 1744 * Text baseline. Available values include: 1745 * alphabetic (default): The text baseline is the normal alphabetic baseline. 1746 * top: The text baseline is on the top of the text bounding box. 1747 * hanging: The text baseline is a hanging baseline over the text. 1748 * middle: The text baseline is in the middle of the text bounding box. 1749 * ideographic: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excessive character. 1750 * bottom: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line. 1751 * @since 4 1752 */ 1753 textBaseline: string; 1754 1755 /** 1756 * Creates a linear gradient color. 1757 * @param x0 X-coordinate of the start point. 1758 * @param y0 Y-coordinate of the start point. 1759 * @param x1 X-coordinate of the end point. 1760 * @param y1 Y-coordinate of the end point. 1761 * @returns LinearGradient object. 1762 * @since 6 1763 */ 1764 createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient; 1765 1766 /** 1767 * Creates a radial gradient color. 1768 * @param x0 X-coordinate of the start point. 1769 * @param y0 Y-coordinate of the start point. 1770 * @param r0 The radius of the starting circle. 1771 * @param x1 X-coordinate of the end point. 1772 * @param y1 Y-coordinate of the end point. 1773 * @param r1 The radius of End Circle. 1774 * @returns RadialGradient object. 1775 * @since 6 1776 */ 1777 createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient; 1778 1779 /** 1780 * Creates a pattern for image filling based on a specified source image and repetition mode. 1781 * @param image Source image. 1782 * @param repetition Repetition mode. The value can be "repeat", "repeat-x", "repeat-y", or "no-repeat". 1783 * @returns Pattern of image filling. 1784 * @since 4 1785 */ 1786 createPattern(image: Image, repetition: string): object; 1787 1788 /** 1789 * Creates a path that is later used by the CanvasRenderingContext2D object. 1790 * @param path another created Path2D object. 1791 * @returns the object of Path2D. 1792 * @since 4 1793 */ 1794 createPath2D(path?: Path2D): Path2D; 1795 1796 /** 1797 * Creates a path that is later used by the CanvasRenderingContext2D object. 1798 * @param cmds a string defined using the SVG path command. 1799 * @returns the object of Path2D. 1800 * @since 4 1801 */ 1802 createPath2D(cmds?: string): Path2D; 1803 1804 /** 1805 * Draws a cubic bezier curve on the canvas. 1806 * @param cp1x X-coordinate of the first parameter of the bezier curve. 1807 * @param cp1y Y-coordinate of the first parameter of the bezier curve. 1808 * @param cp2x X-coordinate of the second parameter of the bezier curve. 1809 * @param cp2y Y-coordinate of the second parameter of the bezier curve. 1810 * @param x End point x-coordinate of the bezier curve. 1811 * @param y End point y-coordinate of the bezier curve. 1812 * @since 4 1813 */ 1814 bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void; 1815 1816 /** 1817 * Draws a quadratic curve on the canvas. 1818 * @param cpx X-coordinate of the bezier curve parameter. 1819 * @param cpy Y-coordinate of the bezier curve parameter. 1820 * @param x End point x-coordinate of the bezier curve. 1821 * @param y End point y-coordinate of the bezier curve. 1822 * @since 4 1823 */ 1824 quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void; 1825 1826 /** 1827 * Draws an arc on the canvas. 1828 * @param x X-coordinate of the center point of the arc. 1829 * @param y Y-coordinate of the center point of the arc. 1830 * @param radius Radius of the arc. 1831 * @param startAngle Start radian of the arc. 1832 * @param endAngel End radian of the arc. 1833 * @param anticlockwise Whether to draw the arc counterclockwise. 1834 * @since 4 1835 */ 1836 arc(x: number, y: number, radius: number, startAngle: number, endAngel: number, anticlockwise?: boolean): void; 1837 1838 /** 1839 * Draws an arc based on the radius and points on the arc. 1840 * @param x1 X-coordinate of the first point on the arc. 1841 * @param y1 Y-coordinate of the first point on the arc. 1842 * @param x2 X-coordinate of the second point on the arc. 1843 * @param y2 Y-coordinate of the second point on the arc. 1844 * @param radius Radius of the arc. 1845 * @since 4 1846 */ 1847 arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void; 1848 1849 /** 1850 * Draws an ellipse based on the coordinate and radius. 1851 * @param x X-coordinate of the center point on the ellipse. 1852 * @param y Y-coordinate of the center point on the ellipse. 1853 * @param radiusX X-coordinate of the radius Length on the ellipse. 1854 * @param radiusY Y-coordinate of the radius Length on the ellipse. 1855 * @param rotation The rotation angle of the ellipse, in radians. 1856 * @param startAngle Angle of the start point for ellipse drawing. 1857 * @param endAngle End Point Angle for Ellipse Drawing. 1858 * @param anticlockwise Indicates whether to draw an ellipse counterclockwise. 1859 * 0: clockwise; 1: counterclockwise. The default value is 0. 1860 * @since 4 1861 */ 1862 ellipse( 1863 x: number, 1864 y: number, 1865 radiusX: number, 1866 radiusY: number, 1867 rotation: number, 1868 startAngle: number, 1869 endAngle: number, 1870 anticlockwise?: number, 1871 ): void; 1872 1873 /** 1874 * Creates a rectangular. 1875 * @param x X-coordinate of the upper left corner of the rectangle. 1876 * @param y Y-coordinate of the upper left corner of the rectangle. 1877 * @param width Width of the rectangle. 1878 * @param height Height of the rectangle. 1879 * @since 4 1880 */ 1881 rect(x: number, y: number, width: number, height: number): void; 1882 1883 /** 1884 * Fills the area inside a closed path. 1885 * @since 4 1886 */ 1887 fill(): void; 1888 1889 /** 1890 * Sets a path as the clipping path. 1891 * @since 4 1892 */ 1893 clip(): void; 1894 1895 /** 1896 * Rotates a canvas clockwise around its coordinate axes. 1897 * @param rotate Clockwise rotation angle. You can use Math.PI / 180 to convert the angle to radian. 1898 * @since 4 1899 */ 1900 rotate(rotate: number): void; 1901 1902 /** 1903 * Scales a canvas based on scaling factors. 1904 * @param x Horizontal scale factor. 1905 * @param y Vertical scale factor. 1906 * @since 4 1907 */ 1908 scale(x: number, y: number): void; 1909 1910 /** 1911 * Defines a transformation matrix. 1912 * To transform a graph, you only need to set parameters of the matrix. 1913 * The coordinates of the corresponding graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. 1914 * You can use the matrix to implement multiple transform effects. 1915 * @param scaleX X-axis scale. 1916 * @param skewX X-axis skew. 1917 * @param skewY Y-axis skew. 1918 * @param scaleY Y-axis scale. 1919 * @param translateX X-axis translation. 1920 * @param translateY Y-axis translation. 1921 * @since 4 1922 */ 1923 transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void; 1924 1925 /** 1926 * Uses same parameters as the transform() function to reset the existing transformation matrix and create a new transformation matrix. 1927 * @param scaleX X-axis scale. 1928 * @param skewX X-axis skew. 1929 * @param skewY Y-axis skew. 1930 * @param scaleY Y-axis scale. 1931 * @param translateX X-axis translation. 1932 * @param translateY Y-axis translation. 1933 * @since 4 1934 */ 1935 setTransform( 1936 scaleX: number, 1937 skewX: number, 1938 skewY: number, 1939 scaleY: number, 1940 translateX: number, 1941 translateY: number, 1942 ): void; 1943 1944 /** 1945 * Moves the origin of the coordinate system. 1946 * @param x X-axis translation. 1947 * @param y Y-axis translation. 1948 * @since 4 1949 */ 1950 translate(x: number, y: number): void; 1951 1952 /** 1953 * Sets the alpha value. 1954 * Global alpha value to set. 1955 * The value ranges from 0.0 (completely transparent) to 1.0 (completely opaque). 1956 * @since 4 1957 */ 1958 globalAlpha: number; 1959 1960 /** 1961 * Draws an image. 1962 * @param image Image resource. 1963 * @param dx X-coordinate of the upper left corner of the drawing area on the canvas. 1964 * @param dy Y-coordinate of the upper left corner of the drawing area on the canvas. 1965 * @param dWidth Width of the drawing area. 1966 * @param dHeight Height of the drawing area. 1967 * @since 4 1968 */ 1969 drawImage(image: Image, dx: number, dy: number, dWidth: number, dHeight: number): void; 1970 1971 /** 1972 * Draws an image. 1973 * @param image Image resource. 1974 * @param sx X-coordinate of the upper left corner of the rectangle used to crop the source image. 1975 * @param sy Y-coordinate of the upper left corner of the rectangle used to crop the source image. 1976 * @param sWidth Target width of the image to crop. 1977 * @param sHeight Target height of the image to crop. 1978 * @param dx X-coordinate of the upper left corner of the drawing area on the canvas. 1979 * @param dy Y-coordinate of the upper left corner of the drawing area on the canvas. 1980 * @param dWidth Width of the drawing area. 1981 * @param dHeight Height of the drawing area. 1982 * @since 4 1983 */ 1984 drawImage( 1985 image: Image, 1986 sx: number, 1987 sy: number, 1988 sWidth: number, 1989 sHeight: number, 1990 dx: number, 1991 dy: number, 1992 dWidth: number, 1993 dHeight: number, 1994 ): void; 1995 1996 /** 1997 * Restores the saved drawing context. 1998 * @since 4 1999 */ 2000 restore: () => void; 2001 2002 /** 2003 * Saves the current drawing context. 2004 * @since 4 2005 */ 2006 save: () => void; 2007 2008 /** 2009 * Creates an ImageData object. 2010 * @param width Width of the ImageData object. 2011 * @param height Height of the ImageData object. 2012 * @returns Returns the newly created FunctionCallable object. 2013 * @since 4 2014 */ 2015 createImageData(width: number, height: number): ImageData; 2016 /** 2017 * Creates an ImageData object. 2018 * @param imagedata ImageData object with the same width and height copied from the original ImageData object. 2019 * @returns Returns the newly created FunctionCallable object. 2020 * @since 4 2021 */ 2022 createImageData(imagedata: ImageData): ImageData; 2023 2024 /** 2025 * ImageData object created with pixels in the specified area on the canvas. 2026 * @param sx X-coordinate of the upper left corner of the output area. 2027 * @param sy Y-coordinate of the upper left corner of the output area. 2028 * @param sw Width of the output area. 2029 * @param sh Height of the output area. 2030 * @returns ImageData object that contains pixels in the specified area on the canvas. 2031 * @since 4 2032 */ 2033 getImageData(sx: number, sy: number, sw: number, sh: number): ImageData; 2034 2035 /** 2036 * Puts the ImageData onto a rectangular area on the canvas. 2037 * @param imageData ImageData object with pixels to put onto the canvas. 2038 * @param dx X-axis offset of the rectangle area on the canvas. 2039 * @param dy Y-axis offset of the rectangle area on the canvas. 2040 * @since 4 2041 */ 2042 putImageData(imageData: ImageData, dx: number, dy: number): void; 2043 2044 /** 2045 * Puts the ImageData onto a rectangular area on the canvas. 2046 * @param imageData ImageData object with pixels to put onto the canvas. 2047 * @param dx X-axis offset of the rectangle area on the canvas. 2048 * @param dy Y-axis offset of the rectangle area on the canvas. 2049 * @param dirtyX X-axis offset of the upper left corner of the rectangle area relative to that of the source image. 2050 * @param dirtyY Y-axis offset of the upper left corner of the rectangle area relative to that of the source image. 2051 * @param dirtyWidth Width of the rectangle area to cop the source image. 2052 * @param dirtyHeight Height of the rectangle area to cop the source image. 2053 * @since 4 2054 */ 2055 putImageData( 2056 imageData: ImageData, 2057 dx: number, 2058 dy: number, 2059 dirtyX: number, 2060 dirtyY: number, 2061 dirtyWidth: number, 2062 dirtyHeight: number, 2063 ): void; 2064 2065 /** 2066 * Sets the dash line style. 2067 * @param segments Interval of alternate line segments and the length of spacing. 2068 * @since 4 2069 */ 2070 setLineDash(segments: Array<number>): void; 2071 2072 /** 2073 * Obtains the dash line style. 2074 * @returns Interval of alternate line segments and the length of spacing. 2075 * @since 4 2076 */ 2077 getLineDash(): Array<number>; 2078 2079 /** 2080 * Sets the dash line offset. 2081 * Dash line offset. The value is a float number starting from 0.0. 2082 * @since 4 2083 */ 2084 lineDashOffset: number; 2085 2086 /** 2087 * Sets the composite operation type. 2088 * source-over Default value. Displays the new drawing above the existing drawing. 2089 * source-atop Displays the new drawing on the top of the existing drawing. 2090 * source-in Displays the new drawing inside the existing drawing. 2091 * source-out Displays part of the new drawing that is outside of the existing drawing. 2092 * destination-over Displays the existing drawing above the new drawing. 2093 * destination-atop Displays the existing drawing above the new drawing. 2094 * destination-in Displays the existing drawing inside the new drawing. 2095 * destination-out Displays part of the existing drawing that is outside of the new drawing. 2096 * lighter Displays both the new drawing and the existing drawing. 2097 * copy Displays the new drawing and neglects the existing drawing. 2098 * xor Combines the new drawing and existing drawing using the XOR operation. 2099 * @since 4 2100 */ 2101 globalCompositeOperation: string; 2102 2103 /** 2104 * Sets the shadow blur degree. 2105 * Shadow blur degree. A larger value indicates a more blurred shadow. The value is of the float type, and the default value is 0. 2106 * @since 4 2107 */ 2108 shadowBlur: number; 2109 2110 /** 2111 * Sets the shadow color. 2112 * @since 4 2113 */ 2114 shadowColor: string; 2115 2116 /** 2117 * Sets the x-axis shadow offset relative to the original object. 2118 * X-axis shadow offset relative to the original object. 2119 * @since 4 2120 */ 2121 shadowOffsetX: number; 2122 2123 /** 2124 * Sets the y-axis shadow offset relative to the original object. 2125 * Y-axis shadow offset relative to the original object. 2126 * @since 4 2127 */ 2128 shadowOffsetY: number; 2129 2130 /** 2131 * Draws the Bitmap to the current canvas. 2132 * @since 7 2133 */ 2134 transferFromImageBitmap(bitmap: ImageBitmap): void; 2135} 2136 2137/** 2138 * You can create a gradient object on the canvas by calling CanvasRenderingContext2D.createLinearGradient(). 2139 * @syscap SystemCapability.ArkUI.ArkUI.Full 2140 * @since 4 2141 */ 2142export interface CanvasGradient { 2143 /** 2144 * Adds a color stop for the CanvasGradient object based on the specified offset and gradient color. 2145 * @param offset Proportion of the distance between the color stop and the start point to the total length. 2146 * The value ranges from 0 to 1. 2147 * @param color Sets the gradient color. 2148 * @since 4 2149 */ 2150 addColorStop(offset: number, color: string): void; 2151} 2152 2153/** 2154 * @syscap SystemCapability.ArkUI.ArkUI.Full 2155 * @since 4 2156 */ 2157export interface Path2D { 2158 /** 2159 * Add another path to current path. 2160 * @param path another created Path2D object. 2161 * @since 4 2162 */ 2163 addPath(path: Path2D): void; 2164 2165 /** 2166 * Uses same parameters as the transform() function to reset the existing transformation matrix and create a new transformation matrix. 2167 * @param scaleX X-axis scale. 2168 * @param skewX X-axis skew. 2169 * @param skewY Y-axis skew. 2170 * @param scaleY Y-axis scale. 2171 * @param translateX X-axis translation. 2172 * @param translateY Y-axis translation. 2173 * @since 4 2174 */ 2175 setTransform( 2176 scaleX: number, 2177 skewX: number, 2178 skewY: number, 2179 scaleY: number, 2180 translateX: number, 2181 translateY: number, 2182 ): void; 2183 2184 /** 2185 * Draws a closed path. 2186 * @since 4 2187 */ 2188 closePath(): void; 2189 2190 /** 2191 * Moves a drawing path to a target position on the canvas. 2192 * @param x X-coordinate of the target position. 2193 * @param y Y-coordinate of the target position. 2194 * @since 4 2195 */ 2196 moveTo(x: number, y: number): void; 2197 2198 /** 2199 * Connects the current point to a target position using a straight line. 2200 * @param x X-coordinate of the target position. 2201 * @param y Y-coordinate of the target position. 2202 * @since 4 2203 */ 2204 lineTo(x: number, y: number): void; 2205 2206 /** 2207 * Draws a cubic bezier curve on the canvas. 2208 * @param cp1x X-coordinate of the first parameter of the bezier curve. 2209 * @param cp1y Y-coordinate of the first parameter of the bezier curve. 2210 * @param cp2x X-coordinate of the second parameter of the bezier curve. 2211 * @param cp2y Y-coordinate of the second parameter of the bezier curve. 2212 * @param x End point x-coordinate of the bezier curve. 2213 * @param y End point y-coordinate of the bezier curve. 2214 * @since 4 2215 */ 2216 bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void; 2217 2218 /** 2219 * Draws a quadratic curve on the canvas. 2220 * @param cpx X-coordinate of the bezier curve parameter. 2221 * @param cpy Y-coordinate of the bezier curve parameter. 2222 * @param x End point x-coordinate of the bezier curve. 2223 * @param y End point y-coordinate of the bezier curve. 2224 * @since 4 2225 */ 2226 quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void; 2227 2228 /** 2229 * Draws an arc on the canvas. 2230 * @param x X-coordinate of the center point of the arc. 2231 * @param y Y-coordinate of the center point of the arc. 2232 * @param radius Radius of the arc. 2233 * @param startAngle Start radian of the arc. 2234 * @param endAngel End radian of the arc. 2235 * @param anticlockwise Whether to draw the arc counterclockwise. 2236 * @since 4 2237 */ 2238 arc(x: number, y: number, radius: number, startAngle: number, endAngel: number, anticlockwise?: boolean): void; 2239 2240 /** 2241 * Draws an arc based on the radius and points on the arc. 2242 * @param x1 X-coordinate of the first point on the arc. 2243 * @param y1 Y-coordinate of the first point on the arc. 2244 * @param x2 X-coordinate of the second point on the arc. 2245 * @param y2 Y-coordinate of the second point on the arc. 2246 * @param radius Radius of the arc. 2247 * @since 4 2248 */ 2249 arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void; 2250 2251 /** 2252 * Draws an ellipse based on the coordinate and radius. 2253 * @param x X-coordinate of the center point on the ellipse. 2254 * @param y Y-coordinate of the center point on the ellipse. 2255 * @param radiusX X-coordinate of the radius Length on the ellipse. 2256 * @param radiusY Y-coordinate of the radius Length on the ellipse. 2257 * @param rotation The rotation angle of the ellipse, in radians. 2258 * @param startAngle Angle of the start point for ellipse drawing. 2259 * @param endAngle End Point Angle for Ellipse Drawing. 2260 * @param anticlockwise Indicates whether to draw an ellipse counterclockwise. 2261 * 0: clockwise; 1: counterclockwise. The default value is 0. 2262 * @since 4 2263 */ 2264 ellipse( 2265 x: number, 2266 y: number, 2267 radiusX: number, 2268 radiusY: number, 2269 rotation: number, 2270 startAngle: number, 2271 endAngle: number, 2272 anticlockwise?: number, 2273 ): void; 2274 2275 /** 2276 * Creates a rectangular. 2277 * @param x X-coordinate of the upper left corner of the rectangle. 2278 * @param y Y-coordinate of the upper left corner of the rectangle. 2279 * @param width Width of the rectangle. 2280 * @param height Height of the rectangle. 2281 * @since 4 2282 */ 2283 rect(x: number, y: number, width: number, height: number): void; 2284} 2285 2286/** 2287 * <canvas> provides a rectangular canvas component for drawing graphics on the screen. 2288 * You can control each pixel to draw on the canvas. 2289 * <canvas> offers a variety of functions for drawing paths, rectangles, circles, text, and allows for adding images to it. 2290 * @syscap SystemCapability.ArkUI.ArkUI.Full 2291 * @since 4 2292 */ 2293export interface CanvasElement extends Element { 2294 /** 2295 * Obtains the context of 2D canvas drawing. 2296 * Only parameters related to 2D canvas drawing are supported. 2297 * The return value is a 2D drawing object that provides specific 2D drawing operations. 2298 * @param type identifier defining the drawing context associated to the canvas. 2299 * @param options use this context attributes to creating rendering context. 2300 * @since 4 2301 */ 2302 getContext(type: "2d", options?: ContextAttrOptions): CanvasRenderingContext2D; 2303 2304 /** 2305 * Obtains the context of webgl canvas drawing. 2306 * Only parameters related to webgl canvas drawing are supported. 2307 * The return value is a webgl drawing object that provides specific webgl drawing operations. 2308 * @param type identifier defining the drawing context associated to the canvas. 2309 * @param options use this context attributes to creating rendering context. 2310 * @since 6 2311 */ 2312 getContext(type: "webgl", options?: WebGLContextAttributes): WebGLRenderingContext; 2313 2314 /** 2315 * Obtains the context of webgl2 canvas drawing. 2316 * Only parameters related to webgl2 canvas drawing are supported. 2317 * The return value is a webgl2 drawing object that provides specific webgl2 drawing operations. 2318 * @param type identifier defining the drawing context associated to the canvas. 2319 * @param options use this context attributes to creating rendering context. 2320 * @since 4 2321 */ 2322 getContext(type: "webgl2", options?: WebGLContextAttributes): WebGL2RenderingContext; 2323 2324 /** 2325 * Creates a data URI that contains the image display. 2326 * @param type A DOMString indicating the image format. The default type is image/png. 2327 * @param quality A Number between 0 and 1 indicating image quality if the type option 2328 * is image/jpeg or image/webp. If this argument is anything else, 2329 * the default value for image quality is used. Other arguments are ignored. 2330 * @since 4 2331 */ 2332 toDataURL(type?: string, quality?: number): string; 2333} 2334 2335/** 2336 * @syscap SystemCapability.ArkUI.ArkUI.Full 2337 * @since 6 2338 */ 2339export interface ScrollOptions { 2340 /** 2341 * Scroll to the target position of the page. Unit: px 2342 * @since 6 2343 */ 2344 position: number; 2345 2346 /** 2347 * Duration of the scrolling animation, in ms. 2348 * @since 6 2349 */ 2350 duration: number; 2351 2352 /** 2353 * The selector for current scroll. 2354 * @since 6 2355 */ 2356 id?: string; 2357 2358 /** 2359 * The timing function for current scroll animation. 2360 * @since 6 2361 */ 2362 timingFunction?: string; 2363 2364 /** 2365 * Callback function for successful interface invocation. 2366 * @param result the request execution result. 2367 * @since 6 2368 */ 2369 success?: (result: Object) => void; 2370 2371 /** 2372 * Callback function for interface invocation failure. 2373 * @param result the request execution result. 2374 * @since 6 2375 */ 2376 fail?: (result: Object) => void; 2377 2378 /** 2379 * Callback function at the end of the interface invoking (executed both successfully and unsuccessfully). 2380 * @param result the request execution result. 2381 * @since 6 2382 */ 2383 complete?: (result: Object) => void; 2384} 2385 2386/** 2387 * @syscap SystemCapability.ArkUI.ArkUI.Full 2388 * @since 6 2389 */ 2390export interface ScrollOffset { 2391 /** 2392 * Scrolling offset in the x-axis, in px. 2393 * @since 6 2394 */ 2395 x: number; 2396 2397 /** 2398 * Scrolling offset in the y-axis, in px. 2399 * @since 6 2400 */ 2401 y: number; 2402} 2403 2404/** 2405 * The <div> component provides a div container. 2406 * @syscap SystemCapability.ArkUI.ArkUI.Full 2407 * @since 6 2408 */ 2409export interface DivElement extends Element { 2410 /** 2411 * Scrolls the div for a certain distance. 2412 * @since 6 2413 */ 2414 scrollBy(data: ScrollParam): void; 2415 2416 /** 2417 * Returns the offset of the current scrolling. The return value type is Object. 2418 * @since 6 2419 */ 2420 getScrollOffset(): ScrollOffset; 2421} 2422 2423/** 2424 * @syscap SystemCapability.ArkUI.ArkUI.Full 2425 * @since 4 2426 */ 2427export interface Application { 2428 /** 2429 * Object that is exposed in the app.js file and obtained by this.$app.$def. 2430 * @since 4 2431 */ 2432 $def: any; 2433} 2434 2435/** 2436 * @syscap SystemCapability.ArkUI.ArkUI.Full 2437 * @since 4 2438 */ 2439export interface ViewModel { 2440 $app: Application; 2441 2442 /** 2443 * Sets the parameters based on the system language, for example, this.$t('strings.hello'). 2444 * @param path Path of the language resource key. 2445 * @param param Content used to replace placeholders during runtime. 2446 * @returns Content. 2447 * There are two types of placeholders available:Named placeholder, for example, {name}. The actual content must be of the object type, for example, $t('strings.object', { name: 'Hello world' }). 2448 * Digit placeholder, for example, {0}. The actual content must be of the array type, for example, $t('strings.array', ['Hello world']. 2449 * @since 4 2450 */ 2451 $t(path: string, params?: object | Array<any>): string; 2452 2453 /** 2454 * Converses between singular and plural forms based on the system language, for example, this.$tc('strings.plurals'). 2455 * NOTE 2456 * The resource content is distinguished by the following JSON keys: zero, one, two, few, many, and other. 2457 * @param path Resource file path. 2458 * @param count Value. 2459 * @returns Content. 2460 * @since 4 2461 */ 2462 $tc(path: string, count: number): string; 2463 2464 /** 2465 * Replace the resource path based on the DPI of the current device: this.$r('image.tv'). 2466 * @param path Resource file path. 2467 * @returns Content. 2468 * @since 4 2469 */ 2470 $r(path: string): string; 2471 2472 /** 2473 * Adds an attribute or modifies an existing attribute. 2474 * Usage: this.$set('key',value): Add an attribute. 2475 * @param key 2476 * @param value 2477 * @since 4 2478 */ 2479 $set(key: string, value: any): void; 2480 2481 /** 2482 * Deletes an attribute. 2483 * Usage:this.$delete('key'): Delete an attribute. 2484 * @param key 2485 * @since 4 2486 */ 2487 $delete(key: string): void; 2488 2489 /** 2490 * Obtains the component with a specified ID. If no ID is specified, the root component is returned. 2491 * Usage: 2492 * <div id='xxx'></div> 2493 * this.$element('xxx'): Obtain the component whose ID is xxx. 2494 * this.$element(): Obtain the root component. 2495 * @param id Component ID. 2496 * @since 4 2497 */ 2498 $element( 2499 id?: string, 2500 ): AnimationElement & 2501 CanvasElement & 2502 object & 2503 WebElement & 2504 CameraElement & 2505 ListElement & 2506 SwiperElement & 2507 DialogElement & 2508 ImageAnimatorElement & 2509 MarqueeElement & 2510 MenuElement & 2511 ChartElement & 2512 InputElement & 2513 ButtonElement & 2514 TextAreaElement & 2515 PickerElement & 2516 VideoElement & 2517 DivElement; 2518 2519 /** 2520 * Obtains the root ViewModel instance. 2521 * @since 4 2522 */ 2523 $root(): ViewModel & object; 2524 2525 /** 2526 * Obtains the parent ViewModel instance. 2527 * @since 4 2528 */ 2529 $parent(): ViewModel & object; 2530 2531 /** 2532 * Obtains the ViewModel instance of a custom child component with a specified ID. 2533 * Usage:this.$child('xxx'): Obtain the ViewModel instance of a custom child component whose ID is xxx. 2534 * @param id Component ID. 2535 * @since 4 2536 */ 2537 $child(id: string): ViewModel & object; 2538 2539 /** 2540 * Listens for attribute changes. If the value of the data attribute changes, the bound event is triggered. 2541 * @param data Attribute. 2542 * @param callback Function name. 2543 * @since 4 2544 */ 2545 $watch(data: string, callback: string): void; 2546 2547 /** 2548 * An object that holds all DOM elements and component instances that have been registered with the refs attribute. 2549 * @since 4 2550 */ 2551 $refs: ElementReferences; 2552 2553 /** 2554 * Custom events. 2555 * @param event The name of event. 2556 * @param params The params of event. 2557 * @since 4 2558 */ 2559 $emit(event: string, params?: object): void; 2560 2561 /** 2562 * Scroll the page to the destination. 2563 * @param options The properties of event. 2564 * @since 6 2565 */ 2566 scrollTo(options: ScrollOptions): void; 2567} 2568 2569/** 2570 * @syscap SystemCapability.ArkUI.ArkUI.Full 2571 * @since 4 2572 */ 2573export interface ElementReferences { 2574 [k: string]: AnimationElement & 2575 CanvasElement & 2576 object & 2577 WebElement & 2578 CameraElement & 2579 ListElement & 2580 SwiperElement & 2581 DialogElement & 2582 ImageAnimatorElement & 2583 MarqueeElement & 2584 MenuElement & 2585 ChartElement & 2586 InputElement & 2587 ButtonElement & 2588 TextAreaElement & 2589 PickerElement & 2590 VideoElement & 2591 DivElement; 2592} 2593 2594/** 2595 * @syscap SystemCapability.ArkUI.ArkUI.Full 2596 * @since 4 2597 */ 2598export declare class Locate { 2599 /** 2600 * language, such as 'zh'. 2601 * @since 4 2602 */ 2603 language: string; 2604 2605 /** 2606 * country or regin, such ass 'CN'. 2607 * @since 4 2608 */ 2609 countryOrRegion: string; 2610 2611 /** 2612 * text layout direction, ltr or rtl. 2613 * @since 4 2614 */ 2615 dir: "ltr" | "rtl"; 2616 2617 /** 2618 * The Unicode locale key set defined by the locale. If this locale does not have a specific key set, an empty set is 2619 * returned. For example: {"nu": "arab"}, which means that the numbers in the current environment use Arabic numbers. 2620 * @since 5 2621 */ 2622 unicodeSetting: object; 2623} 2624 2625/** 2626 * @syscap SystemCapability.ArkUI.ArkUI.Full 2627 * @since 6 2628 */ 2629export declare class Configuration { 2630 /** 2631 * Internationalization related information, such as language, country, text layout direction, etc. 2632 * @since 6 2633 */ 2634 locate: Locate; 2635 2636 /** 2637 * The magnification of the current system font. 2638 * @since 6 2639 */ 2640 fontScale: number; 2641} 2642 2643/** 2644 * @syscap SystemCapability.ArkUI.ArkUI.Full 2645 * @since 4 2646 */ 2647export interface Options<T extends ViewModel, Data = DefaultData<T>> { 2648 /** 2649 * Data model of the page that can be converted into a JSON object. 2650 * The attribute name cannot start with $ or an underscore (_) or contain the reserved words such as for, if, show, and tid. 2651 * For a function, the return value must be an object. 2652 * Set the value of data to the return value of the function during page initialization. 2653 * @since 4 2654 */ 2655 data?: Data; 2656 2657 /** 2658 * Listens for page initialization. 2659 * Called when page initialization is complete. This function is called only once in a lifecycle. 2660 * @since 4 2661 */ 2662 onInit?(): void; 2663 2664 /** 2665 * Listens for page creation. 2666 * Called when a page is created. This function is called only once in a lifecycle. 2667 * @since 4 2668 */ 2669 onReady?(): void; 2670 2671 /** 2672 * Listens for page display. 2673 * Called when the page is displayed. 2674 * @since 4 2675 */ 2676 onShow?(): void; 2677 2678 /** 2679 * Listens for page hiding. 2680 * Called when the page disappears. 2681 * @since 4 2682 */ 2683 onHide?(): void; 2684 2685 /** 2686 * Listens for page destruction. 2687 * Called when the page is destroyed. 2688 * @since 4 2689 */ 2690 onDestroy?(): void; 2691 2692 /** 2693 * Listens for the back button action. 2694 * The back button is tapped: 2695 * @returns true means that the page processes the return logic. 2696 * false means that the default return logic is used. 2697 * If no value is returned, the default return logic is used. 2698 * @since 4 2699 */ 2700 onBackPress?(): boolean; 2701 2702 /** 2703 * Listens for page active. 2704 * Called when the page is activing. 2705 * @since 5 2706 */ 2707 onActive?(): void; 2708 2709 /** 2710 * Listens for page inactive. 2711 * Called when the page is paused. 2712 * @since 5 2713 */ 2714 onInactive?(): void; 2715 2716 /** 2717 * This callback is triggered when a new request is received when the FA has started. 2718 * @since 5 2719 */ 2720 onNewRequest?(): void; 2721 2722 /** 2723 * Callback when FA initiates a migration, in this callback, the application can decide whether 2724 * to migrate according to the current state. 2725 * @since 5 2726 */ 2727 onStartContinuation?(): boolean; 2728 2729 /** 2730 * For the callback of saving state data, the developer needs to fill in the parameter object 2731 * the data to be migrated to the target device. 2732 * @since 5 2733 */ 2734 onSaveData?(value: object): void; 2735 2736 /** 2737 * The callback to restore the data saved by the onSaveData method when the migration was initiated. 2738 * @since 5 2739 */ 2740 onRestoreData?(value: object): void; 2741 2742 /** 2743 * The callback for the completion of the migration, which is triggered on the calling side, indicates 2744 * the result of the application migration to the target device. 2745 * @since 5 2746 */ 2747 onCompleteContinuation?(code: number): void; 2748 2749 /** 2750 * This callback is triggered when the corresponding system configuration changes, such as system font size, 2751 * language region, etc. 2752 * @since 6 2753 */ 2754 onConfigurationUpdated?(configuration: Configuration): void; 2755 2756 /** 2757 * Listens for application creation. 2758 * Called when the application is created. 2759 * @since 4 2760 */ 2761 onCreate?(): void; 2762} 2763 2764/** 2765 * Used for ide. 2766 * @systemapi 2767 * @hide 2768 * @since 4 2769 */ 2770type DefaultData<T> = object; 2771/** 2772 * Used for ide. 2773 * @systemapi 2774 * @hide 2775 * @since 4 2776 */ 2777type CombinedOptions<T extends ViewModel, Data> = object & Options<T, Data> & ThisType<T & ViewModel & Data>; 2778/** 2779 * @syscap SystemCapability.ArkUI.ArkUI.Full 2780 * @systemapi 2781 * @hide 2782 * @since 4 2783 */ 2784export declare function extendViewModel<T extends ViewModel, Data>(options: CombinedOptions<T, Data>): ViewModel & Data; 2785