openharmony/ace_engine_lite
1
0
Fork 0
mirror of https://github.com/openharmony/ace_engine_lite.git synced 2026-07-21 00:35:30 -04:00
Code Issues Packages Projects Releases Wiki Activity

!437 sync image component fitObject support to 3.0 LTS

Browse Source 
Merge pull request !437 from piggyguy_jdx/sync_fitObject_to_3.0LTS
This commit is contained in:
openharmony_ci
2021-11-05 09:14:53 +00:00
committed by Gitee
parent b2757358b7 31e257b2d4
commit 1a004149a0
13 changed files with 411 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frameworks/src/core/base/key_parser.cpp
+18
View File
@@ -205,6 +205,12 @@ uint16_t KeyParser::ParseKeyId(const char *s, const size_t len)
return K_CLOCK_HAND;
}
#endif // FEATURE_COMPONENT_ANALOG_CLOCK
if (!strcmp(s, "ontain")) {
return K_CONTAIN;
}
if (!strcmp(s, "over")) {
return K_COVER;
}
break;
case 'd':
if (!strcmp(s, "atasets")) {
@@ -267,6 +273,9 @@ uint16_t KeyParser::ParseKeyId(const char *s, const size_t len)
if (!strcmp(s, "alse")) {
return K_FALSE;
}
if (!strcmp(s, "ill")) {
return K_FILL;
}
if (!strcmp(s, "illmode")) {
return K_FILL_MODE;
}
@@ -278,6 +287,9 @@ uint16_t KeyParser::ParseKeyId(const char *s, const size_t len)
return K_FINISH;
}
#endif // FEATURE_COMPONENT_VIDEO
if (!strcmp(s, "itOriginalSize")) {
return K_FIT_ORIGINAL_SIZE;
}
if (!strcmp(s, "lex-end")) {
return K_FLEX_END;
}
@@ -451,6 +463,9 @@ uint16_t KeyParser::ParseKeyId(const char *s, const size_t len)
#endif
break;
case 'o':
if (!strcmp(s, "bjectFit")) {
return K_OBJECT_FIT;
}
if (!strcmp(s, "pacity")) {
return K_OPACITY;
}
@@ -539,6 +554,9 @@ uint16_t KeyParser::ParseKeyId(const char *s, const size_t len)
}
break;
case 's':
if (!strcmp(s, "cale-down")) {
return K_SCALE_DOWN;
}
if (!strcmp(s, "crollamount")) {
return K_SCROLLAMOUNT;
}
frameworks/src/core/base/keys.h
+6
View File
@@ -87,9 +87,11 @@ enum {
KEYWORD(COLOR, color) // text style type, rectangular clock-hand fill color, horizon progress style
KEYWORD(COLUMN, column) // layout style
KEYWORD(COLUMN_REVERSE, column-reverse) // layout style
KEYWORD(CONTAIN, contain) // image component contain
#ifdef FEATURE_COMPONENT_VIDEO
KEYWORD(CONTROLS, controls) // video component controls attribute
#endif // FEATURE_COMPONENT_VIDEO
KEYWORD(COVER, cover) // image component cover
KEYWORD(DATASETS, datasets) // chart data
#ifdef FEATURE_COMPONENT_DATE_PICKER
KEYWORD(DATE, date) // picker-view attr value
@@ -118,7 +120,9 @@ enum {
#ifdef FEATURE_COMPONENT_VIDEO
KEYWORD(FINISH, finish) // video component finish event tag
#endif // FEATURE_COMPONENT_VIDEO
KEYWORD(FILL, fill) // image component fill
KEYWORD(FILL_MODE, fillmode) // image-animator attribtue
KEYWORD(FIT_ORIGINAL_SIZE, fitOriginalSize) // image component fit original size
KEYWORD(FIXED_SIZE, fixedsize) // image-animator attribute
KEYWORD(FLEX_DIRECTION, flexDirection) // layout style
KEYWORD(FLEX_END, flex-end) // layout style
@@ -179,6 +183,7 @@ enum {
#ifdef FEATURE_DATE_FORMAT
KEYWORD(NUMERIC, numeric)
#endif
KEYWORD(OBJECT_FIT, objectFit) // image component object-fit
KEYWORD(OPACITY, opacity) // common style opacity
KEYWORD(OPTIONS, options) // chart options
KEYWORD(PADDING, padding)
@@ -211,6 +216,7 @@ enum {
KEYWORD(ROTATE, rotate) // animation rotate
KEYWORD(ROW, row) // layout style
KEYWORD(ROW_REVERSE, row-reverse) // layout style
KEYWORD(SCALE_DOWN, scaleDown) // image component scale down
KEYWORD(SCROLLAMOUNT, scrollamount) // marquee scroll speed
KEYWORD(SCROLLDELAY, scrolldelay) // marquee scroll delay
KEYWORD(SCROLLEND, scrollend) // scroll end event listener
frameworks/src/core/components/image_component.cpp
+74 -1
View File
@@ -24,7 +24,10 @@
namespace OHOS {
namespace ACELite {
ImageComponent::ImageComponent(jerry_value_t options, jerry_value_t children, AppStyleManager *styleManager)
: Component(options, children, styleManager)
: Component(options, children, styleManager),
fitOriginalSize_(0),
hasSetWidth_(false),
hasSetHeight_(false)
{
SetComponentName(K_IMAGE);
}
@@ -33,6 +36,7 @@ bool ImageComponent::CreateNativeViews()
{
// set default value
imageView_.SetAutoEnable(false);
imageView_.SetResizeMode(resizeMode_);
const int16_t defaultOpacity = 0;
imageView_.SetStyle(STYLE_BACKGROUND_OPA, defaultOpacity);
return true;
@@ -60,5 +64,74 @@ bool ImageComponent::SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrV
return setResult;
}
void ImageComponent::UpdateWidgetFitMode()
{
// update the imageView
if (fitOriginalSize_ && !(hasSetWidth_ || hasSetHeight_)) {
imageView_.SetAutoEnable(true);
} else {
imageView_.SetAutoEnable(false);
}
imageView_.SetResizeMode(resizeMode_);
}
bool ImageComponent::ApplyPrivateStyle(const AppStyleItem *style)
{
uint16_t styleKey = style->GetPropNameId();
bool setResult = true;
switch (styleKey) {
case K_OBJECT_FIT: {
const char * const strValue = GetStyleStrValue(style);
if (strValue == nullptr) {
return false;
}
uint16_t mode = KeyParser::ParseKeyId(strValue, GetStyleStrValueLen(style));
UpdateResizeMode(mode);
break;
}
case K_FIT_ORIGINAL_SIZE: {
fitOriginalSize_ = style->GetBoolValue();
break;
}
case K_HEIGHT: {
hasSetHeight_ = true;
setResult = false;
break;
}
case K_WIDTH: {
hasSetWidth_ = true;
setResult = false;
break;
}
default:
return false;
}
UpdateWidgetFitMode();
return setResult;
}
void ImageComponent::UpdateResizeMode(uint16_t mode)
{
switch (mode) {
case K_COVER:
resizeMode_ = UIImageView::ImageResizeMode::COVER;
break;
case K_CONTAIN:
resizeMode_ = UIImageView::ImageResizeMode::CONTAIN;
break;
case K_FILL:
resizeMode_ = UIImageView::ImageResizeMode::FILL;
break;
case K_NONE:
resizeMode_ = UIImageView::ImageResizeMode::CENTER;
break;
case K_SCALE_DOWN:
resizeMode_ = UIImageView::ImageResizeMode::SCALE_DOWN;
break;
default:
break;
}
}
} // namespace ACELite
} // namespace OHOS
frameworks/src/core/components/image_component.h
+7 -1
View File
@@ -35,9 +35,15 @@ protected:
bool CreateNativeViews() override;
UIView *GetComponentRootView() const override;
bool SetPrivateAttribute(uint16_t attrKeyId, jerry_value_t attrValue) override;
bool ApplyPrivateStyle(const AppStyleItem *style) override;
void UpdateResizeMode(uint16_t mode);
void UpdateWidgetFitMode();
private:
UIImageView imageView_;
UIImageView::ImageResizeMode resizeMode_ = UIImageView::ImageResizeMode::COVER;
bool fitOriginalSize_ : 1;
bool hasSetWidth_ : 1;
bool hasSetHeight_ : 1;
};
} // namespace ACELite
} // namespace OHOS
test/moduletest/common/test_app/ui_manual_test/config.json
+3 -1
View File
@@ -139,7 +139,9 @@
"pages/opacity/02/index",
"pages/opacity/03/index",
"pages/dialog/dialog001/index",
"pages/qrcode/index/index"
"pages/qrcode/index/index",
"pages/imageView/fitObject/index",
"pages/imageView/fitOriginalSize/index"
]
}
],
test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/imageView/fitObject/index.css
+65
View File
@@ -0,0 +1,65 @@
/*
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.container {
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.radiolable {
width: 200px;
height: 40px;
justify-content: flex-start;
align-content: flex-start;
flex-direction: row;
}
.radiogroup {
margin-left: 40px;
flex-direction: column;
width: 300px;
height:100%;
justify-content: center;
align-content: flex-start;
}
.title {
width: 200px;
font-size: 30px;
text-align: center;
}
.radiotext {
width: 150px;
font-size: 30px;
text-align: left;
}
.image {
fitOriginalSize: true;
border-width : 1px;
border-color: crimson;
}
.bottom {
width:400px;
height:100px;
}
.page {
width:120px;
height:60px;
margin-left: 20px;
margin-top: 10px;
}
test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/imageView/fitObject/index.hml
+56
View File
@@ -0,0 +1,56 @@
<!--
Copyright (c) 2021 Huawei Device Co., Ltd.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="container">
<image class="image" style="objectFit:{{fitobject}}; width: {{imageWith}}; height: {{imageHeight}};
fitOriginalSize : {{fitOriginal}} " src="common/icon.png">
</image>
<div class="radiogroup">
<div class="radiolable">
<text class="radiotext">cover:</text>
<input style="width: 50px; height: 50px;" type="radio" checked="true"
onclick="changeToCover" name="fitRadio"></input>
</div>
<div class="radiolable">
<text class="radiotext">contain:</text>
<input style="width: 50px; height: 50px;" type="radio" onclick="changeToContain" name="fitRadio"></input>
</div>
<div class="radiolable">
<text class="radiotext">fill:</text>
<input style="width: 50px; height: 50px;" type="radio" onclick="changeToFill" name="fitRadio"></input>
</div>
<div class="radiolable">
<text class="radiotext">none:</text>
<input style="width: 50px; height: 50px;" type="radio" onclick="changeToNone" name="fitRadio"></input>
</div>
<div class="radiolable">
<text class="radiotext">scaled:</text>
<input style="width: 50px; height: 50px;" type="radio"
onclick="changeToScaleDown" name="fitRadio"></input>
</div>
</div>
<div class = "bottom">
<input type = "button" class = "page" onclick = "goHome" value = "首页"/>
<input type = "button" class = "page" onclick = "goNext" value = "下一页"/>
</div>
</div>
test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/imageView/fitObject/index.js
+58
View File
@@ -0,0 +1,58 @@
/*
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {backPage, routePage} from "../../../common/js/general";
export default {
goHome:routePage("/").changePage,
goNext:routePage("pages/imageView/fitOriginalSize/index").changePage,
data: {
title: 'World',
fitobject: 'fill',
imageWith : '200px',
imageHeight : "400px",
fitOriginal : true
},
changeToCover() {
this.fitobject = "cover";
this.imageWith = "200px";
this.imageHeight = "400px";
},
changeToContain() {
this.fitobject = "contain";
this.imageWith = "200px";
this.imageHeight = "400px";
},
changeToFill() {
this.fitobject = "fill";
this.imageWith = "200px";
this.imageHeight = "400px";
},
changeToNone() {
this.fitobject = "none";
this.imageWith = "200px";
this.imageHeight = "400px";
},
changeToScaleDown() {
this.fitobject = "scale-down";
this.imageWith = "200px";
this.imageHeight = "400px";
},
changeToFitOriginal() {
this.fitOriginal = "true";
this.imageHeight = 0;
this.imageWith = 0;
},
}
test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/imageView/fitOriginalSize/index.css
+64
View File
@@ -0,0 +1,64 @@
/*
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.container {
width: 100%;
height: 100%;
align-items: center;
}
.radiolable {
width: 200px;
height: 40px;
justify-content: flex-start;
align-content: flex-start;
flex-direction: row;
}
.radiogroup {
margin-left: 40px;
flex-direction: column;
width: 300px;
height:100%;
justify-content: center;
align-content: flex-start;
}
.title {
width: 200px;
font-size: 30px;
text-align: center;
}
.radiotext {
width: 150px;
font-size: 30px;
text-align: left;
}
.image {
fitOriginalSize: true;
border-width : 1px;
border-color: crimson;
}
.navigate {
width:400px;
height:100px;
}
.page {
width:120px;
height:60px;
margin-left: 20px;
margin-top: 10px;
}
test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/imageView/fitOriginalSize/index.hml
+29
View File
@@ -0,0 +1,29 @@
<!--
Copyright (c) 2021 Huawei Device Co., Ltd.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="container">
<text>
fit-original-size : true
</text>
<image class="image" src="common/icon.png" fit-original-size="ture">
</image>
<div class = "navigate">
<input type = "button" class = "page" onclick = "goHome" value = "首页"/>
<input type = "button" class = "page" onclick = "goPrevious" value = "上一页"/>
</div>
</div>
test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/imageView/fitOriginalSize/index.js
+20
View File
@@ -0,0 +1,20 @@
/*
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {backPage, routePage} from "../../../common/js/general";
export default {
goHome:routePage("/").changePage,
goPrevious:routePage("pages/imageView/fitObject/index").changePage,
}
test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/index/index.hml
+9
View File
@@ -204,5 +204,14 @@ limitations under the License.
onclick="changeDialog"
/>
</list-item>
<list-item class="listItem">
<input
type="button"
class="buttonStyle"
value="image_view"
onclick="changeImageView"
/>
</list-item>
<list-item style="height: 40px; width: 454px;"> </list-item>
</list>
test/moduletest/common/test_app/ui_manual_test/src/main/js/default/pages/index/index.js
+2 -1
View File
@@ -37,5 +37,6 @@ export default {
changeOpacity: routePage("pages/opacity/01/index").changePage,
changeQrcode: routePage("pages/qrcode/index/index").changePage,
changeResource: routePage("pages/resource/resource001/index").changePage,
changeDialog: routePage("pages/dialog/dialog001/index").changePage
changeDialog: routePage("pages/dialog/dialog001/index").changePage,
changeImageView:routePage("pages/imageView/fitObject/index").changePage,
};