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

feat: background-position length type support #421

Merged
merged 11 commits into from
Jun 17, 2021

Conversation

temper357
Copy link
Contributor

@temper357 temper357 commented Jun 15, 2021

Closes #406

  • 增加 background-position 对于 length 类型支持,如 background-position: '60px 60px'
    • W3C 标准中 background-position 的 value 支持三种类型,keyword/percentage/length,其中 keyword 与 percentage 等价都是 background image 在 container 中相对定位,而 length 类型是相对于 container 的 top left 的绝对定位,Kraken 之前是调用 flutter 的 DecorationImage 中的 paint 方法来绘制 image,而 DecorationImage 只支持 alignment 参数,因此之前只支持 keyword/percentage 类型。
    • 本 PR 通过复写 DecorationImagePainter 类,在 paint 方法中传入了 length 类型的 background-position,并且在 canvas 绘制时增加对 length 类型的条件判断来提供对 length 类型的支持。
  • 增加 background-position-x 与 background-position-y 样式支持。

@openkraken-bot
Copy link

openkraken-bot bot commented Jun 15, 2021

  • Total time cost(without paint and layout): 472.174ms ↓ (29%)
  • widget_creation_cost: 30.043ms ↓ (30%)
    • controller_properties_init_cost 0.10ms↓ (13%)
    • view_controller_properties_init_cost 0.01ms↓ (33%)
    • element_manager_init_cost 1.50ms↓ (28%)
    • element_manager_property_init 0.01ms↑ (85%)
    • root_element_property_init_cost 0.40ms↓ (37%)
    • root_element_init_cost 0.57ms↓ (27%)
    • create_viewport 0.01ms↓ (72%)
    • bridge_init_cost 28.23ms↓ (30%)
    • bridge_register_dart_method_cost 12.07ms↓ (26%)
    • js_context_init_cost 5.16ms↓ (37%)
    • native_method_init_cost 3.06ms↓ (34%)
    • polyfill_init_cost 7.45ms↓ (30%)
  • First Bundle Load: 442.13100000000003ms ↓ (28%)
    • js_bundle_load_cost 107.90ms↓ (29%)
    • js_bundle_eval_cost 281.84ms↓ (28%)
    • js_parse_time_cost 29.46ms↓ (29%)
    • flush_ui_command_cost 11.39ms↓ (39%) avg: 0.57ms↓ (39%) count: 2.00 (0%)
    • create_element_cost 2.72ms↑ (28%) avg: 0.01ms↑ (30%) count: 19.50 (0%)
    • js_host_class_get_property_cost 53.12ms↓ (23%) avg: 0.01ms↓ (28%) count: 573.40 (0%)
    • js_host_class_set_property_cost 37.29ms↓ (28%) avg: 0.01ms↓ (28%) count: 273.50 (0%)
    • js_host_class_init_cost 0.00ms(0%)
    • js_native_function_call_cost 35.83ms↓ (29%) avg: 0.02ms↓ (28%) count: 184.30 (0%)
    • create_text_node_cost 0.22ms↓ (37%) avg: 0.01ms↓ (28%) count: 4.70 (0%)
    • create_comment_cost 0.14ms↓ (23%) count: 11.60 (0%)
    • dispose_event_target_cost 0.00ms(0%)
    • add_event_cost 0.52ms↓ (26%) count: 34.10 (0%)
    • insert_adjacent_node_cost 21.93ms↓ (24%) avg: 0.06ms↓ (22%) count: 35.60 (0%)
    • remove_node_cost 0.01ms↓ (28%) count: 0.50 (0%)
    • set_style_cost 9.75ms↓ (28%) avg: 0.01ms↓ (28%) count: 205.40 (0%)
    • dom_force_layout_cost 48.68ms↓ (27%) avg: 9.74ms↓ (27%) count: 0.50 (0%)
    • dom_flush_ui_command_cost 54.26ms↓ (28%) avg: 0.38ms↓ (28%) count: 14.30 (0%)
    • set_properties_cost 5.71ms↓ (44%) avg: 0.01ms↓ (37%) count: 86.00 (0%)
    • remove_properties_cost 0.00ms(0%)
  • Rendering: 53.793000000000006ms ↓ (25%)
    • flex_layout_cost 21.13ms↓ (25%) avg: 0.08ms↓ (23%) count: 24.70 ↓ (9%)
    • flow_layout_cost 8.39ms↓ (8%) avg: 0.08ms↓ (8%) count: 9.50 ↓ (8%)
    • intrinsic_layout_cost 0.83ms↓ (12%) avg: 0.01ms↓ (28%) count: 12.40 (0%)
    • silver_layout_cost 0.00ms(0%)
    • paint_cost 23.45ms↓ (31%) avg: 0.01ms↓ (35%) count: 151.80 ↓ (21%)

@temper357 temper357 changed the title [WIP] feat: background-position length type support feat: background-position length type support Jun 16, 2021
@yuanyan yuanyan merged commit ad90a82 into main Jun 17, 2021
@yuanyan yuanyan deleted the feat/background-position-length branch June 17, 2021 03:55
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.

background-position 不支持 length 类型
3 participants