Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 c96335ae 编写于 作者: Y yamila
浏览文件
操作

update textarea 

Signed-off-by: Nyamila <tianyu55@huawei.com>
上级 0125b6fe
隐藏空白更改
内联 并排
Showing with 69 addition and 53 deletion
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @ c96335ae
......@@ -27,7 +27,7 @@ Image(src: string | PixelMap | Resource)
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 是 | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持跨包/跨模块调用该Image组件，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串，用于访问通过data&nbsp;ability提供的图片路径。<br/>\- 支持file:///data/storage路径前缀的字符串，用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。 |
| src | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 是 | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持跨包/跨模块调用该Image组件，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持`datashare://`路径前缀的字符串，用于访问通过data&nbsp;ability提供的图片路径。<br/>\- 支持file:///data/storage路径前缀的字符串，用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。 |
## 属性
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
浏览文件 @ c96335ae
......@@ -88,6 +88,7 @@ struct TextAreaExample {
TextArea({ placeholder: 'input your word', controller: this.controller })
.placeholderFont({ size: 14, weight: 400 })
.width(400)
.height(50)
.margin(20)
.fontSize(14)
.onChange((value: string) => {
......@@ -104,3 +105,5 @@ struct TextAreaExample {
}
}
```
![textArea](figures/textArea.gif)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ c96335ae
......@@ -34,25 +34,25 @@ RenderingContextSettings(antialias?: boolean)
## 属性
| 名称 | 类型 | 描述 |
| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | string&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 指定绘制的填充色。<br/>-&nbsp;类型为string时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineWidth](#linewidth) | number | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | string&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 设置描边的颜色。<br/>-&nbsp;类型为string时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineCap](#linecap) | CanvasLineCap | 指定线端点的样式，可选值为：<br/>-&nbsp;'butt'：线端点以方形结束。<br/>-&nbsp;'round'：线端点以圆形结束。<br/>-&nbsp;'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。<br/>默认值：'butt'。 |
| [lineJoin](#linejoin) | CanvasLineJoin | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。<br/>默认值：'miter'。 |
| [miterLimit](#miterlimit) | number | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 <br/>默认值：10。 |
| [font](#font) | string | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：'normal','italic'。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif',&nbsp;'serif',&nbsp;'monospace'。<br/>默认值：'normal normal 14px sans-serif'。 |
| [textAlign](#textalign) | CanvasTextAlign | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。<br/>默认值：'left'。 |
| [textBaseline](#textbaseline) | CanvasTextBaseline | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;'alphabetic'：文本基线是标准的字母基线。<br/>-&nbsp;'top'：文本基线在文本块的顶部。<br/>-&nbsp;'hanging'：文本基线是悬挂基线。<br/>-&nbsp;'middle'：文本基线在文本块的中间。<br/>-&nbsp;'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom'：文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic基线不需要考虑下行字母。<br/>默认值：'alphabetic'。 |
| [globalAlpha](#globalalpha) | number | 设置透明度，0.0为完全透明，1.0为完全不透明。 |
| [lineDashOffset](#linedashoffset) | number | 设置画布的虚线偏移量，精度为float。 <br/>默认值：0.0。 |
| [globalCompositeOperation](#globalcompositeoperation) | string | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。<br/>默认值：'source-over'。 |
| [shadowBlur](#shadowblur) | number | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 <br/>默认值：0.0。 |
| [shadowColor](#shadowcolor) | string | 设置绘制阴影时的阴影颜色。 |
| [shadowOffsetX](#shadowoffsetx) | number | 设置绘制阴影时和原有对象的水平偏移值。 |
| [shadowOffsetY](#shadowoffsety) | number | 设置绘制阴影时和原有对象的垂直偏移值。 |
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 <br/>默认值：true。 |
| 名称 | 类型 | 描述 |
| ----------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| [fillStyle](#fillstyle) | string&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 指定绘制的填充色。<br/>-&nbsp;类型为string时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineWidth](#linewidth) | number | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | string&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 设置描边的颜色。<br/>-&nbsp;类型为string时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
| [lineCap](#linecap) | CanvasLineCap | 指定线端点的样式，可选值为：<br/>-&nbsp;'butt'：线端点以方形结束。<br/>-&nbsp;'round'：线端点以圆形结束。<br/>-&nbsp;'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。<br/>默认值：'butt' |
| [lineJoin](#linejoin) | CanvasLineJoin | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。<br/>默认值：'miter' |
| [miterLimit](#miterlimit) | number | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 <br/>默认值：10 |
| [font](#font) | string | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：'normal','italic'。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif',&nbsp;'serif',&nbsp;'monospace'。<br/>默认值：'normal normal 14px sans-serif' |
| [textAlign](#textalign) | CanvasTextAlign | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。<br/>默认值：'left' |
| [textBaseline](#textbaseline) | CanvasTextBaseline | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;'alphabetic'：文本基线是标准的字母基线。<br/>-&nbsp;'top'：文本基线在文本块的顶部。<br/>-&nbsp;'hanging'：文本基线是悬挂基线。<br/>-&nbsp;'middle'：文本基线在文本块的中间。<br/>-&nbsp;'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom'：文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic基线不需要考虑下行字母。<br/>默认值：'alphabetic' |
| [globalAlpha](#globalalpha) | number | 设置透明度，0.0为完全透明，1.0为完全不透明。 |
| [lineDashOffset](#linedashoffset) | number | 设置画布的虚线偏移量，精度为float。 <br/>默认值：0.0 |
| [globalCompositeOperation](#globalcompositeoperation) | string | 设置合成操作的方式。类型字段可选值有'source-over'，'source-atop'，'source-in'，'source-out'，'destination-over'，'destination-atop'，'destination-in'，'destination-out'，'lighter'，'copy'，'xor'。<br/>默认值：'source-over' |
| [shadowBlur](#shadowblur) | number | 设置绘制阴影时的模糊级别，值越大越模糊，精度为float。 <br/>默认值：0.0 |
| [shadowColor](#shadowcolor) | string | 设置绘制阴影时的阴影颜色。 |
| [shadowOffsetX](#shadowoffsetx) | number | 设置绘制阴影时和原有对象的水平偏移值。 |
| [shadowOffsetY](#shadowoffsety) | number | 设置绘制阴影时和原有对象的垂直偏移值。 |
| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。 <br/>默认值：true |
> **说明：**
>
......@@ -797,12 +797,12 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | ------ | ---- | ---- | --------------- |
| text | string | 是 | "" | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
| maxWidth | number | 否 | - | 指定文本允许的最大宽度。 |
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------- | ------ | ---- | ------ | ----------------------------- |
| text | string | 是 | '' | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
| maxWidth | number | 否 | - | 指定文本允许的最大宽度。 |
**示例：**
......@@ -842,12 +842,12 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | ------ | ---- | ---- | --------------- |
| text | string | 是 | “” | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
| maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。 |
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| -------- | ------ | ---- | ------ | ----------------------------- |
| text | string | 是 | '' | 需要绘制的文本内容。 |
| x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 |
| y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 |
| maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。 |
**示例：**
......@@ -887,15 +887,15 @@ measureText(text: string): TextMetrics
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ---- | ---------- |
| text | string | 是 | "" | 需要进行测量的文本。 |
| 参数 | 类型 | 必填 | 默认值 | 说明 |
| ---- | ------ | ---- | ------ | -------------------- |
| text | string | 是 | '' | 需要进行测量的文本。 |
**返回值：**
| 类型 | 说明 |
| ----------- | ------- |
| TextMetrics | 文本的尺寸信息 |
| 类型 | 说明 |
| ----------- | ---------------- |
| TextMetrics | 文本的尺寸信息。 |
**TextMetrics类型描述:**
......@@ -1173,10 +1173,10 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | null | 图源对象，具体参考ImageBitmap对象。 |
| repetition | string | 是 | “” | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
| 参数 | 类型 | 必填 | 描述 |
| ---------- | -------------------------------------------------- | ---- | ------------------------------------------------------------ |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | 图源对象，具体参考ImageBitmap对象。 |
| repetition | string | 是 | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。<br/>默认值：'' |
**返回值：**：
......
zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md
浏览文件 @ c96335ae
......@@ -148,7 +148,7 @@ struct FlexExample2 {
// xxx.ets
@Component
struct JustifyContentFlex {
@Prop justifyContent : number
justifyContent : number
build() {
Flex({ justifyContent: this.justifyContent }) {
......@@ -197,7 +197,7 @@ struct FlexExample3 {
// xxx.ets
@Component
struct AlignItemsFlex {
@Prop alignItems : number
alignItems : number
build() {
Flex({ alignItems: this.alignItems }) {
......@@ -246,7 +246,7 @@ struct FlexExample4 {
// xxx.ets
@Component
struct AlignContentFlex {
@Prop alignContent: number
alignContent: number
build() {
Flex({ wrap: FlexWrap.Wrap, alignContent: this.alignContent }) {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-list.md
浏览文件 @ c96335ae
......@@ -183,7 +183,7 @@ struct ListLanesExample {
.width("90%")
.editMode(true)
.border({ width: 3, color: Color.Red })
.lanes({ minLength: 40, maxLength: 60 })
.lanes({ minLength: 40, maxLength: 40 })
.alignListItem(this.alignListItem)
Button("点击更改alignListItem:" + this.alignListItem).onClick(() => {
......@@ -200,3 +200,4 @@ struct ListLanesExample {
}
```
![list](figures/list1.gif)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
浏览文件 @ c96335ae
......@@ -24,7 +24,7 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut
| alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值：DialogAlignment.Default |
| offset | {<br/>dx:&nbsp;Length&nbsp;\|&nbsp;[Resource](ts-types.md#resource),<br/>dy:&nbsp;Length&nbsp;&nbsp;\|&nbsp;[Resource](ts-types.md#resource)<br/>} | 否 | 弹窗相对alignment所在位置的偏移量。 |
| customStyle | boolean | 否 | 弹窗容器样式是否自定义。<br>默认值：false |
| gridCount<sup>8+</sup> | number | 否 | 弹窗宽度占栅格宽度的个数。 |
| gridCount<sup>8+</sup> | number | 否 | 弹窗宽度占[栅格宽度](../../ui/ui-ts-layout-grid-container-new.md)的个数。 |
## DialogAlignment枚举说明
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
浏览文件 @ c96335ae
......@@ -41,19 +41,31 @@
@Entry
@Component
struct Index {
@State outSetValue: number = 40;
build() {
Row() {
Column() {
Text('This is borderImage.').textAlign(TextAlign.Center)
Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50)
.borderImage({
source: "borderOrigin.png",
slice: {top:"31%", bottom:"31%", left:"31%", right:"31%"},
width: {top:"20px", bottom:"20px", left:"20px", right:"20px"},
outset: {top:"5px", bottom:"5px", left:"5px", right:"5px"},
source: $r('app.media.heart'),
slice: `${this.outSetValue}%`,
width: `${this.outSetValue}px`,
outset: '5px',
repeat: RepeatMode.Repeat,
fill: false
})
Slider({
value: this.outSetValue,
min: 0,
max: 100,
style: SliderStyle.OutSet
})
.margin({ top: 30 })
.onChange((value: number, mode: SliderChangeMode) => {
this.outSetValue = value;
console.info('value:' + value + 'mode:' + mode.toString());
})
}
.width('100%')
}
......@@ -62,7 +74,7 @@ struct Index {
}
```
![zh-cn_image_borderImage](figures/borderImage.png)
![zh-cn_image_borderImage](figures/borderImage.gif)
```ts
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或