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
......@@ -13,7 +13,7 @@ On the created page, we use various items to describe food, such as food names,
2. Define a food data storage model, FoodData, and an enum variable, Category. The FoodData class contains the food ID, name, category, image, calories, protein, fat, carbohydrates, and vitamin C attributes.
The eTS programming language is an extension of the TS language and also supports the TS syntax.
```
enum Category {
Fruit,
......@@ -50,31 +50,12 @@ 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.
```
// FoodData.ets
export enum Category {
......
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)
## 方法
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或