Skip to content

G
Graphic Ui

OpenHarmony / Graphic Ui
大约 1 年 前同步成功

通知 13
Star 2
Fork 0
G
Graphic Ui

体验新版 GitCode，发现更多精彩内容 >>

提交 5ca2796b 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!319 ui_image_view resizeMode增加cover center 和 scale_down模式 

Merge pull request !319 from lhl/master
上级 bcb9f1ec bcc3b935
隐藏空白更改
内联 并排
Showing with 186 addition and 64 deletion
frameworks/components/ui_image_view.cpp 100755 → 100644
浏览文件 @ 5ca2796b
......@@ -254,19 +254,57 @@ UIImageView::~UIImageView()
void UIImageView::SetResizeMode(ImageResizeMode mode)
{
if (autoEnable_ || (imageResizeMode_ == mode)) {
return;
// when automatic adaptation is enabled only save the mode, no need to update the DrawtransMap
if (autoEnable_) {
imageResizeMode_ = mode;
} else if (imageResizeMode_ != mode) {
needRefresh_ = true;
ReMeasure();
// must update the mode, before calling UpdateDrawTransMap
imageResizeMode_ = mode;
UpdateDrawTransMap(true);
}
}
void UIImageView::AdjustScaleAndTranslate(Vector2<float>& scale, Vector2<int16_t>& translate,
int16_t widgetWidth, int16_t widgetHeight) const
{
// adjust scale
float ratio = 1.0f;
switch (imageResizeMode_) {
case ImageResizeMode::COVER:
ratio = MATH_MAX(scale.x_, scale.y_);
break;
case ImageResizeMode::CONTAIN:
ratio = MATH_MIN(scale.x_, scale.y_);
break;
case ImageResizeMode::CENTER: // ratio is 1.0f
break;
case ImageResizeMode::SCALE_DOWN:
ratio = MATH_MIN(scale.x_, scale.y_);
ratio = MATH_MIN(ratio, 1.0f);
break;
case ImageResizeMode::FILL: // do nothing
return;
default:
break;
}
if (scale.x_ != ratio) {
scale.x_ = ratio;
// 0.5: adjust the x-coordinate of the content to the center of widget
translate.x_ += (static_cast<float>(widgetWidth) - static_cast<float>(imageWidth_) * ratio) * 0.5f;
}
if (scale.y_ != ratio) {
scale.y_ = ratio;
// 0.5: adjust the y-coordinate of the content to the center of widget
translate.y_ += (static_cast<float>(widgetHeight) - static_cast<float>(imageHeight_) * ratio) * 0.5f;
}
needRefresh_ = true;
ReMeasure();
imageResizeMode_ = mode;
UpdateDrawTransMap(true);
}
void UIImageView::UpdateContentMatrix()
{
Rect viewRect = GetOrigRect();
if ((imageResizeMode_ == ImageResizeMode::NONE) ||
if (autoEnable_ || (imageResizeMode_ == ImageResizeMode::NONE) ||
(imageWidth_ == viewRect.GetWidth() && imageHeight_ == viewRect.GetHeight()) ||
imageWidth_ == 0 || imageHeight_ == 0) {
if (contentMatrix_ != nullptr) {
......@@ -275,14 +313,6 @@ void UIImageView::UpdateContentMatrix()
}
return;
}
int16_t widgetWidth = viewRect.GetWidth() - style_->paddingLeft_ - style_->paddingRight_ -
style_->borderWidth_ * 2; // 2: excludes the border-left and border-right
int16_t widgetHeight = viewRect.GetHeight() - style_->paddingTop_ - style_->paddingBottom_ -
style_->borderWidth_ * 2; // 2: excludes the border-top and border-bottom
float scaleX = static_cast<float>(widgetWidth) / static_cast<float>(imageWidth_);
float scaleY = static_cast<float>(widgetHeight) / static_cast<float>(imageHeight_);
if (contentMatrix_ == nullptr) {
contentMatrix_ = new Matrix3<float>();
if (contentMatrix_ == nullptr) {
......@@ -290,21 +320,19 @@ void UIImageView::UpdateContentMatrix()
return;
}
}
int16_t widgetWidth = viewRect.GetWidth() - style_->paddingLeft_ - style_->paddingRight_ -
style_->borderWidth_ * 2; // 2: excludes the border-left and border-right
int16_t widgetHeight = viewRect.GetHeight() - style_->paddingTop_ - style_->paddingBottom_ -
style_->borderWidth_ * 2; // 2: excludes the border-top and border-bottom
float scaleX = static_cast<float>(widgetWidth) / static_cast<float>(imageWidth_);
float scaleY = static_cast<float>(widgetHeight) / static_cast<float>(imageHeight_);
Vector2<float> scale(scaleX, scaleY);
Vector2<int16_t> translate(style_->paddingLeft_ + style_->borderWidth_,
style_->paddingTop_ + style_->borderWidth_);
if (imageResizeMode_ == ImageResizeMode::CONTAIN) {
if (scaleX <= scaleY) {
scaleY = scaleX;
// 0.5: adjust the y-coordinate of the content to the center of widget
translate.y_ += (static_cast<float>(widgetHeight) - static_cast<float>(imageHeight_) * scaleX) * 0.5f;
} else {
scaleX = scaleY;
// 0.5: adjust the x-coordinate of the content to the center of widget
translate.x_ += (static_cast<float>(widgetWidth) - static_cast<float>(imageWidth_) * scaleY) * 0.5f;
}
}
auto scaleMatrix = Matrix3<float>::Scale(Vector2<float>(scaleX, scaleY),
Vector2<float>(viewRect.GetX(), viewRect.GetY()));
AdjustScaleAndTranslate(scale, translate, widgetWidth, widgetHeight);
auto scaleMatrix = Matrix3<float>::Scale(scale, Vector2<float>(viewRect.GetX(), viewRect.GetY()));
auto translateMatrix = Matrix3<float>::Translate(Vector2<float>(translate.x_, translate.y_));
*contentMatrix_ = translateMatrix * scaleMatrix;
}
......@@ -438,7 +466,7 @@ void UIImageView::OnDraw(BufferInfo& gfxDstBuffer, const Rect& invalidatedArea)
static_cast<BlurLevel>(blurLevel_),
static_cast<TransformAlgorithm>(algorithm_)};
OpacityType opaScale = DrawUtils::GetMixOpacity(opa, style_->imageOpa_);
BaseGfxEngine::GetInstance()->DrawTransform(gfxDstBuffer, invalidatedArea, {0, 0}, Color::Black(),
BaseGfxEngine::GetInstance()->DrawTransform(gfxDstBuffer, trunc, {0, 0}, Color::Black(),
opaScale, *drawTransMap_, imageTranDataInfo);
}
}
......
interfaces/kits/components/ui_image_view.h
浏览文件 @ 5ca2796b
......@@ -157,11 +157,9 @@ public:
void SetAutoEnable(bool enable)
{
if (autoEnable_ != enable) {
if (enable) {
SetResizeMode(ImageResizeMode::NONE);
}
needRefresh_ = autoEnable_ ? needRefresh_ : true;
autoEnable_ = enable;
UpdateDrawTransMap(true);
}
}
......@@ -264,10 +262,14 @@ public:
enum ImageResizeMode : uint8_t {
NONE,
FILL,
COVER,
CONTAIN,
FILL,
CENTER,
SCALE_DOWN,
};
void AdjustScaleAndTranslate(Vector2<float>& scale, Vector2<int16_t>& translate,
int16_t widgetWidth, int16_t widgetHeight) const;
void SetResizeMode(ImageResizeMode mode);
void SetWidth(int16_t width) override;
void SetHeight(int16_t height) override;
......
test/framework/include/test_resource_config.h
浏览文件 @ 5ca2796b
......@@ -67,5 +67,6 @@ namespace OHOS {
#define TEST_RIGHT_ARROW (IMAGE_DIR "ic_arrow_right.png")
#define TEST_BACK_LEFT_ARROW (IMAGE_DIR "ic_back.png")
#define TEST_CIRCLE_FORE_IMAGE (FACE_DIR "fore.png")
#define IMAGE_RESIZEMODE_PATH (IMAGE_DIR "blue.png")
} // namespace OHOS
#endif // TEST_RESOURCE_CONFIG_H
test/uitest/test_image/ui_test_image.cpp
浏览文件 @ 5ca2796b
......@@ -534,6 +534,8 @@ UIImageView* UITestImage::AddImageView(const Rect rect, const char* src, bool au
UIImageView* imageView = new UIImageView();
imageView->SetAutoEnable(autoEnable);
imageView->SetPosition(rect.GetX(), rect.GetY(), rect.GetWidth(), rect.GetHeight());
imageView->SetStyle(STYLE_BORDER_COLOR, Color::Blue().full);
imageView->SetStyle(STYLE_BORDER_WIDTH, 1);
imageView->SetSrc(src);
imageView->SetResizeMode(mode);
container_->Add(imageView);
......@@ -544,20 +546,49 @@ void UITestImage::UIKit_UIImage_Test_Resize_001()
{
if (container_ != nullptr) {
AddLable(TEXT_DISTANCE_TO_LEFT_SIDE, g_height, "图片缩放模式测试");
AddLable(48, g_height + 30, "Fill mode"); // 48: position x; 30: increase y-coordinate
AddLable(160, g_height + 30, "Contain mode"); // 160: position x; 30: increase y-coordinate
AddLable(320, g_height + 30, "Auto mode"); // 320: position x; 30: increase y-coordinate
AddLable(480, g_height + 30, "Tiling mode"); // 480: position x; 30: increase y-coordinate
// 48: position x; 70: increase y-coordinate; 100: width and height
AddImageView(GetRect(48, g_height + 70, 100, 100), RED_IMAGE_PATH, false, UIImageView::ImageResizeMode::FILL);
// 160: position x; 70: increase y-coordinate; 100: width; 50: height
AddImageView(GetRect(160, g_height + 70, 100, 50), RED_IMAGE_PATH,
constexpr uint16_t STEP = 110; // 110: increase y-coordinate per step
const uint16_t LABLE_Y = g_height + 30;
const uint16_t IMAGE_Y = g_height + 70;
uint16_t x = 40; // 40: the orign x-coordinate
AddLable(x, LABLE_Y, "Auto");
// 100: width and height
AddImageView(GetRect(x, IMAGE_Y, 100, 100), IMAGE_RESIZEMODE_PATH, true, UIImageView::ImageResizeMode::NONE);
x += STEP;
AddLable(x, LABLE_Y, "Tiling");
// 100: width and height
AddImageView(GetRect(x, IMAGE_Y, 100, 100), IMAGE_RESIZEMODE_PATH, false, UIImageView::ImageResizeMode::NONE);
x += STEP;
AddLable(x, LABLE_Y, "Fill");
// 100: width and height
AddImageView(GetRect(x, IMAGE_Y, 100, 100), IMAGE_RESIZEMODE_PATH, false, UIImageView::ImageResizeMode::FILL);
x += STEP;
AddLable(x, LABLE_Y, "Contain");
// 100: width; 50: height
AddImageView(GetRect(x, IMAGE_Y, 100, 50), IMAGE_RESIZEMODE_PATH,
false, UIImageView::ImageResizeMode::CONTAIN);
// 320: position x; 70: increase y-coordinate; 100: width and height
AddImageView(GetRect(320, g_height + 70, 100, 100), RED_IMAGE_PATH, true, UIImageView::ImageResizeMode::NONE);
// 480: position x; 70: increase y-coordinate; 100: width and height
AddImageView(GetRect(480, g_height + 70, 100, 100), RED_IMAGE_PATH, false, UIImageView::ImageResizeMode::NONE);
g_height += 150; // offset 150
x += STEP;
AddLable(x, LABLE_Y, "Cover");
// 100: width and height
AddImageView(GetRect(x, IMAGE_Y, 100, 100), IMAGE_RESIZEMODE_PATH, false,
UIImageView::ImageResizeMode::COVER);
x += STEP;
AddLable(x, LABLE_Y, "Center");
// 100: width and height
AddImageView(GetRect(x, IMAGE_Y, 100, 100), IMAGE_RESIZEMODE_PATH, false,
UIImageView::ImageResizeMode::CENTER);
x += STEP;
AddLable(x, LABLE_Y, "Scale Down");
// 100: width and height
AddImageView(GetRect(x, IMAGE_Y, 100, 100), IMAGE_RESIZEMODE_PATH, false,
UIImageView::ImageResizeMode::SCALE_DOWN);
g_height += 200; // offset 200
}
}
} // namespace OHOS
test/uitest/test_transform/ui_test_transform.cpp
浏览文件 @ 5ca2796b
......@@ -20,6 +20,7 @@
namespace OHOS {
void UITestTransform::SetUp()
{
constexpr int16_t IMAGE_PADDING = 10;
if (container_ == nullptr) {
container_ = new UIScrollView();
container_->Resize(Screen::GetInstance().GetWidth(), Screen::GetInstance().GetHeight() - BACK_BUTTON_HEIGHT);
......@@ -44,7 +45,15 @@ void UITestTransform::SetUp()
imageView_ = new UIImageView();
imageView_->SetPosition(150, 50, 200, 200); // 150:poistion x 50:position y 200:width 200:height
imageView_->SetSrc(BLUE_IMAGE_PATH);
imageView_->SetSrc(IMAGE_RESIZEMODE_PATH);
imageView_->SetStyle(STYLE_BORDER_COLOR, Color::Blue().full);
imageView_->SetStyle(STYLE_BORDER_WIDTH, 1);
imageView_->SetStyle(STYLE_PADDING_LEFT, IMAGE_PADDING);
imageView_->SetStyle(STYLE_PADDING_RIGHT, IMAGE_PADDING);
imageView_->SetStyle(STYLE_PADDING_TOP, IMAGE_PADDING);
imageView_->SetStyle(STYLE_PADDING_BOTTOM, IMAGE_PADDING);
imageView_->SetStyle(STYLE_BACKGROUND_COLOR, Color::Red().full);
uiViewGroupFrame_->Add(imageView_);
imageView_->LayoutCenterOfParent();
}
......@@ -58,19 +67,54 @@ void UITestTransform::SetUp()
layout_->SetRows(3); // 3:two rows
layout_->SetCols(1); // 1:three cols
}
AddLable(layout_->GetOrigRect().GetRight() + 34, 50, "Auto"); // 34 : increase x-coordinate; 50: position y
AddLable(layout_->GetOrigRect().GetRight() + 34, 100, "Fill"); // 34 : increase x-coordinate; 100: position y
AddLable(layout_->GetOrigRect().GetRight() + 34, 150, "Contain"); // 34 : increase x-coordinate; 150: position y
AddLable(layout_->GetOrigRect().GetRight() + 34, 200, "Tiling"); // 34 : increase x-coordinate; 200: position y
AddRadioButton(GetRect(560, 40, 50, 50), // 560:position x 40:position y 50:width and height
AddRadioGroup();
}
void UITestTransform::AddRadioGroup()
{
if (layout_ == nullptr) {
return;
}
constexpr int16_t STEP = 50;
constexpr int16_t RADIO_OFFSET = -10;
constexpr int16_t RADIO_X = 560;
constexpr int16_t RADIO_SIZE = 50; // 50: the width and height of radio button
const int16_t lableX = layout_->GetOrigRect().GetRight() + 34; // 34 : increase x-coordinate;
int16_t y = 50;
AddLable(lableX, y, "Auto");
AddRadioButton(GetRect(RADIO_X, y + RADIO_OFFSET, RADIO_SIZE, RADIO_SIZE),
"RB", new StateChangeListener(ImageScaleMode::AUTO, this))->SetState(
UICheckBox::UICheckBoxState::SELECTED);
AddRadioButton(GetRect(560, 90, 50, 50), // 560:position x 90:position y 50:width and height
"RB", new StateChangeListener(ImageScaleMode::FILL, this));
AddRadioButton(GetRect(560, 140, 50, 50), // 560:position x 140:position y 50:width and height
"RB", new StateChangeListener(ImageScaleMode::CONTAIN, this));
AddRadioButton(GetRect(560, 190, 50, 50), // 560:position x 190:position y 50:width and height
y += STEP;
AddLable(lableX, y, "Tiling");
AddRadioButton(GetRect(RADIO_X, y + RADIO_OFFSET, RADIO_SIZE, RADIO_SIZE),
"RB", new StateChangeListener(ImageScaleMode::TILING, this));
y += STEP;
AddLable(lableX, y, "Cover");
AddRadioButton(GetRect(RADIO_X, y + RADIO_OFFSET, RADIO_SIZE, RADIO_SIZE),
"RB", new StateChangeListener(ImageScaleMode::COVER, this));
y += STEP;
AddLable(lableX, y, "Contain");
AddRadioButton(GetRect(RADIO_X, y + RADIO_OFFSET, RADIO_SIZE, RADIO_SIZE),
"RB", new StateChangeListener(ImageScaleMode::CONTAIN, this));
y += STEP;
AddLable(lableX, y, "Fill");
AddRadioButton(GetRect(RADIO_X, y + RADIO_OFFSET, RADIO_SIZE, RADIO_SIZE),
"RB", new StateChangeListener(ImageScaleMode::FILL, this));
y += STEP;
AddLable(lableX, y, "Center");
AddRadioButton(GetRect(RADIO_X, y + RADIO_OFFSET, RADIO_SIZE, RADIO_SIZE),
"RB", new StateChangeListener(ImageScaleMode::CENTER, this));
y += STEP;
AddLable(lableX, y, "Scale Down");
AddRadioButton(GetRect(RADIO_X, y + RADIO_OFFSET, RADIO_SIZE, RADIO_SIZE),
"RB", new StateChangeListener(ImageScaleMode::SCALE_DOWN, this));
}
void UITestTransform::TearDown()
......@@ -152,6 +196,14 @@ void UITestTransform::SetScaleMode(ImageScaleMode mode)
imageView_->SetAutoEnable(true);
imageView_->SetResizeMode(UIImageView::ImageResizeMode::NONE);
break;
case ImageScaleMode::TILING:
imageView_->SetAutoEnable(false);
imageView_->SetResizeMode(UIImageView::ImageResizeMode::NONE);
break;
case ImageScaleMode::COVER:
imageView_->SetAutoEnable(false);
imageView_->SetResizeMode(UIImageView::ImageResizeMode::COVER);
break;
case ImageScaleMode::CONTAIN:
imageView_->SetAutoEnable(false);
imageView_->SetResizeMode(UIImageView::ImageResizeMode::CONTAIN);
......@@ -160,9 +212,13 @@ void UITestTransform::SetScaleMode(ImageScaleMode mode)
imageView_->SetAutoEnable(false);
imageView_->SetResizeMode(UIImageView::ImageResizeMode::FILL);
break;
case ImageScaleMode::TILING:
case ImageScaleMode::CENTER:
imageView_->SetAutoEnable(false);
imageView_->SetResizeMode(UIImageView::ImageResizeMode::NONE);
imageView_->SetResizeMode(UIImageView::ImageResizeMode::CENTER);
break;
case ImageScaleMode::SCALE_DOWN:
imageView_->SetAutoEnable(false);
imageView_->SetResizeMode(UIImageView::ImageResizeMode::SCALE_DOWN);
break;
default:
break;
......@@ -244,7 +300,7 @@ UITestRadioButton::~UITestRadioButton()
void UITestRadioButton::SetListener(UICheckBox::OnChangeListener* listener)
{
UIRadioButton::SetOnChangeListener(listener);
SetOnChangeListener(listener);
if (listener_ != nullptr) {
delete listener_;
}
......
test/uitest/test_transform/ui_test_transform.h
浏览文件 @ 5ca2796b
......@@ -27,10 +27,13 @@
namespace OHOS {
enum ImageScaleMode {
FILL,
AUTO,
CONTAIN,
TILING,
COVER,
CONTAIN,
FILL,
CENTER,
SCALE_DOWN,
};
class UITestTransform : public UITest, public UIView::OnClickListener {
......@@ -51,6 +54,7 @@ public:
void SetScaleMode(ImageScaleMode mode);
private:
void AddRadioGroup();
UILabel* AddLable(int16_t x, int16_t y, const char* data);
UIRadioButton* AddRadioButton(Rect rect, const char* name, UICheckBox::OnChangeListener* listener);
Rect GetRect(int16_t x, int16_t y, int16_t w, int16_t h) const
......@@ -74,7 +78,7 @@ private:
class StateChangeListener : public UICheckBox::OnChangeListener {
public:
explicit StateChangeListener(ImageScaleMode mode, UITestTransform* testInstance_);
explicit StateChangeListener(ImageScaleMode mode, UITestTransform* testInstance);
~StateChangeListener() {}
bool OnChange(UICheckBox::UICheckBoxState state) override;
private:
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或