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