Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: object-fit not work due to image resize optimization #1165

Merged
merged 42 commits into from
Feb 23, 2022

Conversation

temper357
Copy link
Contributor

@temper357 temper357 commented Feb 15, 2022

Closes #977

  • 原因:Kraken 在 image 加载时为了性能考虑会根据指定的 width/height 进行压缩,但是指定 object-fit 为非 fill 值(包含 cover/contain/none/scale-down)时图片在缩放时会保持原始比例,原逻辑未考虑 object-fit 属性导致图片在 paint 前因 resize 已经比例失真从而使得 paint 时的 object-fit 逻辑失效。
  • fix:
    • 原先 image 在 load 时默认进行 resize 的行为有个缺点是每次 width/height 变更时都需重新进行 decode,导致图片的缓存失效,因此将这个行为作为可选配置,在 image element 上增加 scaling property,仅当 scaling = 'scale' 时开启对图片裁剪的行为。(后续需要加到文档中)
    • 为了解决 issue 中 object-fit 变更后图片比例不对的问题,当 scaling = 'scale' 设置时仅对图片进行维持原生比例的缩放,而不是根据 width/height 进行 resize。为了使 scale 后的大小尽可能接近设置的 width/height 大小,在 decode 需要根据 object-fit 的值决定是设置 width 还是 height。例如当 object-fill 为默认值 fill 时,scale 的行为应与 object-fill = 'cover' 的行为一样,保证图片能够 cover 住 box model。

@temper357 temper357 changed the title fix: object-fit cover and contain fail to work [WIP] fix: object-fit cover and contain fail to work Feb 16, 2022
@temper357 temper357 changed the title [WIP] fix: object-fit cover and contain fail to work [WIP] fix: object-fit not work due to image resize optimization Feb 17, 2022
@temper357 temper357 changed the title [WIP] fix: object-fit not work due to image resize optimization fix: object-fit not work due to image resize optimization Feb 17, 2022
provider = _cachedImageProvider = getImageProvider(resolvedUri, cachedWidth: cachedWidth, cachedHeight: cachedHeight);
// Resized image needs to maintain its aspect ratio when object-fit is contain/cover.
BoxFit objectFit = BoxFit.fill;
if (renderBoxModel != null) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

renderBoxModel 与 renderStyle 没有关系,只要有 element 就会有 renderStyle

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

@answershuto answershuto merged commit 161edcf into main Feb 23, 2022
@answershuto answershuto deleted the fix/object-fit branch February 23, 2022 07:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

object-fit = cover,图片展示与 web 不一致
4 participants