diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001167001464.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001167001464.png index 5113bc6bad4f88bc2558aae304394e00e107ce88..8f997a0b5c76b206acacaf8f689e55f73bbaf20a 100644 Binary files a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001167001464.png and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001167001464.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001178875308.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001178875308.png index c085790c6651bf041b772f58f5665d442caf6f4a..ff15fe644562b95b868829af17e7be0068097a75 100644 Binary files a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001178875308.png and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001178875308.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001179035242.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001179035242.png index c7311ac9226ca3c0a04cef9a51961424daf8a47a..2c2f496c7af6589057af1ed24d69f22dc8b7e2d2 100644 Binary files a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001179035242.png and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001179035242.png differ diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001224354967.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001224354967.png index 7469c1e329fc86f0ca7eec9374be7c2c03ae2d6b..ad3d9f57521f89bdcbab75649447319bee650fa1 100644 Binary files a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001224354967.png and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001224354967.png differ diff --git a/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md index 5cf4219ddc9e2b94cf19e0170f7056ac2af76032..107abc348c279c0639112f2c045b968226ad6cb2 100644 --- a/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md @@ -17,57 +17,57 @@ In addition to the attributes that are supported by **CanvasRenderingContext2D** | filter | string | Image filter.
Available options are as follows:
- **blur**: applies the Gaussian blur for the image.
- **brightness**: applies a linear multiplication to the image to make it look brighter or darker.
- **contrast**: adjusts the image contrast.
- **drop-shadow**: sets a shadow effect for the image.
- **grayscale**: converts the image to a grayscale image.
- **hue-rotate**: applies hue rotation to the image.
- **invert**: inverts the image.
- **opacity**: sets the image opacity.
- **saturate**: sets the image saturation.
- **sepia**: converts the image to sepia.| **Example** - ``` - -
- -
- ``` - - ``` - //xxx.js - export default { - onShow(){ - var ctx = this.$refs.canvasId.getContext('2d'); - var offscreen = new OffscreenCanvas(360, 500); - var offCanvas2 = offscreen.getContext("2d"); - var img = new Image(); - img.src = 'common/images/flower.jpg'; - offCanvas2.drawImage(img, 0, 0, 100, 100); - offCanvas2.filter = 'blur(5px)'; - offCanvas2.drawImage(img, 100, 0, 100, 100); - - offCanvas2.filter = 'grayscale(50%)'; - offCanvas2.drawImage(img, 200, 0, 100, 100); - - offCanvas2.filter = 'hue-rotate(90deg)'; - offCanvas2.drawImage(img, 0, 100, 100, 100); - - offCanvas2.filter = 'invert(100%)'; - offCanvas2.drawImage(img, 100, 100, 100, 100); - - offCanvas2.filter = 'drop-shadow(8px 8px 10px green)'; - offCanvas2.drawImage(img, 200, 100, 100, 100); - - offCanvas2.filter = 'brightness(0.4)'; - offCanvas2.drawImage(img, 0, 200, 100, 100); - - offCanvas2.filter = 'opacity(25%)'; - offCanvas2.drawImage(img, 100, 200, 100, 100); - - offCanvas2.filter = 'saturate(30%)'; - offCanvas2.drawImage(img, 200, 200, 100, 100); - - offCanvas2.filter = 'sepia(60%)'; - offCanvas2.drawImage(img, 0, 300, 100, 100); - - offCanvas2.filter = 'contrast(200%)'; - offCanvas2.drawImage(img, 100, 300, 100, 100); - var bitmap = offscreen.transferToImageBitmap(); - ctx.transferFromImageBitmap(bitmap); - } +``` + +
+ +
+``` + +``` +// xxx.js +export default { + onShow(){ + var ctx = this.$refs.canvasId.getContext('2d'); + var offscreen = new OffscreenCanvas(360, 500); + var offCanvas2 = offscreen.getContext("2d"); + var img = new Image(); + img.src = 'common/images/flower.jpg'; + offCanvas2.drawImage(img, 0, 0, 100, 100); + offCanvas2.filter = 'blur(5px)'; + offCanvas2.drawImage(img, 100, 0, 100, 100); + + offCanvas2.filter = 'grayscale(50%)'; + offCanvas2.drawImage(img, 200, 0, 100, 100); + + offCanvas2.filter = 'hue-rotate(90deg)'; + offCanvas2.drawImage(img, 0, 100, 100, 100); + + offCanvas2.filter = 'invert(100%)'; + offCanvas2.drawImage(img, 100, 100, 100, 100); + + offCanvas2.filter = 'drop-shadow(8px 8px 10px green)'; + offCanvas2.drawImage(img, 200, 100, 100, 100); + + offCanvas2.filter = 'brightness(0.4)'; + offCanvas2.drawImage(img, 0, 200, 100, 100); + + offCanvas2.filter = 'opacity(25%)'; + offCanvas2.drawImage(img, 100, 200, 100, 100); + + offCanvas2.filter = 'saturate(30%)'; + offCanvas2.drawImage(img, 200, 200, 100, 100); + + offCanvas2.filter = 'sepia(60%)'; + offCanvas2.drawImage(img, 0, 300, 100, 100); + + offCanvas2.filter = 'contrast(200%)'; + offCanvas2.drawImage(img, 100, 300, 100, 100); + var bitmap = offscreen.transferToImageBitmap(); + ctx.transferFromImageBitmap(bitmap); } - ``` +} +``` ## Methods @@ -93,34 +93,58 @@ Checks whether a specified point is in the path area. | boolean | Whether a specified point is in the path area.| **Example** - ``` - -
- In path:{{textValue}} +``` + +
+ 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); - } +
+``` + +``` +/* xxx.css */ +.container { + display: flex; + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} + +canvas { + width: 600px; + height: 600px; + background-color: #fdfdfd; + border: none; +} + +.textsize { + font-size: 40px; +} +``` + +``` +// 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); } - ``` +} +``` ![en-us_image_0000001224354967](figures/en-us_image_0000001224354967.png) @@ -143,34 +167,58 @@ Checks whether a specified point is on the edge line of a path. | boolean | Whether a specified point is in the path area.| **Example** - ``` - -
- In path:{{textValue}} +``` + +
+ In stroke:{{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); - } +
+``` + +``` +/* xxx.css */ +.container { + display: flex; + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} + +canvas { + width: 600px; + height: 600px; + background-color: #fdfdfd; + border: none; +} + +.textsize { + font-size: 40px; +} +``` + +``` +// 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); } - ``` +} +``` ![en-us_image_0000001178875308](figures/en-us_image_0000001178875308.png) @@ -179,40 +227,64 @@ Checks whether a specified point is on the edge line of a path. resetTransform(): void **Example** - ``` - -
- In path:{{textValue}} +``` + +
+ 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.transform(1, 0, 1.7, 1, 0, 0); - offscreenCanvasCtx.fillStyle = '#a9a9a9'; - offscreenCanvasCtx.fillRect(40, 40, 50, 20); - offscreenCanvasCtx.fillRect(40, 90, 50, 20); - - // Non-skewed rectangles - offscreenCanvasCtx.resetTransform(); - offscreenCanvasCtx.fillStyle = '#ff0000'; - offscreenCanvasCtx.fillRect(40, 40, 50, 20); - offscreenCanvasCtx.fillRect(40, 90, 50, 20); - - var bitmap = offscreen.transferToImageBitmap(); - canvas.transferFromImageBitmap(bitmap); - } - } - ``` +
+``` + +``` +/* xxx.css */ +.container { + display: flex; + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} + +canvas { + width: 600px; + height: 600px; + background-color: #fdfdfd; + border: none; +} + +.textsize { + font-size: 40px; +} +``` + +``` +// 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.transform(1, 0, 1.7, 1, 0, 0); + offscreenCanvasCtx.fillStyle = '#a9a9a9'; + offscreenCanvasCtx.fillRect(40, 40, 50, 20); + offscreenCanvasCtx.fillRect(40, 90, 50, 20); + + // Non-skewed rectangles + offscreenCanvasCtx.resetTransform(); + offscreenCanvasCtx.fillStyle = '#ff0000'; + offscreenCanvasCtx.fillRect(40, 40, 50, 20); + offscreenCanvasCtx.fillRect(40, 90, 50, 20); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + } +} +``` ![en-us_image_0000001179035242](figures/en-us_image_0000001179035242.png) diff --git a/en/application-dev/ui/ui-js-components-path2d.md b/en/application-dev/ui/ui-js-components-path2d.md index ff424ef6a67de07c75d7d0e4b429d9e630f42bc1..5d754ce6a2a1ca5babda7f86a7c4ed5ad2e1b9da 100644 --- a/en/application-dev/ui/ui-js-components-path2d.md +++ b/en/application-dev/ui/ui-js-components-path2d.md @@ -56,7 +56,7 @@ export default { path.closePath(); // Door path.moveTo(250, 450); - path.rect(250, 450, 350, 600); + path.rect(250, 450, 100, 600); path.closePath(); // Chimney path.moveTo(365, 250);