未验证 提交 b4e74e49 编写于 作者: O openharmony_ci 提交者: Gitee

!19441 website刷新+格式问题修改

Merge pull request !19441 from LiAn/master
......@@ -17,8 +17,8 @@ CanvasRenderingContext2D(settings?: RenderingContextSettings)
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------- | ---------------------------------------- | ---- | ---------------------------------------- |
| setting | [RenderingContextSettings](#renderingcontextsettings) | 否 | 见[RenderingContextSettings](#renderingcontextsettings)。 |
| -------- | ---------------------------------------- | ---- | ---------------------------------------- |
| settings | [RenderingContextSettings](#renderingcontextsettings) | 否 | 见[RenderingContextSettings](#renderingcontextsettings)。 |
### RenderingContextSettings
......@@ -39,7 +39,7 @@ RenderingContextSettings(antialias?: boolean)
## 属性
| 名称 | 类型 | 描述 |
| ----------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | string&nbsp;\|number<sup>10+</sup>&nbsp;\|[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | 指定绘制的填充色。<br/>-&nbsp;类型为string时,表示设置填充区域的颜色。<br/>- 类型为number时,表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时,表示渐变对象,使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时,使用[createPattern](#createpattern)方法创建。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [lineWidth](#linewidth) | number | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | string&nbsp;\|number<sup>10+</sup>&nbsp;\|[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | 设置描边的颜色。<br/>-&nbsp;类型为string时,表示设置描边使用的颜色。<br/>- 类型为number时,表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时,表示渐变对象,使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时,使用[createPattern](#createpattern)方法创建。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
......@@ -59,9 +59,9 @@ RenderingContextSettings(antialias?: boolean)
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整,true为启用,false为不启用。 <br/>默认值:true<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [height](#height) | number | 组件高度。 <br/>单位:vp<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [width](#width) | number | 组件宽度。 <br/>单位:vp<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [imageSmoothingQuality](#imagesmoothingquality) |ImageSmoothingQuality | imageSmoothingEnabled为true时,用于设置图像平滑度。可选值为:<br/>- 'low':低画质<br/>- 'medium':中画质<br/>- 'high':高画质。<br/>默认值:low<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [direction](#direction) |CanvasDirection | 用于设置绘制文字时使用的文字方向。可选值为:<br/>- 'inherit':继承canvas组件已设定的文本方向<br/>- 'ltr':从左往右<br/>- 'rtl':从右往左。<br/>默认值:inherit<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [filter](#filter) |string | 用于设置图像的滤镜。支持的滤镜效果如下:<br/>- 'none': 无滤镜效果<br/>- 'blur':给图像设置高斯模糊<br/>- 'brightness':给图片应用一种线性乘法,使其看起来更亮或更暗<br/>- 'contrast':调整图像的对比度<br/>- 'grayscale':将图像转换为灰度图像<br/>- 'hue-rotate':给图像应用色相旋转<br/>- 'invert':反转输入图像<br/>- 'opacity':转化图像的透明程度<br/>- 'saturate':转换图像饱和度<br/>- 'sepia':将图像转换为深褐色<br/>默认值:'none'<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [imageSmoothingQuality](#imagesmoothingquality) | ImageSmoothingQuality | imageSmoothingEnabled为true时,用于设置图像平滑度。可选值为:<br/>- 'low':低画质<br/>- 'medium':中画质<br/>- 'high':高画质。<br/>默认值:low<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [direction](#direction) | CanvasDirection | 用于设置绘制文字时使用的文字方向。可选值为:<br/>- 'inherit':继承canvas组件已设定的文本方向<br/>- 'ltr':从左往右<br/>- 'rtl':从右往左。<br/>默认值:inherit<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [filter](#filter) | string | 用于设置图像的滤镜。支持的滤镜效果如下:<br/>- 'none': 无滤镜效果<br/>- 'blur':给图像设置高斯模糊<br/>- 'brightness':给图片应用一种线性乘法,使其看起来更亮或更暗<br/>- 'contrast':调整图像的对比度<br/>- 'grayscale':将图像转换为灰度图像<br/>- 'hue-rotate':给图像应用色相旋转<br/>- 'invert':反转输入图像<br/>- 'opacity':转化图像的透明程度<br/>- 'saturate':转换图像饱和度<br/>- 'sepia':将图像转换为深褐色<br/>默认值:'none'<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
> **说明:**
>
......@@ -873,7 +873,7 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | ------ | ---- | ------ | ----------------------------- |
| -------- | ------ | ---- | ---- | --------------- |
| text | string | 是 | '' | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
......@@ -920,7 +920,7 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | ------ | ---- | ------ | ----------------------------- |
| -------- | ------ | ---- | ---- | --------------- |
| text | string | 是 | '' | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
......@@ -967,13 +967,13 @@ measureText(text: string): TextMetrics
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ------ | -------------------- |
| ---- | ------ | ---- | ---- | ---------- |
| text | string | 是 | '' | 需要进行测量的文本。 |
**返回值:**
| 类型 | 说明 |
| ----------- | ------------------------------------------------------------ |
| ----------- | ---------------------------------------- |
| TextMetrics | 文本的尺寸信息。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
**TextMetrics类型描述:**
......@@ -1265,14 +1265,14 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
**参数:**
| 参数 | 类型 | 必填 | 描述 |
| ---------- | -------------------------------------------------- | ---- | ------------------------------------------------------------ |
| ---------- | ---------------------------------------- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | 图源对象,具体参考ImageBitmap对象。 |
| repetition | string | 是 | 设置图像重复的方式,取值为:'repeat'、'repeat-x'、&nbsp'repeat-y'、'no-repeat'、'clamp'、'mirror'。<br/>默认值:'' |
**返回值:**
| 类型 | 说明 |
| ------------------------------- | ----------------------- |
| ---------------------------------------- | ----------------------- |
| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 |
**示例:**
......@@ -1517,7 +1517,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---------------- | ------- | ---- | ----- | ----------------- |
| ---------------- | ------- | ---- | ----- | ---------------------------------------- |
| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
......@@ -1813,7 +1813,7 @@ filter(filter: string): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------ |
| ------ | ------ | ---- | ---- | ---------------------------------------- |
| filter | string | 是 | - | 接受各类滤镜效果的函数。支持的滤镜效果如下:<br/>- 'none': 无滤镜效果<br/>- 'blur':给图像设置高斯模糊<br/>- 'brightness':给图片应用一种线性乘法,使其看起来更亮或更暗<br/>- 'contrast':调整图像的对比度<br/>- 'grayscale':将图像转换为灰度图像<br/>- 'hue-rotate':给图像应用色相旋转<br/>- 'invert':反转输入图像<br/>- 'opacity':转化图像的透明程度<br/>- 'saturate':转换图像饱和度<br/>- 'sepia':将图像转换为深褐色<br/>默认值:'none' |
**示例:**
......@@ -1889,7 +1889,7 @@ getTransform(): Matrix2D
**返回值:**
| 类型 | 说明 |
| ----------------------------------------------------- | ---------- |
| ---------------------------------------- | ----- |
| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | 矩阵对象。 |
......@@ -2158,7 +2158,7 @@ setTransform(transform?: Matrix2D): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| --------- | ----------------------------------------------------- | ---- | ------ | ---------- |
| --------- | ---------------------------------------- | ---- | ---- | ----- |
| transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | 否 | null | 变换矩阵。 |
### translate
......@@ -2389,7 +2389,7 @@ putImageData(imageData: ImageData, dx: number | string, dy: number | string, dir
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----------- | ---------------------------------------------- | ---- | --------------- | --------------------------------------------------------- |
| ----------- | ---------------------------------------- | ---- | ------------ | ----------------------------- |
| imagedata | [ImageData](ts-components-canvas-imagedata.md) | 是 | null | 包含像素值的ImageData对象。 |
| dx | number&nbsp;\|&nbsp;string<sup>10+</sup> | 是 | 0 | 填充区域在x轴方向的偏移量。 |
| dy | number&nbsp;\|&nbsp;string<sup>10+</sup> | 是 | 0 | 填充区域在y轴方向的偏移量。 |
......@@ -2874,7 +2874,7 @@ createConicGradient(startAngle: number, x: number, y: number): CanvasGradient
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ------ | ------------------------------------------------------------ |
| ---------- | ------ | ---- | ---- | ----------------------------------- |
| startAngle | number | 是 | 0 | 开始渐变的角度,以弧度为单位。角度测量从中心右侧水平开始,顺时针移动。 |
| x | number | 是 | 0 | 圆锥渐变的中心x轴坐标。单位:vp |
| y | number | 是 | 0 | 圆锥渐变的中心y轴坐标。单位:vp |
......
......@@ -40,7 +40,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| ------------ | ---------------------------------------- | ---- | ---------------------------------------- |
| space | number&nbsp;\|&nbsp;string | 否 | 子组件主轴方向的间隔。<br/>默认值:0<br/>**说明:** <br/>设置为除-1外其他负数或百分比时,按默认值显示。<br/>space参数值小于List分割线宽度时,子组件主轴方向的间隔取分割线宽度。 |
| initialIndex | number | 否 | 设置当前List初次加载时视口起始位置显示的item的索引值。<br/>默认值:0<br/>**说明:** <br/>设置为除-1外其他负数或超过了当前List最后一个item的索引值时视为无效取值,无效取值按默认值显示。 |
| scroller | [Scroller](ts-container-scroll.md#scroller) | 否 | 可滚动组件的控制器。用于与可滚动组件进行绑定。<br/>**说明:** <br/>不允许和其他滚动类组件绑定同一个滚动控制对象。 |
......@@ -50,7 +50,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| ----------------------------------- | ---------------------------------------- | ---------------------------------------- |
| listDirection | [Axis](ts-appendix-enums.md#axis) | 设置List组件排列方向。<br/>默认值:Axis.Vertical<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| divider | {<br/>strokeWidth:&nbsp;[Length](ts-types.md#length),<br/>color?:[ResourceColor](ts-types.md#resourcecolor),<br/>startMargin?:&nbsp;Length,<br/>endMargin?:&nbsp;Length<br/>}&nbsp;\|&nbsp;null | 设置ListItem分割线样式,默认无分割线。<br/>- strokeWidth:&nbsp;分割线的线宽。<br/>- color:&nbsp;分割线的颜色。<br/>- startMargin:&nbsp;分割线与列表侧边起始端的距离。<br/>- endMargin:&nbsp;分割线与列表侧边结束端的距离。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>endMargin +startMargin 不能超过列宽度。 <br/>startMargin和endMargin不支持设置百分比。<br/>List的分割线画在主轴方向两个子组件之间,第一个子组件上方和最后一个子组件下方不会绘制分割线。<br/>多列模式下,ListItem与ListItem之间的分割线起始边距从每一列的交叉轴方向起始边开始计算,其他情况从List交叉轴方向起始边开始计算。 |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。<br/>默认值:BarState.Off<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:** <br/>API version 9及以下版本默认值为BarState.Off,API version 10的默认值为BarState.Auto。 |
......@@ -58,7 +58,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
| editMode<sup>(deprecated)</sup> | boolean | 声明当前List组件是否处于可编辑模式。<br/>从API version9开始废弃。可参考[示例3](#示例3)实现删除选中的list项。<br/>默认值:false |
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置组件的滑动效果,支持弹簧效果和阴影效果。<br/>默认值:EdgeEffect.Spring<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| chainAnimation | boolean | 设置当前List是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:List内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。<br/>默认值:false<br/>-&nbsp;false:不启用链式联动。<br/>-&nbsp;true:启用链式联动。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>链式动效生效后,List的分割线不显示。<br>链式动效生效需要满足以下前提条件:<br> -&nbsp; List边缘效果为Spring类型<br> -&nbsp; List没有启用多列模式 |
|chainAnimationOptions<sup>10+</sup>| [ChainAnimationOptions](#chainanimationoptions10对象说明) | 设置链式联动动效参数。<br>**系统API:** 此接口为系统接口。 |
| chainAnimationOptions<sup>10+</sup> | [ChainAnimationOptions](#chainanimationoptions10对象说明) | 设置链式联动动效参数。<br>**系统API:** 此接口为系统接口。 |
| multiSelectable<sup>8+</sup> | boolean | 是否开启鼠标框选。<br/>默认值:false<br/>-&nbsp;false:关闭框选。<br/>-&nbsp;true:开启框选。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| lanes<sup>9+</sup> | number \| [LengthConstrain](ts-types.md#lengthconstrain) | 以列模式为例(listDirection为Axis.Vertical):<br/>lanes用于决定List组件在交叉轴方向按几列布局。<br/>默认值:1<br/>规则如下:<br/>-&nbsp;lanes为指定的数量时,根据指定的数量与List组件的交叉轴尺寸除以列数作为列的宽度。<br/>-&nbsp;lanes设置了{minLength,maxLength}时,根据List组件的宽度自适应决定lanes数量(即列数),保证缩放过程中lane的宽度符合{minLength,maxLength}的限制。其中,minLength条件会被优先满足,即优先保证符合ListItem的交叉轴尺寸符合最小限制。<br/>-&nbsp;lanes设置了{minLength,maxLength},如果父组件交叉轴方向尺寸约束为无穷大时,固定按一列排列,列宽度按显示区域内最大的ListItem计算<br/>-&nbsp;ListItemGroup在多列模式下也是独占一行,ListItemGroup中的ListItem按照List组件的lanes属性设置值来布局。<br/>-&nbsp;lanes设置了{minLength,maxLength}时,计算列数会按照ListItemGroup的交叉轴尺寸计算。当ListItemGroup交叉轴尺寸与List交叉轴尺寸不一致时ListItemGroup中的列数与List中的列数可能不一样。<br/>该接口支持在ArkTS卡片中使用。 |
| alignListItem<sup>9+</sup> | [ListItemAlign](#listitemalign9枚举说明) | List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时,ListItem在List交叉轴方向的布局方式,默认为首部对齐。<br/>默认值:ListItemAlign.Start<br/>该接口支持在ArkTS卡片中使用。 |
......@@ -69,7 +69,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------ | -------------------------------------- |
| ------ | ------------------------- |
| Start | ListItem在List中,交叉轴方向首部对齐。 |
| Center | ListItem在List中,交叉轴方向居中对齐。 |
| End | ListItem在List中,交叉轴方向尾部对齐。 |
......@@ -79,7 +79,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------ | -------------------------------------- |
| ------ | ---------------------------------- |
| None | ListItemGroup的header不吸顶,footer不吸底。 |
| Header | ListItemGroup的header吸顶,footer不吸底。 |
| Footer | ListItemGroup的footer吸底,header不吸底。 |
......@@ -91,7 +91,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
**系统API:** 此接口为系统接口
| 名称 | 描述 |
| ------ | -------------------------------------- |
| ------- | ---------------------------------------- |
| DEFAULT | 默认效果,列表滚动到边缘以后继续拖动,拖拽方向上的列表项间距缩小,拖拽反方向上的列表项间距扩大。 |
| STRETCH | 列表滚动到边缘以后继续拖动,所有列表项间距扩大。 |
......@@ -102,12 +102,12 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
**系统API:** 此接口为系统接口
| 名称 | 类型 | 必填 | 说明 |
| ------ | ------ | ---- | --------------- |
| ------------ | ---------------------------------------- | ---- | ---------------------------------------- |
| minSpace | [Length](ts-types.md#length) | 是 | 设置链式联动动效最小间距。 |
| maxSpace | [Length](ts-types.md#length) | 是 | 设置链式联动动效最大间距。 |
| conductivity | number | 否 | 设置链式联动动效传导系数。取值范围[0,1],数值越大,动效传导范围越远。<br/>默认为0.7。 |
| intensity | number | 否 | 设置链式联动动效效果强度。取值范围[0,1],数值越大,动效效果越明显。<br/>默认为0.3。 |
| edgeEffect | [ChainEdgeEffect](#chainedgeeffect10枚举说明) | 否 | 设置链式联动动效边缘效果。<br/>默认为ChainEdgeEffect.DEFAULT。|
| edgeEffect | [ChainEdgeEffect](#chainedgeeffect10枚举说明) | 否 | 设置链式联动动效边缘效果。<br/>默认为ChainEdgeEffect.DEFAULT。 |
> **说明:**
>
......@@ -116,7 +116,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
## 事件
| 名称 | 功能描述 |
| -------- | -------- |
| ---------------------------------------- | ---------------------------------------- |
| onItemDelete<sup>(deprecated)</sup>(event: (index: number) => boolean) | 当List组件在编辑模式时,点击ListItem右边出现的删除按钮时触发。<br/>从API version9开始废弃。<br/>- index: 被删除的列表项的索引值。 |
| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | 列表滑动时触发。<br/>- scrollOffset: 每帧滚动的偏移量,List的内容向上滚动时偏移量为正,向下滚动时偏移量为负。<br/>- [scrollState](#scrollstate枚举说明): 当前滑动状态。<br/>使用控制器调用ScrollEdge和ScrollToIndex时不会触发,其余情况有滚动就会触发该事件。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| onScrollIndex(event: (start: number, end: number) => void) | 有子组件划入或划出List显示区域时触发。<br/>计算索引值时,ListItemGroup作为一个整体占一个索引值,不计算ListItemGroup内部ListItem的索引值。<br/>- start: 滑动起始位置索引值。<br/>- end: 滑动结束位置索引值。<br/>触发该事件的条件:列表初始化时会触发一次,List显示区域内第一个子组件的索引值或后一个子组件的索引值有变化时会触发。<br/>List的边缘效果为弹簧效果时,在List划动到边缘继续划动和松手回弹过程不会触发onScrollIndex事件。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
......@@ -137,7 +137,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
从API version 9开始,该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------ | ------------------------- |
| ------ | ------------------------------ |
| Idle | 空闲状态。使用控制器提供的方法滚动、拖动滚动条滚动时触发。 |
| Scroll | 手指拖动状态。使用手指拖动List滚动时触发。 |
| Fling | 惯性滚动状态。快速划动松手后惯性滚动和划动到边缘回弹时触发。 |
......@@ -158,8 +158,9 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
>
> - 绑定onDragStart事件,且事件回调中返回浮动UI布局。
## 示例
## 示例1
### 示例1
```ts
// xxx.ets
......@@ -199,7 +200,7 @@ struct ListExample {
![zh-cn_image_0000001174264378](figures/zh-cn_image_0000001174264378.gif)
## 示例2
### 示例2
```ts
// xxx.ets
......@@ -248,7 +249,7 @@ struct ListLanesExample {
![list](figures/list1.gif)
## 示例3
### 示例3
```ts
// xxx.ets
......
......@@ -17,16 +17,16 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, settings?: Rend
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------- | ------------------------------------------------------------ | ---- | ------------------------------------ |
| -------- | ---------------------------------------- | ---- | ------------------------------ |
| width | number | 是 | 离屏画布的宽度 |
| height | number | 是 | 离屏画布的高度 |
| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 否 | 见RenderingContextSettings接口描述。 |
| settings | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 否 | 见RenderingContextSettings接口描述。 |
## 属性
| 名称 | 类型 | 描述 |
| ----------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | string&nbsp;\|number<sup>10+</sup>&nbsp;\|[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | 指定绘制的填充色。<br/>-&nbsp;类型为string时,表示设置填充区域的颜色。<br/>- 类型为number时,表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时,表示渐变对象,使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时,使用[createPattern](#createpattern)方法创建。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [lineWidth](#linewidth) | number | 设置绘制线条的宽度。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [strokeStyle](#strokestyle) | string&nbsp;\|number<sup>10+</sup>&nbsp;\|[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | 设置描边的颜色。<br/>-&nbsp;类型为string时,表示设置描边使用的颜色。<br/>- 类型为number时,表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时,表示渐变对象,使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时,使用[createPattern](#createpattern)方法创建。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
......@@ -44,9 +44,9 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, settings?: Rend
| [shadowOffsetX](#shadowoffsetx) | number | 设置绘制阴影时和原有对象的水平偏移值。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [shadowOffsetY](#shadowoffsety) | number | 设置绘制阴影时和原有对象的垂直偏移值。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整,true为启用,false为不启用。 <br/>-&nbsp;默认值:true。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [imageSmoothingQuality](#imagesmoothingquality) |ImageSmoothingQuality | imageSmoothingEnabled为true时,用于设置图像平滑度。可选值为:<br/>- 'low':低画质<br/>- 'medium':中画质<br/>- 'high':高画质。<br/>默认值:low<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [direction](#direction) |CanvasDirection | 用于设置绘制文字时使用的文字方向。可选值为:<br/>- 'inherit':继承canvas组件已设定的文本方向<br/>- 'ltr':从左往右<br/>- 'rtl':从右往左。<br/>默认值:inherit<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [filter](#filter) |string | 用于设置图像的滤镜。支持的滤镜效果如下:<br/>- 'none': 无滤镜效果<br/>- 'blur':给图像设置高斯模糊<br/>- 'brightness':给图片应用一种线性乘法,使其看起来更亮或更暗<br/>- 'contrast':调整图像的对比度<br/>- 'grayscale':将图像转换为灰度图像<br/>- 'hue-rotate':给图像应用色相旋转<br/>- 'invert':反转输入图像<br/>- 'opacity':转化图像的透明程度<br/>- 'saturate':转换图像饱和度<br/>- 'sepia':将图像转换为深褐色<br/>默认值:'none'<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [imageSmoothingQuality](#imagesmoothingquality) | ImageSmoothingQuality | imageSmoothingEnabled为true时,用于设置图像平滑度。可选值为:<br/>- 'low':低画质<br/>- 'medium':中画质<br/>- 'high':高画质。<br/>默认值:low<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [direction](#direction) | CanvasDirection | 用于设置绘制文字时使用的文字方向。可选值为:<br/>- 'inherit':继承canvas组件已设定的文本方向<br/>- 'ltr':从左往右<br/>- 'rtl':从右往左。<br/>默认值:inherit<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| [filter](#filter) | string | 用于设置图像的滤镜。支持的滤镜效果如下:<br/>- 'none': 无滤镜效果<br/>- 'blur':给图像设置高斯模糊<br/>- 'brightness':给图片应用一种线性乘法,使其看起来更亮或更暗<br/>- 'contrast':调整图像的对比度<br/>- 'grayscale':将图像转换为灰度图像<br/>- 'hue-rotate':给图像应用色相旋转<br/>- 'invert':反转输入图像<br/>- 'opacity':转化图像的透明程度<br/>- 'saturate':转换图像饱和度<br/>- 'sepia':将图像转换为深褐色<br/>默认值:'none'<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
> **说明:**
> fillStyle、shadowColor与 strokeStyle 中string类型格式为 'rgb(255, 255, 255)','rgba(255, 255, 255, 1.0)','\#FFFFFF'。
......@@ -965,7 +965,7 @@ measureText(text: string): TextMetrics
**返回值:**
| 类型 | 说明 |
| ----------- | ------------------------------------------------------------ |
| ----------- | ---------------------------------------- |
| TextMetrics | 文本的尺寸信息<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
**TextMetrics类型描述:**
......@@ -1279,7 +1279,7 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
**返回值:**
| 类型 | 说明 |
| ------------------------------- | ----------------------- |
| ---------------------------------------- | ----------------------- |
| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 |
**示例:**
......@@ -1539,7 +1539,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---------------- | ------- | ---- | ----- | ----------------- |
| ---------------- | ------- | ---- | ----- | ---------------------------------------- |
| x | number | 是 | 0 | 椭圆圆心的x轴坐标。 |
| y | number | 是 | 0 | 椭圆圆心的y轴坐标。 |
| radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 |
......@@ -1851,7 +1851,7 @@ filter(filter: string): void
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ------ | ------ | ---- | ---- | ------------ |
| ------ | ------ | ---- | ---- | ---------------------------------------- |
| filter | string | 是 | - | 接受各类滤镜效果的函数。支持的滤镜效果如下:<br/>- 'none': 无滤镜效果<br/>- 'blur':给图像设置高斯模糊<br/>- 'brightness':给图片应用一种线性乘法,使其看起来更亮或更暗<br/>- 'contrast':调整图像的对比度<br/>- 'grayscale':将图像转换为灰度图像<br/>- 'hue-rotate':给图像应用色相旋转<br/>- 'invert':反转输入图像<br/>- 'opacity':转化图像的透明程度<br/>- 'saturate':转换图像饱和度<br/>- 'sepia':将图像转换为深褐色<br/>默认值:'none' |
**示例:**
......@@ -1928,7 +1928,7 @@ getTransform(): Matrix2D
**返回值:**
| 类型 | 说明 |
| ----------------------------------------------------- | ---------- |
| ---------------------------------------- | ----- |
| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | 矩阵对象。 |
### resetTransform
......@@ -2461,7 +2461,7 @@ putImageData(imageData: Object, dx: number | string, dy: number | string, dirtyX
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----------- | ---------------------------------------- | ---- | --------------- | --------------------------------------------------------- |
| ----------- | ---------------------------------------- | ---- | ------------ | ----------------------------- |
| imagedata | Object | 是 | null | 包含像素值的ImageData对象。 |
| dx | number&nbsp;\|&nbsp;string<sup>10+</sup> | 是 | 0 | 填充区域在x轴方向的偏移量。 |
| dy | number&nbsp;\|&nbsp;string<sup>10+</sup> | 是 | 0 | 填充区域在y轴方向的偏移量。 |
......@@ -2964,7 +2964,7 @@ createConicGradient(startAngle: number, x: number, y: number): CanvasGradient
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ------ | ---- | ------ | ------------------------------------------------------------ |
| ---------- | ------ | ---- | ---- | ----------------------------------- |
| startAngle | number | 是 | 0 | 开始渐变的角度,以弧度为单位。角度测量从中心右侧水平开始,顺时针移动。 |
| x | number | 是 | 0 | 圆锥渐变的中心x轴坐标。单位:vp |
| y | number | 是 | 0 | 圆锥渐变的中心y轴坐标。单位:vp |
......
......@@ -26,6 +26,7 @@ Image支持加载存档图、多媒体像素图两种类型。
存档图类型的数据源可以分为本地资源、网络资源、Resource资源、媒体库datashare资源和base64。
- 本地资源
创建文件夹,将本地图片放入ets文件夹下的任意位置。
Image组件引入本地图片路径,即可显示图片(根目录为ets文件夹)。
......@@ -36,6 +37,7 @@ Image支持加载存档图、多媒体像素图两种类型。
```
- 网络资源
引入网络图片需申请权限ohos.permission.INTERNET,具体申请方式请参考[权限申请声明](../security/accesstoken-guidelines.md)。此时,Image组件的src参数为网络图片的链接。
```ts
......@@ -43,6 +45,7 @@ Image支持加载存档图、多媒体像素图两种类型。
```
- Resource资源
使用资源格式可以跨包/跨模块引入图片,resources文件夹下的图片都可以通过$r资源接口读 取到并转换到Resource格式。
**图1** resouces  
......@@ -68,6 +71,7 @@ Image支持加载存档图、多媒体像素图两种类型。
```
- 媒体库datashare
支持datashare://路径前缀的字符串,用于访问通过媒体库提供的图片路径。
1. 调用接口获取图库的照片url。
......
......@@ -92,7 +92,7 @@
> 使用[registerJavaScriptProxy()](../reference/apis/js-apis-webview.md#registerjavascriptproxy)接口注册方法时,注册后需调用[refresh()](../reference/apis/js-apis-webview.md#refresh)接口生效。
- index.htm前端页面触发应用侧代码。
- index.html前端页面触发应用侧代码。
```html
<!-- index.html -->
......
......@@ -713,15 +713,16 @@
- [颜色渐变](reference/arkui-ts/ts-universal-attributes-gradient-color.md)
- [Popup控制](reference/arkui-ts/ts-universal-attributes-popup.md)
- [Menu控制](reference/arkui-ts/ts-universal-attributes-menu.md)
- [点击控制](reference/arkui-ts/ts-universal-attributes-click.md)
- [焦点控制](reference/arkui-ts/ts-universal-attributes-focus.md)
- [悬浮态效果](reference/arkui-ts/ts-universal-attributes-hover-effect.md)
- [组件标识](reference/arkui-ts/ts-universal-attributes-component-id.md)
- [触摸热区设置](reference/arkui-ts/ts-universal-attributes-touch-target.md)
- [多态样式](reference/arkui-ts/ts-universal-attributes-polymorphic-style.md)
- [触摸测试控制](reference/arkui-ts/ts-universal-attributes-hit-test-behavior.md)
- [分布式迁移标识](reference/arkui-ts/ts-universal-attributes-restoreId.md)
- [前景色设置](reference/arkui-ts/ts-universal-attributes-foreground-color.md)
- 触摸交互控制
- [点击控制](reference/arkui-ts/ts-universal-attributes-click.md)
- [触摸热区设置](reference/arkui-ts/ts-universal-attributes-touch-target.md)
- [触摸测试控制](reference/arkui-ts/ts-universal-attributes-hit-test-behavior.md)
- 模态转场设置
- [全屏模态转场](reference/arkui-ts/ts-universal-attributes-modal-transition.md)
- [半模态转场](reference/arkui-ts/ts-universal-attributes-sheet-transition.md)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册