diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-animator.md b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-animator.md index 81e08630864c13e55f3f79c4add7fd28807b74cb..86b57fc066d2ba3aa7a244b3e4f8e78e818d96a2 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-animator.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-animator.md @@ -439,7 +439,6 @@ createAnimator\(options\[...\]\): void ``` // js - import Animator from "@ohos.animator"; export default { data : { divWidth: 200, @@ -455,7 +454,7 @@ createAnimator\(options\[...\]\): void begin: 200.0, end: 400.0 }; - this.animator = Animator.createAnimator(options); + this.animator = animator.createAnimator(options); }, Show() { var options1 = { diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-app-context.md b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-app-context.md index 201556ce619453520e8fb4a15fbd48108c5d89fd..65a177cbc072f349b6395d11ae53a5fd7d4659b1 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-app-context.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-app-context.md @@ -62,9 +62,12 @@ getInfo\(\): <[AppResponse](#t3e93239d9b134b80957bcdd4acb05291)\> - 示例 ``` - - var info = app.getInfo(); - console.log(JSON.stringify(info)); + export default { + getInfo(){ + var info = app.getInfo(); + console.log(JSON.stringify(info)); + } + } ``` @@ -77,8 +80,10 @@ terminate\(\): void - 示例 ``` - - app.terminate(); + export default { + terminate(){ + app.terminate(); + }} ``` diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-configuration.md b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-configuration.md index 6b0aa3826a59574a7d20fdb88958182797b5b6a8..8f590bf1a2ca171aa3080c3ce4fa7d2aaad72438 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-configuration.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-configuration.md @@ -65,9 +65,12 @@ getLocale\(\): <[LocaleResponse](#table1544853546)\> - 示例 ``` - - const localeInfo = configuration.getLocale(); - console.info(localeInfo.language); + export default { + getLocale() { + const localeInfo = configuration.getLocale(); + console.info(localeInfo.language); + } + } ``` diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-logs.md b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-logs.md index 8b172bec109982ffc628e3bc37862f3691096b5a..1b26f76e3b16fe85acf4b609d7f69acd6dfcedcb 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-logs.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-logs.md @@ -171,12 +171,15 @@ error\(message: string\): void ## 示例 ``` - -var versionCode = 1; -console.info('Hello World. The current version code is ' + versionCode); -console.log(`versionCode: ${versionCode}`) -// 以下写法从API Version 6开始支持 -console.log('versionCode:%d.', versionCode); +export default { + clickConsole(){ + var versionCode = 1; + console.info('Hello World. The current version code is ' + versionCode); + console.log(`versionCode: ${versionCode}`); + // 以下写法从API Version 6开始支持 + console.log('versionCode:%d.', versionCode); + } +} ``` 在DevEco Studio的底部，切换到“HiLog”窗口。选择当前的设备及进程，日志级别选择Info，搜索内容设置为“Hello World”。此时窗口仅显示符合条件的日志，效果如图所示： diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-pop-up.md b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-pop-up.md index 82706369ec346547864cc2200ff1a24616597c32..4ac34ca0b8a6348ba58752a14643f5bb8644751c 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-pop-up.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-pop-up.md @@ -66,11 +66,14 @@ showToast\(Object\): void - 示例 ``` - - prompt.showToast({ - message: 'Message Info', - duration: 2000, - }); + export default { + showToast() { + prompt.showToast({ + message: 'Message Info', + duration: 2000, + }); + } + } ``` @@ -174,23 +177,26 @@ showDialog\(\): void - 示例 ``` - - prompt.showDialog({ - title: 'Title Info', - message: 'Message Info', - buttons: [ - { - text: 'button', - color: '#666666', - }, - ], - success: function(data) { - console.log('dialog success callback，click button : ' + data.index); - }, - cancel: function() { - console.log('dialog cancel callback'); - }, - }); + export default { + showDialog() { + prompt.showDialog({ + title: 'Title Info', + message: 'Message Info', + buttons: [ + { + text: 'button', + color: '#666666', + }, + ], + success: function(data) { + console.log('dialog success callback，click button : ' + data.index); + }, + cancel: function() { + console.log('dialog cancel callback'); + }, + }); + } + } ``` @@ -285,26 +291,29 @@ showActionMenu\(Object\): void - 示例 ``` - - prompt.showActionMenu({ - title: 'Title Info', - buttons: [ - { - text: 'item1', - color: '#666666', - }, - { - text: 'item2', - color: '#000000', - }, - ], - success: function(data) { - console.log('dialog success callback，click button : ' + data.tapIndex); - }, - fail: function(data) { - console.log('dialog fail callback' + data.errMsg); - }, - }); + export default { + showActionMenu() { + prompt.showActionMenu({ + title: 'Title Info', + buttons: [ + { + text: 'item1', + color: '#666666', + }, + { + text: 'item2', + color: '#000000', + }, + ], + success: function(data) { + console.log('dialog success callback，click button : ' + data.tapIndex); + }, + fail: function(data) { + console.log('dialog fail callback' + data.errMsg); + }, + }); + } + } ``` diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-routes.md b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-routes.md index 8c933dc7b27d3188053b540acca82943651b9177..bf73f7235583eba894a521780785cf98a7ef3f15 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-routes.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-routes.md @@ -194,21 +194,41 @@ back\(Object\): void ``` // index页面 - router.push({ - uri: 'pages/detail/detail', - }); + export default { + indexPushPage() { + router.push({ + uri: 'pages/detail/detail', + }); + } + } // detail页面 - router.push({ - uri: 'pages/mall/mall', - }); + export default { + detailPushPage() { + router.push({ + uri: 'pages/mall/mall', + }); + } + } // mall页面通过back，将返回detail页面 - router.back(); + export default { + mallBackPage() { + router.back(); + } + } // detail页面通过back，将返回index页面 - router.back(); + export default { + defaultBack() { + router.back(); + } + } // 通过back，返回到detail页面 - router.back({uri:'pages/detail/detail'}); + export default { + backToDetail() { + router.back({uri:'pages/detail/detail'}); + } + } ``` >![](../../public_sys-resources/icon-note.gif) **说明：** @@ -224,8 +244,11 @@ clear\(\): void - 示例 ``` - - router.clear(); + export default { + clearPage() { + router.clear(); + } + } ``` @@ -255,9 +278,12 @@ getLength\(\): string - 示例 ``` - - var size = router.getLength(); - console.log('pages stack size = ' + size); + export default { + getLength() { + var size = router.getLength(); + console.log('pages stack size = ' + size); + } + } ``` @@ -309,11 +335,14 @@ getState\(\): <[RouterState](#tf9e3eb9ef0aa4d9880f996fe6afa6d1b)\> - 示例 ``` - - var page = router.getState(); - console.log('current index = ' + page.index); - console.log('current name = ' + page.name); - console.log('current path = ' + page.path); + export default { + getState() { + var page = router.getState(); + console.log('current index = ' + page.index); + console.log('current name = ' + page.name); + console.log('current path = ' + page.path); + } + } ``` @@ -378,16 +407,19 @@ enableAlertBeforeBackPage\(Object\): void - 示例 ``` - - router.enableAlertBeforeBackPage({ - message: 'Message Info', - success: function() { - console.log('success'); - }, - fail: function() { - console.log('fail'); - }, - }); + export default { + enableAlertBeforeBackPage() { + router.enableAlertBeforeBackPage({ + message: 'Message Info', + success: function() { + console.log('success'); + }, + fail: function() { + console.log('fail'); + }, + }); + } + } ``` @@ -443,15 +475,18 @@ disableAlertBeforeBackPage\(Object\): void - 示例 ``` - - router.disableAlertBeforeBackPage({ - success: function() { - console.log('success'); - }, - fail: function() { - console.log('fail'); - }, - }); + export default { + disableAlertBeforeBackPage() { + router.disableAlertBeforeBackPage({ + success: function() { + console.log('success'); + }, + fail: function() { + console.log('fail'); + }, + }); + } + } ``` diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-timer.md b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-timer.md index d81c74fcbee4d5fa935e3dadb79cbec638b6b495..9a1375fc02533067d50250c5db602a069c88afb8 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-timer.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-timer.md @@ -60,15 +60,15 @@ setTimeout\(handler\[,delay\[,…args\]\]\): number - 返回值 -

