diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/ImageSmoothingQualityDemo.jpeg b/zh-cn/application-dev/reference/arkui-ts/figures/ImageSmoothingQualityDemo.jpeg new file mode 100755 index 0000000000000000000000000000000000000000..01ae362e6ae3e7df6dbd029ceed14e6838720e16 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/ImageSmoothingQualityDemo.jpeg differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/directionDemo.jpeg b/zh-cn/application-dev/reference/arkui-ts/figures/directionDemo.jpeg new file mode 100755 index 0000000000000000000000000000000000000000..0d98af05dcd866c23dcc9a15298b4fd67048504a Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/directionDemo.jpeg differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/filterDemo.jpeg b/zh-cn/application-dev/reference/arkui-ts/figures/filterDemo.jpeg new file mode 100755 index 0000000000000000000000000000000000000000..4f3321de2bd30afc4f4fa369d769aab4bb5d20a3 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/filterDemo.jpeg differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index 5c7b8bb5c29dfb5f6a1ea9f3eab024517a2a32c1..8064fe0a391ca043834bcee421be7345bd626188 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -59,6 +59,9 @@ RenderingContextSettings(antialias?: boolean) | [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。
默认值：true
从API version 9开始，该接口支持在ArkTS卡片中使用。 | | [height](#height) | number | 组件高度。
单位：vp
从API version 9开始，该接口支持在ArkTS卡片中使用。 | | [width](#width) | number | 组件宽度。
单位：vp
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| [imageSmoothingQuality](#imagesmoothingquality) |ImageSmoothingQuality | imageSmoothingEnabled为true时，用于设置图像平滑度。可选值为：
- 'low'：低画质
- 'medium'：中画质
- 'high'：高画质。
默认值：low
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| [direction](#direction) |CanvasDirection | 用于设置绘制文字时使用的文字方向。可选值为：
- 'inherit'：继承canvas组件已设定的文本方向
- 'ltr'：从左往右
- 'rtl'：从右往左。
默认值：inherit
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| [filter](#filter) |string | 用于设置图像的滤镜。支持的滤镜效果如下：
- 'none': 无滤镜效果
- 'blur'：给图像设置高斯模糊
- 'brightness'：给图片应用一种线性乘法，使其看起来更亮或更暗
- 'contrast'：调整图像的对比度
- 'grayscale'：将图像转换为灰度图像
- 'hue-rotate'：给图像应用色相旋转
- 'invert'：反转输入图像
- 'opacity'：转化图像的透明程度
- 'saturate'：转换图像饱和度
- 'sepia'：将图像转换为深褐色
默认值：'none'
从API version 9开始，该接口支持在ArkTS卡片中使用。 | > **说明：** > @@ -1803,7 +1806,7 @@ clip(path: Path2D, fillRule?: CanvasFillRule): void filter(filter: string): void -为Canvas图形设置各类滤镜效果。该接口为空接口。 +为Canvas图形设置各类滤镜效果。 从API version 9开始，该接口支持在ArkTS卡片中使用。 @@ -1811,7 +1814,68 @@ filter(filter: string): void | 参数 | 类型 | 必填 | 默认值 | 说明 | | ------ | ------ | ---- | ---- | ------------ | -| filter | string | 是 | - | 接受各类滤镜效果的函数。 | +| filter | string | 是 | - | 接受各类滤镜效果的函数。支持的滤镜效果如下：
- 'none': 无滤镜效果
- 'blur'：给图像设置高斯模糊
- 'brightness'：给图片应用一种线性乘法，使其看起来更亮或更暗
- 'contrast'：调整图像的对比度
- 'grayscale'：将图像转换为灰度图像
- 'hue-rotate'：给图像应用色相旋转
- 'invert'：反转输入图像
- 'opacity'：转化图像的透明程度
- 'saturate'：转换图像饱和度
- 'sepia'：将图像转换为深褐色
默认值：'none' | + +**示例：** +```ts + // xxx.ets + @Entry + @Component + struct FilterDemo { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + let ctx = this.context + let img = this.img + + ctx.drawImage(img, 0, 0, 100, 100); + + ctx.filter = 'grayscale(50%)'; + ctx.drawImage(img, 100, 0, 100, 100); + + ctx.filter = 'sepia(60%)'; + ctx.drawImage(img, 200, 0, 100, 100); + + ctx.filter = 'saturate(30%)'; + ctx.drawImage(img, 0, 100, 100, 100); + + ctx.filter = 'hue-rotate(90degree)'; + ctx.drawImage(img, 100, 100, 100, 100); + + ctx.filter = 'invert(100%)'; + ctx.drawImage(img, 200, 100, 100, 100); + + ctx.filter = 'opacity(25%)'; + ctx.drawImage(img, 0, 200, 100, 100); + + ctx.filter = 'brightness(0.4)'; + ctx.drawImage(img, 100, 200, 100, 100); + + ctx.filter = 'contrast(200%)'; + ctx.drawImage(img, 200, 200, 100, 100); + + ctx.filter = 'blur(5px)'; + ctx.drawImage(img, 0, 300, 100, 100); + + let result = ctx.toDataURL() + console.info(result) + }) + } + .width('100%') + .height('100%') + } + } +``` + +![filterDemo](figures/filterDemo.jpeg) ### getTransform @@ -1836,10 +1900,42 @@ resetTransform(): void direction(direction: CanvasDirection): void -绘制文本时，描述当前文本方向的属性。该接口为空接口。 +绘制文本时，描述当前文本方向的属性。 从API version 9开始，该接口支持在ArkTS卡片中使用。 +**示例：** +```ts + // xxx.ets + @Entry + @Component + struct DirectionDemo { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + let ctx = this.context + ctx.font = '48px serif'; + ctx.textAlign = 'start' + ctx.fillText("Hi ltr!", 200, 50); + + ctx.direction = "rtl"; + ctx.fillText("Hi rtl!", 200, 100); + }) + } + .width('100%') + .height('100%') + } + } +``` + +![directionDemo](figures/directionDemo.jpeg) ### rotate @@ -2433,7 +2529,7 @@ getLineDash(): number[] imageSmoothingQuality(quality: imageSmoothingQuality) -用于设置图像平滑度。该接口为空接口。 +用于设置图像平滑度。 从API version 9开始，该接口支持在ArkTS卡片中使用。 @@ -2441,9 +2537,38 @@ imageSmoothingQuality(quality: imageSmoothingQuality) | 参数 | 类型 | 描述 | | ------- | --------------------- | ---------------------------------------- | -| quality | imageSmoothingQuality | 支持如下三种类型：'low', 'medium', 'high'。 | +| quality | imageSmoothingQuality | 支持如下三种类型：
- 'low'：低画质
- 'medium'：中画质
- 'high'：高画质 | +**示例：** +```ts + // xxx.ets + @Entry + @Component + struct ImageSmoothingQualityDemo { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + let ctx = this.context + ctx.imageSmoothingEnabled = true + ctx.imageSmoothingQuality = 'high' + ctx.drawImage(this.img, 0, 0, 400, 200) + }) + } + .width('100%') + .height('100%') + } + } +``` +![ImageSmoothingQualityDemo](figures/ImageSmoothingQualityDemo.jpeg) ### transferFromImageBitmap diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md index 2890d2890e202d12c13167f04919af42292dbf9a..7fe21a0d935662f4bba21710a553216f5b7df001 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md @@ -65,6 +65,6 @@ ImageBitmap(src: string) close() -释放ImageBitmap对象相关联的所有图形资源。该接口为空接口。 +释放ImageBitmap对象相关联的所有图形资源，并讲ImageBitmap对象的宽高置为0。 从API version 9开始，该接口支持在ArkTS卡片中使用。 \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md index 74237f64c09bd6a14b96e96437ab5cacdc03583d..047b4c783b6802414d20a3c2bfdc84fee13ba3b5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md @@ -44,6 +44,9 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, settings?: Rend | [shadowOffsetX](#shadowoffsetx) | number | 设置绘制阴影时和原有对象的水平偏移值。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | | [shadowOffsetY](#shadowoffsety) | number | 设置绘制阴影时和原有对象的垂直偏移值。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | | [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。
- 默认值：true。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| [imageSmoothingQuality](#imagesmoothingquality) |ImageSmoothingQuality | imageSmoothingEnabled为true时，用于设置图像平滑度。可选值为：
- 'low'：低画质
- 'medium'：中画质
- 'high'：高画质。
默认值：low
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| [direction](#direction) |CanvasDirection | 用于设置绘制文字时使用的文字方向。可选值为：
- 'inherit'：继承canvas组件已设定的文本方向
- 'ltr'：从左往右
- 'rtl'：从右往左。
默认值：inherit
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| [filter](#filter) |string | 用于设置图像的滤镜。支持的滤镜效果如下：
- 'none': 无滤镜效果
- 'blur'：给图像设置高斯模糊
- 'brightness'：给图片应用一种线性乘法，使其看起来更亮或更暗
- 'contrast'：调整图像的对比度
- 'grayscale'：将图像转换为灰度图像
- 'hue-rotate'：给图像应用色相旋转
- 'invert'：反转输入图像
- 'opacity'：转化图像的透明程度
- 'saturate'：转换图像饱和度
- 'sepia'：将图像转换为深褐色
默认值：'none'
从API version 9开始，该接口支持在ArkTS卡片中使用。 | > **说明：** > fillStyle、shadowColor与 strokeStyle 中string类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。 @@ -1841,7 +1844,7 @@ clip(path:Path2D, fillRule?: CanvasFillRule): void filter(filter: string): void -为Canvas图形设置各类滤镜效果。该接口为空接口。 +为Canvas图形设置各类滤镜效果。 从API version 9开始，该接口支持在ArkTS卡片中使用。 @@ -1849,7 +1852,69 @@ filter(filter: string): void | 参数 | 类型 | 必填 | 默认值 | 说明 | | ------ | ------ | ---- | ---- | ------------ | -| filter | string | 是 | - | 接受各类滤镜效果的函数。 | +| filter | string | 是 | - | 接受各类滤镜效果的函数。支持的滤镜效果如下：
- 'none': 无滤镜效果
- 'blur'：给图像设置高斯模糊
- 'brightness'：给图片应用一种线性乘法，使其看起来更亮或更暗
- 'contrast'：调整图像的对比度
- 'grayscale'：将图像转换为灰度图像
- 'hue-rotate'：给图像应用色相旋转
- 'invert'：反转输入图像
- 'opacity'：转化图像的透明程度
- 'saturate'：转换图像饱和度
- 'sepia'：将图像转换为深褐色
默认值：'none' | + +**示例：** +```ts + // xxx.ets + @Entry + @Component + struct FilterDemoOff { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + let offctx = this.offContext + let img = this.img + + offctx.drawImage(img, 0, 0, 100, 100); + + offctx.filter = 'grayscale(50%)'; + offctx.drawImage(img, 100, 0, 100, 100); + + offctx.filter = 'sepia(60%)'; + offctx.drawImage(img, 200, 0, 100, 100); + + offctx.filter = 'saturate(30%)'; + offctx.drawImage(img, 0, 100, 100, 100); + + offctx.filter = 'hue-rotate(90degree)'; + offctx.drawImage(img, 100, 100, 100, 100); + + offctx.filter = 'invert(100%)'; + offctx.drawImage(img, 200, 100, 100, 100); + + offctx.filter = 'opacity(25%)'; + offctx.drawImage(img, 0, 200, 100, 100); + + offctx.filter = 'brightness(0.4)'; + offctx.drawImage(img, 100, 200, 100, 100); + + offctx.filter = 'contrast(200%)'; + offctx.drawImage(img, 200, 200, 100, 100); + + offctx.filter = 'blur(5px)'; + offctx.drawImage(img, 0, 300, 100, 100); + + var image = offctx.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } +``` + +![filterDemo](figures/filterDemo.jpeg) ### getTransform @@ -1874,10 +1939,48 @@ resetTransform(): void direction(direction: CanvasDirection): void -绘制文本时，描述当前文本方向的属性。该接口为空接口。 +绘制文本时，描述当前文本方向的属性。 从API version 9开始，该接口支持在ArkTS卡片中使用。 +**示例：** +```ts + // xxx.ets + @Entry + @Component + struct DirectionDemoOff { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + let offctx = this.offContext + offctx.font = '48px serif'; + offctx.textAlign = 'start' + offctx.fillText("Hi ltr!", 200, 50); + + offctx.direction = "rtl"; + offctx.fillText("Hi rtl!", 200, 100); + + var image = offctx.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } +``` + +![directionDemo](figures/directionDemo.jpeg) + + ### rotate @@ -2557,7 +2660,7 @@ toDataURL(type?: string, quality?: number): string imageSmoothingQuality(quality: imageSmoothingQuality) -用于设置图像平滑度。该接口为空接口。 +用于设置图像平滑度。 从API version 9开始，该接口支持在ArkTS卡片中使用。 @@ -2565,8 +2668,42 @@ imageSmoothingQuality(quality: imageSmoothingQuality) | 参数 | 类型 | 描述 | | ------- | --------------------- | ---------------------------------------- | -| quality | imageSmoothingQuality | 支持如下三种类型：'low', 'medium', 'high'。 | +| quality | imageSmoothingQuality | 支持如下三种类型：
- 'low'：低画质
- 'medium'：中画质
- 'high'：高画质 | + +**示例：** +```ts + // xxx.ets + @Entry + @Component + struct ImageSmoothingQualityDemoOff { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) + private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + let offctx = this.offContext + offctx.imageSmoothingEnabled = true + offctx.imageSmoothingQuality = 'high' + offctx.drawImage(this.img, 0, 0, 400, 200) + + var image = offctx.transferToImageBitmap() + this.context.transferFromImageBitmap(image) + }) + } + .width('100%') + .height('100%') + } + } +``` +![ImageSmoothingQualityDemo](figures/ImageSmoothingQualityDemo.jpeg) ### transferToImageBitmap