Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 021b606d 编写于 作者: L liuliu
浏览文件
操作

arkui-ts 

Signed-off-by: Nliuliu <liuliu40@huawei.com>
Change-Id: I1d0fcc2a1771fd115bf22064b1204cd709b0b0e6
上级 10f3cc07
显示空白变更内容
内联 并排
Showing with 463 addition and 339 deletion
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @ 021b606d
......@@ -86,11 +86,37 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController})
加载沙箱路径下的本地资源文件
1.通过[globalthis](../../application-models/uiability-data-sync-with-ui.md#uiability和page之间使用globalthis)获取沙箱路径。
1.通过构造的单例对象GlobalContext获取沙箱路径。
```ts
// GlobalContext.ts
export class GlobalContext {
private constructor() {}
private static instance: GlobalContext;
private _objects = new Map<string, Object>();
public static getContext(): GlobalContext {
if (!GlobalContext.instance) {
GlobalContext.instance = new GlobalContext();
}
return GlobalContext.instance;
}
getObject(value: string): Object | undefined {
return this._objects.get(value);
}
setObject(key: string, objectClass: Object): void {
this._objects.set(key, objectClass);
}
}
```
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
let url = 'file://' + globalThis.filesDir + '/index.html'
import { GlobalContext } from '../GlobalContext'
let url = 'file://' + GlobalContext.getContext().getObject("filesDir") + '/index.html'
@Entry
@Component
......@@ -110,13 +136,16 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController})
```ts
// xxx.ts
import UIAbility from '@ohos.app.ability.UIAbility';
import AbilityConstant from '@ohos.app.ability.AbilityConstant';
import Want from '@ohos.app.ability.Want';
import web_webview from '@ohos.web.webview';
import { GlobalContext } from '../GlobalContext'
export default class EntryAbility extends UIAbility {
onCreate(want, launchParam) {
// 通过在globalThis对象上绑定filesDir，可以实现UIAbility组件与UI之间的数据同步。
globalThis.filesDir = this.context.filesDir
console.log("Sandbox path is " + globalThis.filesDir)
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
// 通过在GlobalContext对象上绑定filesDir，可以实现UIAbility组件与UI之间的数据同步。
GlobalContext.getContext().setObject("filesDir", this.context.filesDir);
console.log("Sandbox path is " + GlobalContext.getContext().getObject("filesDir"))
}
}
```
......@@ -250,21 +279,27 @@ javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Arr
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
testObj = {
test: (data1, data2, data3) => {
class TestObj {
constructor() {
}
test(data1: string, data2: string, data3: string): string {
console.log("data1:" + data1)
console.log("data2:" + data2)
console.log("data3:" + data3)
return "AceString"
},
toString: () => {
}
toString(): void {
console.log('toString' + "interface instead.")
}
}
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
testObj = new TestObj();
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
......@@ -1332,8 +1367,8 @@ allowWindowOpenMethod(flag: boolean)
//在同一page页有两个web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。
@CustomDialog
struct NewWebViewComp {
controller: CustomDialogController
webviewController1: web_webview.WebviewController
controller?: CustomDialogController
webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: "", controller: this.webviewController1 })
......@@ -1341,7 +1376,9 @@ allowWindowOpenMethod(flag: boolean)
.multiWindowAccess(false)
.onWindowExit(()=> {
console.info("NewWebViewComp onWindowExit")
if (this.controller) {
this.controller.close()
}
})
}
}
......@@ -1351,7 +1388,7 @@ allowWindowOpenMethod(flag: boolean)
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
dialogController: CustomDialogController = null
dialogController: CustomDialogController | null = null
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
......@@ -1454,6 +1491,7 @@ onAlert(callback: (event?: { url: string; message: string; result: JsResult }) =
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.onAlert((event) => {
if (event) {
console.log("event.url:" + event.url)
console.log("event.message:" + event.message)
AlertDialog.show({
......@@ -1475,6 +1513,7 @@ onAlert(callback: (event?: { url: string; message: string; result: JsResult }) =
event.result.handleCancel()
}
})
}
return true
})
}
......@@ -1537,6 +1576,7 @@ onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResu
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.onBeforeUnload((event) => {
if (event) {
console.log("event.url:" + event.url)
console.log("event.message:" + event.message)
AlertDialog.show({
......@@ -1558,6 +1598,7 @@ onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResu
event.result.handleCancel()
}
})
}
return true
})
}
......@@ -1620,6 +1661,7 @@ onConfirm(callback: (event?: { url: string; message: string; result: JsResult })
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.onConfirm((event) => {
if (event) {
console.log("event.url:" + event.url)
console.log("event.message:" + event.message)
AlertDialog.show({
......@@ -1641,6 +1683,7 @@ onConfirm(callback: (event?: { url: string; message: string; result: JsResult })
event.result.handleCancel()
}
})
}
return true
})
}
......@@ -1710,6 +1753,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.onPrompt((event) => {
if (event) {
console.log("url:" + event.url)
console.log("message:" + event.message)
console.log("value:" + event.value)
......@@ -1732,6 +1776,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
event.result.handleCancel()
}
})
}
return true
})
}
......@@ -1797,10 +1842,12 @@ onConsole(callback: (event?: { message: ConsoleMessage }) => boolean)
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onConsole((event) => {
if (event) {
console.log('getMessage:' + event.message.getMessage())
console.log('getSourceId:' + event.message.getSourceId())
console.log('getLineNumber:' + event.message.getLineNumber())
console.log('getMessageLevel:' + event.message.getMessageLevel())
}
return false
})
}
......@@ -1839,11 +1886,13 @@ onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisp
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onDownloadStart((event) => {
if (event) {
console.log('url:' + event.url)
console.log('userAgent:' + event.userAgent)
console.log('contentDisposition:' + event.contentDisposition)
console.log('contentLength:' + event.contentLength)
console.log('mimetype:' + event.mimetype)
}
})
}
}
......@@ -1878,6 +1927,7 @@ onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResou
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onErrorReceive((event) => {
if (event) {
console.log('getErrorInfo:' + event.error.getErrorInfo())
console.log('getErrorCode:' + event.error.getErrorCode())
console.log('url:' + event.request.getRequestUrl())
......@@ -1890,6 +1940,7 @@ onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResou
for (let i of result) {
console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue)
}
}
})
}
}
......@@ -1924,6 +1975,7 @@ onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: W
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onHttpErrorReceive((event) => {
if (event) {
console.log('url:' + event.request.getRequestUrl())
console.log('isMainFrame:' + event.request.isMainFrame())
console.log('isRedirect:' + event.request.isRedirect())
......@@ -1943,6 +1995,7 @@ onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: W
for (let i of resph) {
console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)
}
}
})
}
}
......@@ -1976,7 +2029,9 @@ onPageBegin(callback: (event?: { url: string }) => void)
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onPageBegin((event) => {
if (event) {
console.log('url:' + event.url)
}
})
}
}
......@@ -2010,7 +2065,9 @@ onPageEnd(callback: (event?: { url: string }) => void)
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onPageEnd((event) => {
if (event) {
console.log('url:' + event.url)
}
})
}
}
......@@ -2044,7 +2101,9 @@ onProgressChange(callback: (event?: { newProgress: number }) => void)
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onProgressChange((event) => {
if (event) {
console.log('newProgress:' + event.newProgress)
}
})
}
}
......@@ -2078,7 +2137,9 @@ onTitleReceive(callback: (event?: { title: string }) => void)
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onTitleReceive((event) => {
if (event) {
console.log('title:' + event.title)
}
})
}
}
......@@ -2113,7 +2174,9 @@ onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onRefreshAccessedHistory((event) => {
if (event) {
console.log('url:' + event.url + ' isReload:' + event.isRefreshed)
}
})
}
}
......@@ -2167,7 +2230,9 @@ onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => voi
Column() {
Web({ src: 'chrome://crash/', controller: this.controller })
.onRenderExited((event) => {
if (event) {
console.log('reason:' + event.renderExitReason)
}
})
}
}
......@@ -2199,6 +2264,7 @@ onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector
// xxx.ets
import web_webview from '@ohos.web.webview';
import picker from '@ohos.file.picker';
import { BusinessError } from '@ohos.base';
@Entry
@Component
......@@ -2211,13 +2277,15 @@ onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector
.onShowFileSelector((event) => {
console.log('MyFileUploader onShowFileSelector invoked')
const documentSelectOptions = new picker.DocumentSelectOptions();
let uri = null;
let uri: string | null = null;
const documentViewPicker = new picker.DocumentViewPicker();
documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
uri = documentSelectResult[0];
console.info('documentViewPicker.select to file succeed and uri is:' + uri);
if (event) {
event.result.handleFileList([uri]);
}).catch((err) => {
}
}).catch((err: BusinessError) => {
console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
})
return true
......@@ -2343,7 +2411,9 @@ onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => b
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onUrlLoadIntercept((event) => {
if (event) {
console.log('onUrlLoadIntercept ' + event.data.toString())
}
return true
})
}
......@@ -2394,16 +2464,18 @@ onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebReso
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onInterceptRequest((event) => {
if (event) {
console.log('url:' + event.request.getRequestUrl())
var head1:Header = {
}
let head1:Header = {
headerKey:"Connection",
headerValue:"keep-alive"
}
var head2:Header = {
let head2:Header = {
headerKey:"Cache-Control",
headerValue:"no-cache"
}
var length = this.heads.push(head1)
let length = this.heads.push(head1)
length = this.heads.push(head2)
this.responseweb.setResponseHeader(this.heads)
this.responseweb.setResponseData(this.webdata)
......@@ -2453,6 +2525,7 @@ onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, r
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onHttpAuthRequest((event) => {
if (event) {
AlertDialog.show({
title: 'onHttpAuthRequest',
message: 'text',
......@@ -2481,6 +2554,7 @@ onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, r
event.handler.cancel()
}
})
}
return true
})
}
......@@ -2595,8 +2669,11 @@ onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationH
```ts
// xxx.ets API10
import common from '@ohos.app.ability.common';
import Want from '@ohos.app.ability.Want';
import web_webview from '@ohos.web.webview'
import bundle from '@ohos.bundle'
import { GlobalContext } from '../GlobalContext'
let uri = "";
......@@ -2611,15 +2688,15 @@ onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationH
return CertManagerService.sInstance;
}
async grantAppPm(callback) {
async grantAppPm(callback: (message: string) => void) {
let message = '';
//注：com.example.myapplication需要写实际应用名称
let bundleInfo = await bundle.getBundleInfo("com.example.myapplication", bundle.BundleFlag.GET_BUNDLE_DEFAULT)
let clientAppUid = bundleInfo.uid
let appUid = clientAppUid.toString()
//注：globalThis.AbilityContext需要在MainAbility.ts文件的onCreate函数里添加globalThis.AbilityContext = this.context
await globalThis.AbilityContext.startAbilityForResult(
//注：需要在MainAbility.ts文件的onCreate函数里添加GlobalContext.getContext().setObject("AbilityContext", this.context)
await GlobalContext.getContext().getObject("AbilityContext").startAbilityForResult(
{
bundleName: "com.ohos.certmanager",
abilityName: "MainAbility",
......@@ -2627,10 +2704,12 @@ onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationH
parameters: {
appUid: appUid, //传入申请应用的appUid
}
})
.then((data) => {
if (!data.resultCode) {
this.authUri = data.want.parameters.authUri; //授权成功后获取返回的authUri
} as Want)
.then((data: common.AbilityResult) => {
if (!data.resultCode && data.want) {
if (data.want.parameters) {
this.authUri = data.want.parameters.authUri as string; //授权成功后获取返回的authUri
}
}
})
message += "after grantAppPm authUri: " + this.authUri;
......@@ -2719,6 +2798,7 @@ onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onPermissionRequest((event) => {
if (event) {
AlertDialog.show({
title: 'title',
message: 'text',
......@@ -2738,6 +2818,7 @@ onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)
event.request.deny()
}
})
}
})
}
}
......@@ -2777,8 +2858,10 @@ onContextMenuShow(callback: (event?: { param: WebContextMenuParam, result: WebCo
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onContextMenuShow((event) => {
if (event) {
console.info("x coord = " + event.param.x())
console.info("link url = " + event.param.getLinkUrl())
}
return true
})
}
......@@ -2849,6 +2932,7 @@ onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocatio
Web({ src:'www.example.com', controller:this.controller })
.geolocationAccess(true)
.onGeolocationShow((event) => {
if (event) {
AlertDialog.show({
title: 'title',
message: 'text',
......@@ -2862,6 +2946,7 @@ onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocatio
event.geolocation.invoke(event.origin, false, true)
}
})
}
})
}
}
......@@ -2924,7 +3009,7 @@ onFullScreenEnter(callback: (event: { handler: FullScreenExitHandler }) => void)
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
handler: FullScreenExitHandler = null
handler: FullScreenExitHandler | null = null
build() {
Column() {
Web({ src:'www.example.com', controller:this.controller })
......@@ -2959,13 +3044,15 @@ onFullScreenExit(callback: () => void)
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
handler: FullScreenExitHandler = null
handler: FullScreenExitHandler | null = null
build() {
Column() {
Web({ src:'www.example.com', controller:this.controller })
.onFullScreenExit(() => {
console.log("onFullScreenExit...")
if (this.handler) {
this.handler.exitFullScreen()
}
})
.onFullScreenEnter((event) => {
this.handler = event.handler
......@@ -3001,8 +3088,8 @@ onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetU
//在同一page页有两个web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。
@CustomDialog
struct NewWebViewComp {
controller: CustomDialogController
webviewController1: web_webview.WebviewController
controller?: CustomDialogController
webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: "", controller: this.webviewController1 })
......@@ -3010,7 +3097,9 @@ onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetU
.multiWindowAccess(false)
.onWindowExit(()=> {
console.info("NewWebViewComp onWindowExit")
if (this.controller) {
this.controller.close()
}
})
}
}
......@@ -3020,7 +3109,7 @@ onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetU
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
dialogController: CustomDialogController = null
dialogController: CustomDialogController | null = null
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
......@@ -3109,8 +3198,10 @@ onSearchResultReceive(callback: (event?: {activeMatchOrdinal: number, numberOfMa
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onSearchResultReceive(ret => {
if (ret) {
console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal +
"[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting)
}
})
}
}
......@@ -3279,7 +3370,7 @@ onFaviconReceived(callback: (event: {favicon: image.PixelMap}) => void)
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State icon: image.PixelMap = undefined;
@State icon: image.PixelMap | undefined = undefined;
build() {
Column() {
Web({ src:'www.example.com', controller: this.controller })
......@@ -3353,9 +3444,11 @@ onFirstContentfulPaint(callback: (event?: { navigationStartTick: number, firstCo
Column() {
Web({ src:'www.example.com', controller: this.controller })
.onFirstContentfulPaint(event => {
if (event) {
console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" +
event.navigationStartTick + ", [firstContentfulPaintMs]:" +
event.firstContentfulPaintMs)
}
})
}
}
......@@ -3459,6 +3552,7 @@ onScreenCaptureRequest(callback: (event?: { handler: ScreenCaptureHandler }) =>
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onScreenCaptureRequest((event) => {
if (event) {
AlertDialog.show({
title: 'title: ' + event.handler.getOrigin(),
message: 'text',
......@@ -3478,6 +3572,7 @@ onScreenCaptureRequest(callback: (event?: { handler: ScreenCaptureHandler }) =>
event.handler.deny()
}
})
}
})
}
}
......@@ -3552,6 +3647,7 @@ onControllerAttached(callback: () => void)
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
import { BusinessError } from '@ohos.base';
@Entry
@Component
......@@ -3566,7 +3662,9 @@ onControllerAttached(callback: () => void)
let id = this.controller.getWebId();
console.log("id: " + id);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
let code = (error as BusinessError).code;
let message = (error as BusinessError).message;
console.error(`ErrorCode: ${code}, Message: ${message}`);
}
})
}
......@@ -4627,8 +4725,8 @@ cancel(): void
### 创建对象
```
webController: WebController = new WebController()
```ts
let webController: WebController = new WebController()
```
### getCookieManager<sup>9+</sup>
......@@ -5167,18 +5265,24 @@ registerJavaScriptProxy(options: { object: object, name: string, methodList: Arr
```ts
// xxx.ets
@Entry
@Component
struct Index {
controller: WebController = new WebController()
testObj = {
test: (data) => {
class TestObj {
constructor() {
}
test(): string {
return "ArkUI Web Component"
},
toString: () => {
}
toString(): void {
console.log('Web Component toString')
}
}
@Entry
@Component
struct Index {
controller: WebController = new WebController()
testObj = new TestObj();
build() {
Column() {
Row() {
......@@ -5252,7 +5356,9 @@ runJavaScript(options: { script: string, callback?: (result: string) => void })
this.webResult = result
console.info(`The test() return value is: ${result}`)
}})
if (e) {
console.info('url: ', e.url)
}
})
}
}
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
浏览文件 @ 021b606d
......@@ -45,8 +45,8 @@ struct LongPressGestureExample {
.gesture(
LongPressGesture({ repeat: true })
// 由于repeat设置为true，长按动作存在时会连续触发，触发间隔为duration（默认值500ms）
.onAction((event: GestureEvent) => {
if (event.repeat) {
.onAction((event?: GestureEvent) => {
if (event && event.repeat) {
this.count++
}
})
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ 021b606d
......@@ -95,12 +95,14 @@ struct PanGestureExample {
// 左右拖动触发该手势事件
.gesture(
PanGesture(this.panOption)
.onActionStart((event: GestureEvent) => {
.onActionStart((event?: GestureEvent) => {
console.info('Pan start')
})
.onActionUpdate((event: GestureEvent) => {
.onActionUpdate((event?: GestureEvent) => {
if (event) {
this.offsetX = this.positionX + event.offsetX
this.offsetY = this.positionY + event.offsetY
}
})
.onActionEnd(() => {
this.positionX = this.offsetX
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
浏览文件 @ 021b606d
......@@ -56,13 +56,15 @@ struct PinchGestureExample {
// 三指捏合触发该手势事件
.gesture(
PinchGesture({ fingers: 3 })
.onActionStart((event: GestureEvent) => {
.onActionStart((event?: GestureEvent) => {
console.info('Pinch start')
})
.onActionUpdate((event: GestureEvent) => {
.onActionUpdate((event?: GestureEvent) => {
if (event) {
this.scaleValue = this.pinchValue * event.scale
this.pinchX = event.pinchCenterX
this.pinchY = event.pinchCenterY
}
})
.onActionEnd(() => {
this.pinchValue = this.scaleValue
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
浏览文件 @ 021b606d
......@@ -53,11 +53,13 @@ struct RotationGestureExample {
// 双指旋转触发该手势事件
.gesture(
RotationGesture()
.onActionStart((event: GestureEvent) => {
.onActionStart((event?: GestureEvent) => {
console.info('Rotation start')
})
.onActionUpdate((event: GestureEvent) => {
.onActionUpdate((event?: GestureEvent) => {
if (event) {
this.angle = this.rotateValue + event.angle
}
})
.onActionEnd(() => {
this.rotateValue = this.angle
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
浏览文件 @ 021b606d
......@@ -59,9 +59,11 @@ struct SwipeGestureExample {
// 单指竖直方向滑动时触发该事件
.gesture(
SwipeGesture({ direction: SwipeDirection.Vertical })
.onAction((event: GestureEvent) => {
.onAction((event?: GestureEvent) => {
if (event) {
this.speed = event.speed
this.rotateAngle = event.angle
}
})
)
}.width('100%')
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
浏览文件 @ 021b606d
......@@ -41,8 +41,10 @@ struct TapGestureExample {
Text('Click twice').fontSize(28)
.gesture(
TapGesture({ count: 2 })
.onAction((event: GestureEvent) => {
.onAction((event?: GestureEvent) => {
if (event) {
this.value = JSON.stringify(event.fingerList[0])
}
})
)
Text(this.value)
......
zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ 021b606d
......@@ -1423,8 +1423,10 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var pattern = this.context.createPattern(this.img, 'repeat')
let pattern = this.context.createPattern(this.img, 'repeat')
if (pattern) {
this.context.fillStyle = pattern
}
this.context.fillRect(0, 0, 200, 200)
})
}
......@@ -2421,7 +2423,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.drawImage(this.img,0,0,130,130)
var imagedata = this.context.getImageData(50,50,130,130)
let imagedata = this.context.getImageData(50,50,130,130)
this.context.putImageData(imagedata,150,150)
})
}
......@@ -2473,8 +2475,8 @@ putImageData(imageData: ImageData, dx: number | string, dy: number | string, dir
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var imageData = this.context.createImageData(100, 100)
for (var i = 0; i < imageData.data.length; i += 4) {
let imageData = this.context.createImageData(100, 100)
for (let i = 0; i < imageData.data.length; i += 4) {
imageData.data[i + 0] = 255
imageData.data[i + 1] = 0
imageData.data[i + 2] = 255
......@@ -2626,15 +2628,15 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var imageData = this.offContext.createImageData(100, 100)
for (var i = 0; i < imageData.data.length; i += 4) {
let imageData = this.offContext.createImageData(100, 100)
for (let i = 0; i < imageData.data.length; i += 4) {
imageData.data[i + 0] = 255
imageData.data[i + 1] = 0
imageData.data[i + 2] = 255
imageData.data[i + 3] = 255
}
this.offContext.putImageData(imageData, 10, 10)
var image = this.offContext.transferToImageBitmap()
let image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
})
}
......@@ -2684,7 +2686,7 @@ toDataURL(type?: string, quality?: number): string
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var dataURL = this.context.toDataURL()
let dataURL = this.context.toDataURL()
})
}
.width('100%')
......@@ -2808,7 +2810,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.context.createLinearGradient(50,0, 300,100)
let grad = this.context.createLinearGradient(50,0, 300,100)
grad.addColorStop(0.0, '#ff0000')
grad.addColorStop(0.5, '#ffffff')
grad.addColorStop(1.0, '#00ff00')
......@@ -2861,7 +2863,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
var grad = this.context.createRadialGradient(200,200,50, 200,200,200)
let grad = this.context.createRadialGradient(200,200,50, 200,200,200)
grad.addColorStop(0.0, '#ff0000')
grad.addColorStop(0.5, '#ffffff')
grad.addColorStop(1.0, '#00ff00')
......@@ -2908,7 +2910,7 @@ struct CanvasExample {
.height('100%')
.backgroundColor('#ffffff')
.onReady(() => {
var grad = this.context.createConicGradient(0, 50, 80)
let grad = this.context.createConicGradient(0, 50, 80)
grad.addColorStop(0.0, '#ff0000')
grad.addColorStop(0.5, '#ffffff')
grad.addColorStop(1.0, '#00ff00')
......
zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @ 021b606d
......@@ -62,8 +62,8 @@ struct GestureGroupExample {
// 以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件
GestureGroup(GestureMode.Sequence,
LongPressGesture({ repeat: true })
.onAction((event: GestureEvent) => {
if (event.repeat) {
.onAction((event?: GestureEvent) => {
if (event && event.repeat) {
this.count++
}
console.info('LongPress onAction')
......@@ -76,9 +76,11 @@ struct GestureGroupExample {
this.borderStyles = BorderStyle.Dashed
console.info('pan start')
})
.onActionUpdate((event: GestureEvent) => {
.onActionUpdate((event?: GestureEvent) => {
if (event) {
this.offsetX = this.positionX + event.offsetX
this.offsetY = this.positionY + event.offsetY
}
console.info('pan update')
})
.onActionEnd(() => {
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ 021b606d
......@@ -42,7 +42,7 @@ struct Page45 {
.height('100%')
.backgroundColor('#ffff00')
.onReady(() => {
var grad = this.context.createLinearGradient(50, 0, 300, 100)
let grad = this.context.createLinearGradient(50, 0, 300, 100)
grad.addColorStop(0.0, '#ff0000')
grad.addColorStop(0.5, '#ffffff')
grad.addColorStop(1.0, '#00ff00')
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvaspattern.md
浏览文件 @ 021b606d
......@@ -33,7 +33,7 @@ struct CanvasPatternPage {
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private matrix: Matrix2D = new Matrix2D()
private img: ImageBitmap = new ImageBitmap("common/pattern.jpg")
private pattern : CanvasPattern
private pattern : CanvasPattern | null = null
build() {
Column() {
......@@ -43,7 +43,9 @@ struct CanvasPatternPage {
this.matrix.scaleX = 1
this.matrix.translateX = 50
this.matrix.translateY = 200
if (this.pattern) {
this.pattern.setTransform(this.matrix)
}
this.context.fillRect(0, 0, 480, 720)
})
.width("45%")
......@@ -54,12 +56,14 @@ struct CanvasPatternPage {
.backgroundColor('#FFFFFF')
.onReady(() => {
this.pattern = this.context.createPattern(this.img, 'no-repeat')
this.context.fillStyle = this.pattern
this.matrix.scaleY = 0.5
this.matrix.scaleX = 0.5
this.matrix.translateX = 50
this.matrix.translateY = 50
if (this.pattern) {
this.context.fillStyle = this.pattern
this.pattern.setTransform(this.matrix)
}
this.context.fillRect(0, 0, 480, 720)
})
}
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
浏览文件 @ 021b606d
......@@ -39,7 +39,7 @@ ImageData对象可以存储canvas渲染的像素数据。
.backgroundColor('#ffff00')
.onReady(() =>{
this.context.drawImage(this.img,0,0,130,130)
var imagedata = this.context.getImageData(50,50,130,130)
let imagedata = this.context.getImageData(50,50,130,130)
this.context.putImageData(imagedata,150,150)
})
}
......
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-matrix2d.md
浏览文件 @ 021b606d
......@@ -36,7 +36,7 @@ Matrix2D()
struct Matrix2DScaleX {
@State message: string = 'Matrix2D ScaleX'
printMatrix(title, matrix) {
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
......@@ -50,7 +50,7 @@ struct Matrix2DScaleX {
.fontWeight(FontWeight.Bold)
Button("Set scaleX")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
let matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
this.printMatrix(this.message, matrix)
})
......@@ -71,7 +71,7 @@ struct Matrix2DScaleX {
struct Matrix2DScaleY {
@State message: string = 'Matrix2D ScaleY'
printMatrix(title, matrix) {
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
......@@ -85,7 +85,7 @@ struct Matrix2DScaleY {
.fontWeight(FontWeight.Bold)
Button("Set scaleY")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
let matrix : Matrix2D = new Matrix2D()
matrix.scaleY = 1
this.printMatrix(this.message, matrix)
})
......@@ -106,7 +106,7 @@ struct Matrix2DScaleY {
struct Matrix2DRotateX {
@State message: string = 'Matrix2D RotateX'
printMatrix(title, matrix) {
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
......@@ -120,7 +120,7 @@ struct Matrix2DRotateX {
.fontWeight(FontWeight.Bold)
Button("Set rotateX")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
let matrix : Matrix2D = new Matrix2D()
matrix.rotateX = Math.sin(45 / Math.PI)
this.printMatrix(this.message, matrix)
})
......@@ -141,7 +141,7 @@ struct Matrix2DRotateX {
struct Matrix2DRotateY {
@State message: string = 'Matrix2D RotateY'
printMatrix(title, matrix) {
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
......@@ -155,7 +155,7 @@ struct Matrix2DRotateY {
.fontWeight(FontWeight.Bold)
Button("Set rotateY")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
let matrix : Matrix2D = new Matrix2D()
matrix.rotateY = Math.cos(45 / Math.PI)
this.printMatrix(this.message, matrix)
})
......@@ -176,7 +176,7 @@ struct Matrix2DRotateY {
struct Matrix2DTranslateX {
@State message: string = 'Matrix2D TranslateX'
printMatrix(title, matrix) {
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
......@@ -190,7 +190,7 @@ struct Matrix2DTranslateX {
.fontWeight(FontWeight.Bold)
Button("Set translateX")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
let matrix : Matrix2D = new Matrix2D()
matrix.translateX = 10
this.printMatrix(this.message, matrix)
})
......@@ -211,7 +211,7 @@ struct Matrix2DTranslateX {
struct Matrix2DTranslateY {
@State message: string = 'Matrix2D TranslateY'
printMatrix(title, matrix) {
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
......@@ -225,7 +225,7 @@ struct Matrix2DTranslateY {
.fontWeight(FontWeight.Bold)
Button("Set translateY")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
let matrix : Matrix2D = new Matrix2D()
matrix.translateY = 10
this.printMatrix(this.message, matrix)
})
......@@ -262,7 +262,7 @@ identity(): Matrix2D
struct Matrix2DIdentity {
@State message: string = 'Matrix2D Identity'
printMatrix(title, matrix) {
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
......@@ -276,7 +276,7 @@ struct Matrix2DIdentity {
.fontWeight(FontWeight.Bold)
Button("matrix identity")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
let matrix : Matrix2D = new Matrix2D()
matrix = matrix.identity()
this.printMatrix(this.message, matrix)
})
......@@ -311,7 +311,7 @@ invert(): Matrix2D
struct Matrix2DInvert {
@State message: string = 'Matrix2D Invert'
printMatrix(title, matrix) {
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
......@@ -325,7 +325,7 @@ struct Matrix2DInvert {
.fontWeight(FontWeight.Bold)
Button("matrix invert")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
let matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 2
matrix.scaleY = 1
matrix.rotateX = 0
......@@ -374,7 +374,7 @@ multiply(other?: Matrix2D): Matrix2D
struct Matrix2DMultiply {
@State message: string = 'Matrix2D Multiply'
printMatrix(title, matrix) {
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
......@@ -388,14 +388,14 @@ struct Matrix2DMultiply {
.fontWeight(FontWeight.Bold)
Button("matrix multiply")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
let matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 0
matrix.translateY = 0
var other: Matrix2D = new Matrix2D()
let other: Matrix2D = new Matrix2D()
other.scaleX = 2
other.scaleY = 2
other.rotateX = 0
......@@ -445,7 +445,7 @@ rotate(rx?: number, ry?: number): Matrix2D
struct Matrix2DRotate {
@State message: string = 'Matrix2D Rotate'
printMatrix(title, matrix) {
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
......@@ -459,7 +459,7 @@ struct Matrix2DRotate {
.fontWeight(FontWeight.Bold)
Button("matrix rotate")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
let matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
......@@ -508,7 +508,7 @@ rotate(degree: number, rx?: number, ry?: number): Matrix2D
struct Matrix2DRotate {
@State message: string = 'Matrix2D Rotate'
printMatrix(title, matrix) {
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
......@@ -522,7 +522,7 @@ struct Matrix2DRotate {
.fontWeight(FontWeight.Bold)
Button("matrix rotate")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
let matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
......@@ -570,7 +570,7 @@ translate(tx?: number, ty?: number): Matrix2D
struct Matrix2DTranslate {
@State message: string = 'Matrix2D Translate'
printMatrix(title, matrix) {
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
......@@ -584,7 +584,7 @@ struct Matrix2DTranslate {
.fontWeight(FontWeight.Bold)
Button("matrix translate")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
let matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
......@@ -632,7 +632,7 @@ scale(sx?: number, sy?: number): Matrix2D
struct Matrix2DScale {
@State message: string = 'Matrix2D Scale'
printMatrix(title, matrix) {
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
......@@ -646,7 +646,7 @@ struct Matrix2DScale {
.fontWeight(FontWeight.Bold)
Button("matrix scale")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
let matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
......
zh-cn/application-dev/reference/arkui-ts/ts-components-offscreencanvas.md
浏览文件 @ 021b606d
......@@ -55,10 +55,10 @@ struct OffscreenCanvasPage {
.borderColor('#00FF00')
.backgroundColor('#FFFFFF')
.onReady(() => {
var offContext = this.offCanvas.getContext("2d", this.settings)
let offContext = this.offCanvas.getContext("2d", this.settings)
offContext.fillStyle = '#CDCDCD'
offContext.fillRect(0, 0, this.offCanvas.width, 150)
var image = this.offCanvas.transferToImageBitmap()
let image = this.offCanvas.transferToImageBitmap()
this.context.setTransform(1, 0, 0, 1, 50, 200)
this.context.transferFromImageBitmap(image)
})
......@@ -91,10 +91,10 @@ struct OffscreenCanvasPage {
.borderColor('#00FF00')
.backgroundColor('#FFFFFF')
.onReady(() => {
var offContext = this.offCanvas.getContext("2d", this.settings)
let offContext = this.offCanvas.getContext("2d", this.settings)
offContext.fillStyle = '#CDCDCD'
offContext.fillRect(0, 0, 100, this.offCanvas.height)
var image = this.offCanvas.transferToImageBitmap()
let image = this.offCanvas.transferToImageBitmap()
this.context.setTransform(1, 0, 0, 1, 50, 200)
this.context.transferFromImageBitmap(image)
})
......@@ -142,13 +142,13 @@ struct OffscreenCanvasPage {
.borderColor('#00FF00')
.backgroundColor('#FFFFFF')
.onReady(() => {
var offContext = this.offCanvas.getContext("2d", this.settings)
let offContext = this.offCanvas.getContext("2d", this.settings)
offContext.fillStyle = '#CDCDCD'
offContext.fillRect(0, 0, 300, 500)
offContext.fillStyle = '#000000'
offContext.font = '70px serif bold'
offContext.fillText("Offscreen : Hello World!", 20, 60)
var image = this.offCanvas.transferToImageBitmap()
let image = this.offCanvas.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
})
}
......@@ -197,7 +197,7 @@ struct OffscreenCanvasExamplePage {
.height('100%')
.backgroundColor('#FFFFFF')
.onReady(() => {
var offContext = this.offscreenCanvas.getContext("2d", this.settings)
let offContext = this.offscreenCanvas.getContext("2d", this.settings)
offContext.font = '70px sans-serif'
offContext.fillText("Offscreen : Hello World!", 20, 60)
offContext.fillStyle = "#0000ff"
......@@ -217,7 +217,7 @@ struct OffscreenCanvasExamplePage {
offContext.stroke()
offContext.fillStyle = '#FF00FF'
offContext.fillRect(100, 100, 60, 60)
var imageData = this.offscreenCanvas.transferToImageBitmap()
let imageData = this.offscreenCanvas.transferToImageBitmap()
this.context.transferFromImageBitmap(imageData)
})
}.width('100%').height('100%')
......
zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
浏览文件 @ 021b606d
......@@ -86,7 +86,7 @@ struct AlphabetIndexerSample {
Stack({ alignContent: Alignment.Start }) {
Row() {
List({ space: 20, initialIndex: 0 }) {
ForEach(this.arrayA, (item) => {
ForEach(this.arrayA, (item: string) => {
ListItem() {
Text(item)
.width('80%')
......@@ -94,9 +94,9 @@ struct AlphabetIndexerSample {
.fontSize(30)
.textAlign(TextAlign.Center)
}.editable(true)
}, item => item)
}, (item: string) => item)
ForEach(this.arrayB, (item) => {
ForEach(this.arrayB, (item: string) => {
ListItem() {
Text(item)
.width('80%')
......@@ -104,9 +104,9 @@ struct AlphabetIndexerSample {
.fontSize(30)
.textAlign(TextAlign.Center)
}.editable(true)
}, item => item)
}, (item: string) => item)
ForEach(this.arrayC, (item) => {
ForEach(this.arrayC, (item: string) => {
ListItem() {
Text(item)
.width('80%')
......@@ -114,9 +114,9 @@ struct AlphabetIndexerSample {
.fontSize(30)
.textAlign(TextAlign.Center)
}.editable(true)
}, item => item)
}, (item: string) => item)
ForEach(this.arrayL, (item) => {
ForEach(this.arrayL, (item: string) => {
ListItem() {
Text(item)
.width('80%')
......@@ -124,7 +124,7 @@ struct AlphabetIndexerSample {
.fontSize(30)
.textAlign(TextAlign.Center)
}.editable(true)
}, item => item)
}, (item: string) => item)
}
.width('50%')
.height('100%')
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或