类型

+ - - - @@ -77,10 +77,13 @@ setTimeout\(handler\[,delay\[,…args\]\]\): number - 示例 ``` - - var timeoutID = setTimeout(function() { - console.log('delay 1s'); - }, 1000); + export default { + setTimeOut() { + var timeoutID = setTimeout(function() { + console.log('delay 1s'); + }, 1000); + } + } ``` @@ -118,12 +121,14 @@ clearTimeout\(timeoutID: number\): void - 示例 ``` - - var timeoutID = setTimeout(function() { - console.log('do after 1s delay.'); - }, 1000); - - clearTimeout(timeoutID); + export default { + clearTimeOut() { + var timeoutID = setTimeout(function() { + console.log('do after 1s delay.'); + }, 1000); + clearTimeout(timeoutID); + } + } ``` @@ -196,10 +201,13 @@ setInterval\(handler\[, delay\[, ...args\]\]\): number - 示例 ``` - - var intervalID = setInterval(function() { - console.log('do very 1s.'); - }, 1000); + export default { + setInterval() { + var intervalID = setInterval(function() { + console.log('do very 1s.'); + }, 1000); + } + } ``` @@ -237,12 +245,14 @@ clearInterval\(intervalID: number\): void - 示例 ``` - - var intervalID = setInterval(function() { - console.log('do very 1s.'); - }, 1000); - - clearInterval(intervalID); + export default { + clearInterval() { + var intervalID = setInterval(function() { + console.log('do very 1s.'); + }, 1000); + clearInterval(intervalID); + } + } ``` diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/000000-3.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/000000-5.png similarity index 100% rename from zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/000000-3.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/000000-5.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001198530395.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-2.png similarity index 100% rename from zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001198530395.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-2.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-1.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-3.gif similarity index 100% rename from zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-1.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-3.gif diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/11-1.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/11-1.gif new file mode 100644 index 0000000000000000000000000000000000000000..7ca939d4de4d330dea962b991362b41ef0aacba9 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/11-1.gif differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/12.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/12.gif new file mode 100644 index 0000000000000000000000000000000000000000..561e823f7a9eb432e2aedbbf84637f8be40b0337 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/12.gif differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/2-2.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/2-4.gif similarity index 100% rename from zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/2-2.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/2-4.gif diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/44.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/44.gif new file mode 100644 index 0000000000000000000000000000000000000000..483d53003cc3be451c2c2962d60256b293aee428 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/44.gif differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/SVID_20210301_193525_1.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/SVID_20210301_193525_1.gif deleted file mode 100644 index 9f4b3be2a876397f9d73f512e22d922fef20eff3..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/SVID_20210301_193525_1.gif and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001152773860.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/c3.png similarity index 100% rename from zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001152773860.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/c3.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slategray-4.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slategray-6.png similarity index 100% rename from zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slategray-4.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slategray-6.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001150368628.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001150368628.png deleted file mode 100644 index 80ea0c9b9a321e061224884976545e6a9fe04196..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001150368628.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001181458721.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001178875308.png similarity index 100% rename from zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001181458721.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001178875308.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001135171488.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001179035242.png similarity index 100% rename from zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001135171488.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001179035242.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001181449919.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001224354967.png similarity index 100% rename from zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001181449919.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001224354967.png diff --git "a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/\346\215\225\350\216\267.png" "b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/\346\215\225\350\216\267.png" new file mode 100644 index 0000000000000000000000000000000000000000..2ed837e111c3ac1ba1eafb5b28da581ef4de5d22 Binary files /dev/null and "b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/\346\215\225\350\216\267.png" differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-appendix-types.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-appendix-types.md index d3bbd07fb3a78e8ce0570849c2719e1a73010151..7328c141b88f9c663459aaa9634d4e7c402ea67b 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-appendix-types.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-appendix-types.md @@ -118,7 +118,7 @@ - - - - - @@ -243,11 +243,11 @@ - - - @@ -256,11 +256,11 @@ - - - @@ -269,11 +269,11 @@ - - - - - - - - - @@ -937,17 +937,17 @@ 除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： -

