Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 42920089 编写于 作者: H HelloCrease
浏览文件
操作

update figures 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 0f89ea40
显示空白变更内容
内联 并排
Showing with 12 addition and 223 deletion
en/application-dev/reference/arkui-js/js-components-basic-image.md
浏览文件 @ 42920089
......@@ -202,7 +202,7 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
```
<!-- xxx.hml -->
<div class="container">
<image src="common/images/hw_right.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red; ">
<image src="common/images/example.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red; ">
</image>
<select class="selects" onchange="change_fit">
<option for="{{fits}}" value="{{$item}}">{{$item}}</option>
......@@ -240,5 +240,5 @@ export default {
}
```
![](figures/gif.gif)
![](figures/example.gif)
en/application-dev/reference/arkui-js/js-components-basic-text.md
浏览文件 @ 42920089
......@@ -339,11 +339,6 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
width: 400px;
height: 400px;
border: 20px;
border-image-source: url("/common/images/landscape.jpg");
border-image-slice: 20px;
border-image-width: 30px;
border-image-outset: 10px;
border-image-repeat: round;
}
.title {
font-size: 80px;
......
en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
浏览文件 @ 42920089
......@@ -85,7 +85,6 @@ In addition to the attributes that are supported by **CanvasRenderingContext2D*
}
```
![](figures/c3.png)
## Methods<a name="section47669296127"></a>
......
en/application-dev/ui/ui-js-animate-background-position-style.md
浏览文件 @ 42920089
......@@ -76,8 +76,5 @@ By changing the background-position attribute (where the first value is the posi
```
![en-us_image_0000001267607873](figures/en-us_image_0000001267607873.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> The background-position attribute can only be used to move background images, but not the background color (background-color).
en/application-dev/ui/ui-js-components-images.md
浏览文件 @ 42920089
......@@ -62,84 +62,6 @@ image{
![en-us_image_0000001222807796](figures/en-us_image_0000001222807796.png)
## Display Multiple Images
Define a for loop to display multiple images cyclically. Set option to specify the image scale style. For details about the scale styles, see the description of object-fit.
```
<!-- index.hml -->
<div class="page-container">
<list>
<list-item class="item-container" for="{{list}}">
<image class="testimage" src="{{url[$idx]}}" style="object-fit: {{fit}};"></image>
<div class="text-container">
<text style="font-size: 32px;color:#7b68ee;">image{{$idx}}</text>
<text style="font-size: 23px;color: orange;font-style: italic;">content</text>
</div>
</list-item>
</list>
<div style="width: 100%;height:100px;justify-content: center;margin-top: 100px;flex-shrink: 0;">
<select id="slt2" style="border: 3px solid orange;color: orange;font-size: 40px;width:300px;height:160px;" onchange="setfit">
<option for="{{fit_list}}" value="{{$item}}" style="font-size: 36px;">{{$item}}</option>
</select>
</div>
</div>
```
```
/* xxx.css */
.page-container {
flex-direction:column;
background-color:#F1F3F5;
}
.text-container {
width: 300px;
flex-direction: column;
justify-content: center;
}
.item-container {
flex-direction: row;
align-items: center;
justify-content:center;
margin-top:200px;
}
.testimage {
width: 175px;
height: 220px;
border: 5px solid #add8e6;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
.testicon {
width: 50px;
height: 50px;
margin-left: 150px;
border-radius: 25px;
background-color: orange;
}
```
```
/* index.js */
export default {
data: {
url:['common/images/bg-tv.jpg','common/images/img2.jpg'],
list:[0,1],
fit:'cover',
fit_list:['cover','contain','fill','none','scale-down']
},
setfit(e) {
this.fit = e.newValue
}
}
```
![en-us_image_0000001267767873](figures/en-us_image_0000001267767873.gif)
## Loading Images
When an image is successfully loaded, the complete event is triggered, and the loaded image is returned. If an exception occurs during image loading, the error event is triggered, and the image loading failure is printed.
......
en/application-dev/ui/ui-ts-building-data-model.md
浏览文件 @ 42920089
......@@ -50,28 +50,9 @@ On the created page, we use various items to describe food, such as food names,
```
3. Store food image resources in the resources > phone > media directory. Use food names as the image names.
![en-us_image_0000001222967800](figures/en-us_image_0000001222967800.png)
4. Create food resource data. Create FoodDataModels.ets in the model folder and declare a food composition array, FoodComposition on the page.
In this example, 12 pieces of food data are used. You can customize more data resources when needed. Use LazyForEach to load data if a large amount of food data is involved. The following nutritional data is sourced from the Internet.
```
const FoodComposition: any[] = [
{ 'name': 'Tomato', 'image': $r('app.media.Tomato'), 'category': Category.Vegetable, 'calories': 17, 'protein': 0.9, 'fat': 0.2, 'carbohydrates': 3.9, 'vitaminC': 17.8 },
{ 'name': 'Walnut', 'image': $r('app.media.Walnut'), 'category': Category.Nut, 'calories': 654 , 'protein': 15, 'fat': 65, 'carbohydrates': 14, 'vitaminC': 1.3 },
{ 'name': 'Cucumber', 'image': $r('app.media.Cucumber'), 'category': Category.Vegetable, 'calories': 30, 'protein': 3, 'fat': 0, 'carbohydrates': 1.9, 'vitaminC': 2.1 },
{ 'name': 'Blueberry', 'image': $r('app.media.Blueberry'), 'category': Category.Fruit, 'calories': 57, 'protein': 0.7, 'fat': 0.3, 'carbohydrates': 14, 'vitaminC': 9.7 },
{ 'name': 'Crab', 'image': $r('app.media.Crab'), 'category': Category.Seafood, 'calories': 97, 'protein': 19, 'fat': 1.5, 'carbohydrates': 0, 'vitaminC': 7.6 },
{ 'name': 'IceCream', 'image': $r('app.media.IceCream'), 'category': Category.Dessert, 'calories': 207, 'protein': 3.5, 'fat': 11, 'carbohydrates': 24, 'vitaminC': 0.6 },
{ 'name': 'Onion', 'image': $r('app.media.Onion'), 'category': Category.Vegetable, 'calories': 39, 'protein': 1.1, 'fat': 0.1, 'carbohydrates': 9, 'vitaminC': 7.4 },
{ 'name': 'Mushroom', 'image': $r('app.media.Mushroom'), 'category': Category.Vegetable, 'calories': 22, 'protein': 3.1, 'fat': 0.3, 'carbohydrates': 3.3, 'vitaminC': 2.1 },
{ 'name': 'Kiwi', 'image': $r('app.media.Kiwi'), 'category': Category.Fruit, 'calories': 60 , 'protein': 1.1, 'fat': 0.5, 'carbohydrates': 15, 'vitaminC': 20.5 },
{ 'name': 'Pitaya', 'image': $r('app.media.Pitaya'), 'category': Category.Fruit, 'calories': 60, 'protein': 1.2, 'fat': 0, 'carbohydrates': 10, 'vitaminC': 60.9 },
{ 'name': 'Avocado', 'image': $r('app.media.Avocado'), 'category': Category.Fruit, 'calories': 160, 'protein': 2, 'fat': 15, 'carbohydrates': 9, 'vitaminC': 10 },
{ 'name': 'Strawberry', 'image': $r('app.media.Strawberry'), 'category': Category.Fruit, 'calories': 32, 'protein': 0.7, 'fat': 0.3, 'carbohydrates': 8, 'vitaminC': 58.8 }
]
```
In this example, you can customize more data resources when needed. Use LazyForEach to load data if a large amount of food data is involved.
5. Create the initializeOnStartUp method to initialize the FoodData array. Export the FoodData class from FoodData.ets, and import FoodData and Category in FoodDataModels.ets.
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md
浏览文件 @ 42920089
......@@ -75,9 +75,9 @@
```
<!-- xxx.hml -->
<div class="container">
<image src="common/images/hw_right.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red;">
<image src="common/images/example.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red;">
</image>
&lt;select class="selects" onchange="change_fit"&gt;&lt;option for="{{fits}}" value="{{$item}}"&gt;{{$item}}&lt;/option&gt;&lt;/select&gt;
<select class="selects" onchange="change_fit"><option for="{{fits}}" value="{{$item}}">{{$item}}</option></select>
</div>
```
......@@ -87,12 +87,11 @@
justify-content: center;
align-items: center;
flex-direction: column;
}
.selects{
margin-top: 20px;
width:300px;
border:1px solid \#808080;
border:1px solid #808080;
border-radius: 10px;
}
```
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md
浏览文件 @ 42920089
......@@ -99,11 +99,6 @@
width: 400px;
height: 400px;
border: 20px;
border-image-source: url("/common/images/landscape.jpg");
border-image-slice: 20px;
border-image-width: 30px;
border-image-outset: 10px;
border-image-repeat: round;
}
.title {
font-size: 80px;
......
zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
浏览文件 @ 42920089
......@@ -68,7 +68,7 @@
}
```
![zh-cn_image_0000001152773860](figures/zh-cn_image_0000001152773860.png)
## 方法
......
zh-cn/application-dev/ui/ui-js-animate-background-position-style.md
浏览文件 @ 42920089
......@@ -79,8 +79,5 @@
```
![zh-cn_image_0000001217008255](figures/zh-cn_image_0000001217008255.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> background-position仅支持背景图片的移动，不支持背景颜色（background-color）。
zh-cn/application-dev/ui/ui-js-components-images.md
浏览文件 @ 42920089
......@@ -63,84 +63,6 @@ image{
![zh-cn_image_0000001163532072](figures/zh-cn_image_0000001163532072.png)
## 显示多张图
定义for循环展示多张图片，同时定义option选择图片的展示方式，选择方式请参考object-fit类型说明。
```
<!-- index.hml -->
<div class="page-container">
<list>
<list-item class="item-container" for="{{list}}">
<div>
<image class="testimage" src="{{url[$idx]}}" style="object-fit: {{fit}};">
</image>
<div class="text-container">
<text style="font-size: 32px;color:#7b68ee;">image{{$idx}}</text>
<text style="font-size: 23px;color: orange;font-style: italic;">content</text>
</div>
</div>
</list-item>
</list>
<div style="width: 100%;height:100px;justify-content: center;margin-top: 100px;flex-shrink: 0;">
<select id="slt2" style="border: 3px solid orange;color: orange;font-size: 40px;width:300px;height:160px;" onchange="setfit">
<option for="{{fit_list}}" value="{{$item}}" style="font-size: 36px;">{{$item}}</option>
</select>
</div>
</div>
```
```
/* xxx.css */
.page-container {
flex-direction:column;
background-color:#F1F3F5;
}
.text-container {
width: 300px;
flex-direction: column;
justify-content: center;
}
.item-container {
flex-direction: row;
align-items: center;
justify-content:center;
margin-top:200px;
}
.testimage {
width: 175px;
height: 220px;
border: 5px solid #add8e6;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
.testicon {
width: 50px;
height: 50px;
margin-left: 150px;
border-radius: 25px;
background-color: orange;
}
```
```
/* index.js */
export default {
data: {
url:['common/images/bg-tv.jpg','common/images/img2.jpg'],
list:[0,1],
fit:'cover',
fit_list:['cover','contain','fill','none','scale-down']
},
setfit(e) {
this.fit = e.newValue
}
}
```
![zh-cn_image_0000001208787005](figures/zh-cn_image_0000001208787005.gif)
## 加载图片
图片成功加载时触发complete事件，返回加载的图源尺寸。加载失败则触发error事件，打印图片加载失败。
......
zh-cn/application-dev/ui/ui-ts-building-data-model.md
浏览文件 @ 42920089
......@@ -48,27 +48,9 @@
```
3. 存入食物图片资源。在resources &gt; phone &gt; media目录下存入食物图片资源，图片名称为食物名称。
![zh-cn_image_0000001195117633](figures/zh-cn_image_0000001195117633.png)
4. 创建食物资源数据。在model文件夹下创建FoodDataModels.ets，在该页面中声明食物成分数组FoodComposition。
以12个食物数据为例，实际开发中，开发者可以自定义更多的数据资源，当食物资源很多时，建议使用数据懒加载LazyForEach。以下营养数据均来自网络。
```
const FoodComposition: any[] = [
{ 'name': 'Tomato', 'image': $r('app.media.Tomato'), 'category': Category.Vegetable, 'calories': 17, 'protein': 0.9, 'fat': 0.2, 'carbohydrates': 3.9, 'vitaminC': 17.8 },
{ 'name': 'Walnut', 'image': $r('app.media.Walnut'), 'category': Category.Nut, 'calories': 654 , 'protein': 15, 'fat': 65, 'carbohydrates': 14, 'vitaminC': 1.3 },
{ 'name': 'Cucumber', 'image': $r('app.media.Cucumber'), 'category': Category.Vegetable, 'calories': 30, 'protein': 3, 'fat': 0, 'carbohydrates': 1.9, 'vitaminC': 2.1 },
{ 'name': 'Blueberry', 'image': $r('app.media.Blueberry'), 'category': Category.Fruit, 'calories': 57, 'protein': 0.7, 'fat': 0.3, 'carbohydrates': 14, 'vitaminC': 9.7 },
{ 'name': 'Crab', 'image': $r('app.media.Crab'), 'category': Category.Seafood, 'calories': 97, 'protein': 19, 'fat': 1.5, 'carbohydrates': 0, 'vitaminC': 7.6 },
{ 'name': 'IceCream', 'image': $r('app.media.IceCream'), 'category': Category.Dessert, 'calories': 207, 'protein': 3.5, 'fat': 11, 'carbohydrates': 24, 'vitaminC': 0.6 },
{ 'name': 'Onion', 'image': $r('app.media.Onion'), 'category': Category.Vegetable, 'calories': 39, 'protein': 1.1, 'fat': 0.1, 'carbohydrates': 9, 'vitaminC': 7.4 },
{ 'name': 'Mushroom', 'image': $r('app.media.Mushroom'), 'category': Category.Vegetable, 'calories': 22, 'protein': 3.1, 'fat': 0.3, 'carbohydrates': 3.3, 'vitaminC': 2.1 },
{ 'name': 'Kiwi', 'image': $r('app.media.Kiwi'), 'category': Category.Fruit, 'calories': 60 , 'protein': 1.1, 'fat': 0.5, 'carbohydrates': 15, 'vitaminC': 20.5 },
{ 'name': 'Pitaya', 'image': $r('app.media.Pitaya'), 'category': Category.Fruit, 'calories': 60, 'protein': 1.2, 'fat': 0, 'carbohydrates': 10, 'vitaminC': 60.9 },
{ 'name': 'Avocado', 'image': $r('app.media.Avocado'), 'category': Category.Fruit, 'calories': 160, 'protein': 2, 'fat': 15, 'carbohydrates': 9, 'vitaminC': 10 },
{ 'name': 'Strawberry', 'image': $r('app.media.Strawberry'), 'category': Category.Fruit, 'calories': 32, 'protein': 0.7, 'fat': 0.3, 'carbohydrates': 8, 'vitaminC': 58.8 }
]
```
实际开发中，开发者可以自定义更多的数据资源，当食物资源很多时，建议使用数据懒加载LazyForEach。
5. 创建initializeOnStartUp方法来初始化FoodData的数组。在FoodDataModels.ets中使用了定义在FoodData.ets的FoodData和Category，所以要将FoodData.ets的FoodData类export，在FoodDataModels.ets内import FoodData和Category。
```
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或