类型

说明

+

说明

number

+

number

timeout定时器的ID。

+

timeout定时器的ID。

#000000

+

blanchedalmond

@@ -993,7 +993,7 @@

#708090

+

snow

diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-button.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-button.md index 4eca5ccf03afc1e220a625687390efe9123c55c0..3a54e3a64126b6e99924089ef51d03048bde1419 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-button.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-button.md @@ -393,14 +393,14 @@ // xxx.js export default { data: { - progress: 5, + count: 5, downloadText: "Download" }, progress(e) { - this.progress += 10; - this.downloadText = this.progress + "%"; - this.$element('download-btn').setProgress({ progress: this.progress }); - if (this.progress >= 100) { + this.count+= 10; + this.downloadText = this.count+ "%"; + this.$element('download-btn').setProgress({ progress: this.count}); + if (this.count>= 100) { this.downloadText = "Done"; } } diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-chart.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-chart.md index 67c9c8e63a23fd878b0245f62454193e2488de20..60d22aeea225cfc661a2fe0af97bdd1b6e041bd2 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-chart.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-chart.md @@ -231,11 +231,11 @@

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

number

0

+

0

否

+

否

轴的最小值。

+

轴的最小值。

说明：

仅线形图支持负数。

number

100

+

100

否

+

否

轴的最大值。

+

轴的最大值。

说明：

仅线形图支持负数。

number

10

+

10

否

+

否

轴显示的刻度数量。

+

轴显示的刻度数量。

说明：

仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。

在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。

@@ -283,22 +283,22 @@

boolean

false

+

false

否

+

否

是否显示轴。

+

是否显示轴。

color

<color>

#c0c0c0

+

#c0c0c0

否

+

否

轴颜色。

+

轴颜色。

方法

+ - - - - + + + + + + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-events.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-events.md index 704c9f3b77df0241da2dd94d7f7734eebac14b23..10f52594e1d6290e65c522e7a08e5c5778933798 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-events.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-events.md @@ -388,7 +388,7 @@

方法

参数

+

参数

描述

append

+

append

{

+

{

serial: number, // 设置要更新的线形图数据下标

data: Array<number>, // 设置新增的数据

}

diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image.md index 0c2e0d6189891f08cbe7fd4c13be53680ae53c19..2c6fc5216f99b44d18df2647567fa6a8382f1e1b 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image.md @@ -202,7 +202,7 @@ ```
- + -
``` ``` diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-piece.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-piece.md index 5e597d4f8f420692b17ead24ea5389cd5da38703..fc9a08fe4a14c9653970b5ed28945881ec5fac83 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-piece.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-piece.md @@ -100,12 +100,22 @@ ``` -
- - +
+ +
``` +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + align-items: center; + justify-content: center; +} +``` + ``` // xxx.js export default { @@ -119,5 +129,5 @@ export default { } ``` -![](figures/SVID_20210301_193525_1.gif) +![](figures/11-1.gif) diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-qrcode.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-qrcode.md index 5c33671af048ff6897278621e56950f1eec35fa6..2cc06af6065797af7377282a7854e0f95fdfdaf5 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-qrcode.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-qrcode.md @@ -113,6 +113,71 @@ ## 示例 ``` - + +
+ + Type + + Color + + Background Color + +
``` +``` +/* xxx.css */ +.container { + width: 100%; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; +} +.txt { + margin: 30px; + color: orangered; +} +select{ + margin-top: 40px; + margin-bottom: 40px; +} +``` + +``` +/* index.js */ +export default { + data: { + qr_type: 'rect', + qr_size: '300px', + qr_col: '#87ceeb', + col_list: ['#87ceeb','#fa8072','#da70d6','#80ff00ff','#00ff00ff'], + qr_bcol: '#f0ffff', + bcol_list: ['#f0ffff','#ffffe0','#d8bfd8'] + }, + settype(e) { + if (e.checked) { + this.qr_type = 'rect' + } else { + this.qr_type = 'circle' + } + }, + setvalue(e) { + this.qr_value = e.newValue + }, + setcol(e) { + this.qr_col = e.newValue + }, + setbcol(e) { + this.qr_bcol = e.newValue + } +} +``` + +![](figures/12.gif) + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvas.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvas.md index e7924a562c6b3de89e51482b9f20bb405ff7b352..7a063a973f1d278383d2693f82285c96ece1d7b1 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvas.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvas.md @@ -26,38 +26,142 @@ 除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

getContext

-

getContext ( type: '2d', attributes6+: { antialias: boolean } ) => CanvasRendering2dContext

-

获取canvas绘图上下文。调用方法如下两种6+：

-

var ctx = canvas.getContext(contextType);

-

var ctx = canvas.getContext(contextType, contextAttributes);

-

其中contextType为必填项，当前支持"2d"，contextAttributes为可选参数，当前仅支持配置是否开启抗锯齿功能，默认为关闭。

-

contextType对应的上下文对象如下：

-

"2d"：返回值为2D绘制对象，该对象提供具体的2D绘制操作。详见CanvasRenderingContext2D对象章节。

-

不支持在onInit和onReady中进行调用。

-

toDataURL6+

-

string type, number encoderOptions

-

生成一个包含图片展示的URL。

-
  • type：可选参数，用于指定图像格式，默认格式为image/png。
  • encoderOptions：在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。
-
+### getContext\(type: '2d', options?: ContextAttrOptions\) + +getContext \(type: '2d', options?: ContextAttrOptions\): CanvasRendering2dContext + +获取canvas绘图上下文。不支持在onInit和onReady中进行调用。 + +- 参数 + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

描述

+

type

+

string

+

是

+

可选值为'2d'，返回值为2D绘制对象，该对象提供具体的2D绘制操作。

+

options6+

+

ContextAttrOptions

+

否

+

具体表现为当前仅支持配置是否开启抗锯齿功能，默认为关闭。

+
+ + **表 1** ContextAttrOptions + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

antialias

+

boolean

+

是否开启抗锯齿功能，默认为false。

+
+ +- 返回值 + + + + + + + + + + +

类型

+

说明

+

CanvasRenderingContext2D

+

用于在画布组件上绘制矩形、文本、图片等。

+
+ + +### toDataURL6+ + +toDataURL\(type?: string, quality?: number\): string + +生成一个包含图片展示的URL。 + +- 参数 + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

描述

+

type

+

string

+

否

+

可选参数，用于指定图像格式，默认格式为image/png。

+

quality

+

number

+

否

+

在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。

+
+ +- 返回值 + + + + + + + + + + +

类型

+

说明

+

string

+

图像的URL地址。

+
+ ## 示例 diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasrenderingcontext2d.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasrenderingcontext2d.md index 90ef4151b83eca22df6e39043738e46b8dbec664..ab70e8675217afd2664686023193df33b40d4369 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasrenderingcontext2d.md @@ -513,7 +513,7 @@ ctx.fillRect(30, 30, 100, 100); ``` var img = new Image(); -img.src = 'common/image/huawei.jpg'; +img.src = 'common/image/example.jpg'; img.onload = function() { ctx.imageSmoothingEnabled = false; ctx.drawImage(img, 0, 0, 400, 200); diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-image.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-image.md index 57fcaecc1c7f0050c280f4df30dd395d359be0c4..283448a511b235f9a1437532d847135f5ac2f047 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-image.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-image.md @@ -80,7 +80,7 @@ ``` var ctx = this.$element('drawImage').getContext('2d'); var img = new Image(); -img.src = 'common/images/huawei.jpg'; +img.src = 'common/images/example.jpg'; img.onload = function() { console.log('Image load success'); ctx.drawImage(img, 0, 0, 360, 250); @@ -90,5 +90,5 @@ img.onerror = function() { }; ``` -![](figures/zh-cn_image_0000001198530395.png) +![](figures/1-2.png) diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-offscreencanvas.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-offscreencanvas.md index 0ea82bfafffc7fab634515abb98bd9c1d4ef0c00..4839d31b10459cfdf5299d80619ebec09b42fcfe 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-offscreencanvas.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-offscreencanvas.md @@ -35,43 +35,145 @@ ## 方法 - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

getContext

-

contextId: "2d", options?: CanvasRenderingContext2DSettings

-

调用方法如下两种：

-

var ctx = canvas.getContext(contextId);

-

var ctx = canvas.getContext(contextId, options);

-

其中contextId为必填项，当前仅支持"2d"，options为可选项，暂时不支持。

-

获取offscreen canvas绘图上下文，参数仅支持“2d”，返回值为2D绘制对象，该对象提供具体的2D绘制操作。详见OffscreenCanvasRenderingContext2D对象章节。

-

toDataURL

-

type?: string, quality?: number

-

生成一个包含图片展示的URL。

-
  • type：可选参数，用于指定图像格式，默认格式为image/png。
  • quality：在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。
-

transferToImageBitmap

-

无

-

从OffscreenCanvas最近渲染的图像创建一个 ImageBitmap 对象

-
+### getContext + +getContext\(type: string, options?: CanvasRenderingContext2DSettings\): OffscreenCanvasRenderingContext2D + +获取offscreen canvas绘图上下文，返回值为2D绘制对象。 + +- 参数 + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

描述

+

contextId

+

string

+

是

+

仅支持"2d"。

+

options

+

CanvasRenderingContext2DSettings

+

否

+

用于在离屏画布上进行绘制矩形、文本、图片等。

+
+ +- 返回值 + + + + + + + + + + +

类型

+

说明

+

OffscreenCanvasRenderingContext2D

+

用于在画布组件上绘制矩形、文本、图片等。

+
+ + +### toDataURL + +toDataURL\(type?: string, quality?:number\): + +生成一个包含图片展示的URL。 + +- 参数 + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

描述

+

type

+

string

+

否

+

可选参数，用于指定图像格式，默认格式为image/png。

+

quality

+

number

+

否

+

在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。

+
+ +- 返回值 + + + + + + + + + + +

类型

+

说明

+

string

+

图像的URL地址。

+
+ + +### transferToImageBitmap + +transferToImageBitmap\(\): ImageBitmap + +在离屏画布最近渲染的图像上创建一个ImageBitmap对象。 + +- 返回值 + + + + + + + + + + +

类型

+

说明

+

ImageBitmap

+

存储离屏画布上渲染的像素数据。

+
+ ## 示例 diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-attributes.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-attributes.md index 3f5927d0d93f09e1d418648f9790d67121db753a..3d73f5c0caaa18e1b307e1e0810da1f44cba3e15 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-attributes.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-attributes.md @@ -83,7 +83,21 @@

当前组件是否可以获取焦点。 当focusable设置为true时，组件可以响应焦点事件和按键事件。当组件额外设置了按键事件或者点击事件时，框架会设置该属性为true。

data-*6+

+

data

+

string

+

-

+

否

+

给当前组件设置data属性，进行相应的数据存储和读取。JS文件中：

+
  • 在事件回调中使用 e.target.attr.data 读取数据，e为事件回调函数入参。
  • 使用$element或者$refs获取DOM元素后，通过attr.data 进行访问。
+
说明：

从API Version 6 开始，建议使用data-*。

+
+

data-*6+

string
-**表 6** DragEvent对象属性列表\(继承BaseEvent\)7+\(Rich\) +**表 6** DragEvent对象属性列表\(继承BaseEvent\)7+

属性

diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-badge.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-badge.md index 3b6adb4e57e3366fb7beb7f821464892320d7392..ad2e7f024dd439cd6f8e01db896a56094521cc10 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-badge.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-badge.md @@ -193,10 +193,10 @@
- huawei + example - huawei + example
``` @@ -234,5 +234,5 @@ export default { } ``` -![](figures/zh-cn_image_0000001150368628.png) +![](figures/捕获.png) diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list-item.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list-item.md index cb3dfc1504453711ec30e0127073b950264f43b9..8a46fbcb110f025cbfe80a0ddf6876e98a82d6b5 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list-item.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list-item.md @@ -11,7 +11,7 @@ ## 子组件 -支持。 +支持单个子组件。 ## 属性 diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-slot.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-slot.md index c06026e572ade470cbb8c6a3439a89f61c7e9adf..d4310dd129fdec030edb69675c13398376195e1e 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-slot.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-slot.md @@ -48,7 +48,7 @@
插入第二个插槽中 - 插入第一个插槽中 + 插入第一个插槽中
``` diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-col.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-col.md index 684c959120c3ae752d4680b181d3b79b798a64a8..11f862e5d95e8ed2492fdea16d6af5597646dfa8 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-col.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-col.md @@ -302,3 +302,5 @@ export default { } ``` +![](figures/44.gif) + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-container.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-container.md index 0676cf588622003beecf62a9e8a4763e0bed0bae..cf008a31ce856b34085dfe85ff47b1c8a94cadfb 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-container.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-container.md @@ -1,6 +1,6 @@ # grid-container -栅格布局容器根节点，使用grid-row与gird-col进行栅格布局。 +栅格布局容器根节点，使用grid-row与grid-col进行栅格布局。 ## 权限列表 diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-media-video.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-media-video.md index ad219bdef770ba35888857396cea90db6959288b..932a679a158baa5a183a34fb125d4fc127f84120 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-media-video.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-media-video.md @@ -205,31 +205,31 @@ - - - - - - - - diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animate.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animate.md index 8cfd911e7f6ecfa1c6e23edf4a1837a1703a5414..687a36b170036531020910428e5fb7016ad0bf96 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animate.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animate.md @@ -221,7 +221,7 @@ ``` -![](figures/1-1.gif) +![](figures/1-3.gif) ``` diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatemotion.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatemotion.md index 2f134e3079d957584b9eabf9b5b04eb50a3dfdfd..d5d209d73694846ae56733bd558a9d1bcd479580 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatemotion.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatemotion.md @@ -90,5 +90,5 @@ ``` -![](figures/2-2.gif) +![](figures/2-4.gif) diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-js-tag.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-js-tag.md index 834f0a58f7231bb117b53e3c8f425684825cbc0e..822b3dabfe28418dc7d4b5ceed84887f106812da 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-js-tag.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-js-tag.md @@ -141,7 +141,7 @@ window用于定义与显示窗口相关的配置。对于屏幕适配问题， ``` { "app": { - "bundleName": "com.huawei.player", + "bundleName": "com.example.player", "version": { "code": 1, "name": "1.0" diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-offscreencanvasrenderingcontext2d.md index a8a40172a2ff3657dcda34c85daf4ab41b7d1f94..6c30391ab3b7e1c35591a641fdc6c00c65f37d43 100644 --- a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-offscreencanvasrenderingcontext2d.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-offscreencanvasrenderingcontext2d.md @@ -72,139 +72,238 @@ var bitmap = offscreen.transferToImageBitmap(); ctx.transferFromImageBitmap(bitmap); ``` -![](figures/zh-cn_image_0000001152773860.png) +![](figures/c3.png) ## 方法 除支持与CanvasRenderingContext2D对象相同的方法外，还支持如下方法： - -

名称

参数

+

参数

描述

+

描述

start

-

+

-

请求播放视频。

+

请求播放视频。

pause

-

+

-

请求暂停播放视频。

+

请求暂停播放视频。

setCurrentTime

{ currenttime: value }

+

{ currenttime: value }

指定视频播放的进度位置，单位为s。

+

指定视频播放的进度位置，单位为s。
- - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

isPointInPath

-

-

path?: Path2D, x: number, y: number

-

判断指定点是否在路径的区域内。

-

path：可选对象，指定用来判断的路径。若没有设置，则使用当前路径

-

x：待判断点的x轴坐标

-

y：待判断点的y轴坐标

-

isPointInStroke

-

path?: Path2D, x: number, y: number

-

判断指定点是否在路径的边缘线上。

-

path：可选对象，指定用来判断的路径。若没有设置，则使用当前路径

-

x：待判断点的x轴坐标

-

y：待判断点的y轴坐标

-

resetTransform

-

无

-

将当前变换重置为单位矩阵。

-
- -- isPointInPath示例 - -![](figures/zh-cn_image_0000001181449919.png) - -``` - -
- In path:{{textValue}} -
- -``` +### isPointInPath + +isPointInPath\(path?: Path2D, x: number, y: number\): boolean + +判断指定点是否在路径的区域内。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

描述

+

path

+

Path2D

+

否

+

可选对象，指定用来判断的路径。若没有设置，则使用当前路径。

+

x

+

number

+

是

+

待判断点的x轴坐标。

+

y

+

number

+

是

+

待判断点的y轴坐标。

+
+ +- 返回值 + + + + + + + + + + +

类型

+

说明

+

boolean

+

指定点是否在路径的区域内。

+
-``` -// xxx.js -export default { - data: { - textValue: 0 - }, - onShow(){ - var canvas = this.$refs.canvas.getContext('2d'); - var offscreen = new OffscreenCanvas(500,500); - var offscreenCanvasCtx = offscreen.getContext("2d"); - - offscreenCanvasCtx.rect(10, 10, 100, 100); - offscreenCanvasCtx.fill(); - this.textValue = offscreenCanvasCtx.isPointInPath(30, 70); +- 示例 - var bitmap = offscreen.transferToImageBitmap(); - canvas.transferFromImageBitmap(bitmap); - } -} -``` + ``` + +
+ In path:{{textValue}} +
+ + ``` + + ``` + // xxx.js + export default { + data: { + textValue: 0 + }, + onShow(){ + var canvas = this.$refs.canvas.getContext('2d'); + var offscreen = new OffscreenCanvas(500,500); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.rect(10, 10, 100, 100); + offscreenCanvasCtx.fill(); + this.textValue = offscreenCanvasCtx.isPointInPath(30, 70); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + } + } + ``` + + ![](figures/zh-cn_image_0000001224354967.png) + + +### isPointInStroke + +isPointInStroke\(path?: Path2D, x: number, y: number\): boolean + +判断指定点是否在路径的边缘线上。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

描述

+

path

+

Path2D

+

否

+

可选对象，指定用来判断的路径。若没有设置，则使用当前路径。

+

x

+

number

+

是

+

待判断点的x轴坐标。

+

y

+

number

+

是

+

待判断点的y轴坐标。

+
+ +- 返回值 + + + + + + + + + + +

类型

+

说明

+

boolean

+

指定点是否在路径的区域内。

+
-- isPointInStroke示例 +- 示例 -![](figures/zh-cn_image_0000001181458721.png) + ``` + +
+ In path:{{textValue}} +
+ + ``` + + ``` + // xxx.js + export default { + data: { + textValue: 0 + }, + onShow(){ + var canvas = this.$refs.canvas.getContext('2d'); + var offscreen = new OffscreenCanvas(500,500); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.rect(10, 10, 100, 100); + offscreenCanvasCtx.stroke(); + this.textValue = offscreenCanvasCtx.isPointInStroke(50, 10); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + } + } + ``` + + ![](figures/zh-cn_image_0000001178875308.png) + + +### resetTransform + +resetTransform\(\): void -``` - -
- In path:{{textValue}} -
- -``` +- 示例 -``` -// xxx.js -export default { - data: { - textValue: 0 - }, - onShow(){ + ``` var canvas = this.$refs.canvas.getContext('2d'); var offscreen = new OffscreenCanvas(500,500); var offscreenCanvasCtx = offscreen.getContext("2d"); - - offscreenCanvasCtx.rect(10, 10, 100, 100); - offscreenCanvasCtx.stroke(); - this.textValue = offscreenCanvasCtx.isPointInStroke(50, 10); - + + offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0); + offscreenCanvasCtx.fillStyle = 'gray'; + offscreenCanvasCtx.fillRect(40, 40, 50, 20); + offscreenCanvasCtx.fillRect(40, 90, 50, 20); + + // Non-skewed rectangles + offscreenCanvasCtx.resetTransform(); + offscreenCanvasCtx.fillStyle = 'red'; + offscreenCanvasCtx.fillRect(40, 40, 50, 20); + offscreenCanvasCtx.fillRect(40, 90, 50, 20); + var bitmap = offscreen.transferToImageBitmap(); canvas.transferFromImageBitmap(bitmap); - } -} -``` - -- resetTransform示例 + ``` -![](figures/zh-cn_image_0000001135171488.png) + ![](figures/zh-cn_image_0000001179035242.png) -``` -var canvas = this.$refs.canvas.getContext('2d'); -var offscreen = new OffscreenCanvas(500,500); -var offscreenCanvasCtx = offscreen.getContext("2d"); - -offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0); -offscreenCanvasCtx.fillStyle = 'gray'; -offscreenCanvasCtx.fillRect(40, 40, 50, 20); -offscreenCanvasCtx.fillRect(40, 90, 50, 20); - -// Non-skewed rectangles -offscreenCanvasCtx.resetTransform(); -offscreenCanvasCtx.fillStyle = 'red'; -offscreenCanvasCtx.fillRect(40, 40, 50, 20); -offscreenCanvasCtx.fillRect(40, 90, 50, 20); - -var bitmap = offscreen.transferToImageBitmap(); -canvas.transferFromImageBitmap(bitmap); -```