GradientPainting.cpp 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. /*
  2. * Copyright (c) 2022-2023, MacDue <macdue@dueutil.tech>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <AK/Math.h>
  7. #include <LibGfx/Gradients.h>
  8. #include <LibWeb/CSS/StyleValues/ConicGradientStyleValue.h>
  9. #include <LibWeb/CSS/StyleValues/LinearGradientStyleValue.h>
  10. #include <LibWeb/CSS/StyleValues/PositionStyleValue.h>
  11. #include <LibWeb/CSS/StyleValues/RadialGradientStyleValue.h>
  12. #include <LibWeb/Layout/Node.h>
  13. #include <LibWeb/Painting/GradientPainting.h>
  14. namespace Web::Painting {
  15. static ColorStopData resolve_color_stop_positions(Layout::NodeWithStyleAndBoxModelMetrics const& node, auto const& color_stop_list, auto resolve_position_to_float, bool repeating)
  16. {
  17. VERIFY(color_stop_list.size() >= 2);
  18. ColorStopList resolved_color_stops;
  19. auto color_stop_length = [&](auto& stop) {
  20. return stop.color_stop.second_position.has_value() ? 2 : 1;
  21. };
  22. size_t expanded_size = 0;
  23. for (auto& stop : color_stop_list)
  24. expanded_size += color_stop_length(stop);
  25. resolved_color_stops.ensure_capacity(expanded_size);
  26. for (auto& stop : color_stop_list) {
  27. auto resolved_stop = Gfx::ColorStop { .color = stop.color_stop.color->to_color(node) };
  28. for (int i = 0; i < color_stop_length(stop); i++)
  29. resolved_color_stops.append(resolved_stop);
  30. }
  31. // 1. If the first color stop does not have a position, set its position to 0%.
  32. resolved_color_stops.first().position = 0;
  33. // If the last color stop does not have a position, set its position to 100%
  34. resolved_color_stops.last().position = 1.0f;
  35. // 2. If a color stop or transition hint has a position that is less than the
  36. // specified position of any color stop or transition hint before it in the list,
  37. // set its position to be equal to the largest specified position of any color stop
  38. // or transition hint before it.
  39. auto max_previous_color_stop_or_hint = resolved_color_stops[0].position;
  40. auto resolve_stop_position = [&](auto& position) {
  41. float value = resolve_position_to_float(position);
  42. value = max(value, max_previous_color_stop_or_hint);
  43. max_previous_color_stop_or_hint = value;
  44. return value;
  45. };
  46. size_t resolved_index = 0;
  47. for (auto& stop : color_stop_list) {
  48. if (stop.transition_hint.has_value())
  49. resolved_color_stops[resolved_index].transition_hint = resolve_stop_position(stop.transition_hint->value);
  50. if (stop.color_stop.position.has_value())
  51. resolved_color_stops[resolved_index].position = resolve_stop_position(*stop.color_stop.position);
  52. if (stop.color_stop.second_position.has_value())
  53. resolved_color_stops[++resolved_index].position = resolve_stop_position(*stop.color_stop.second_position);
  54. ++resolved_index;
  55. }
  56. // 3. If any color stop still does not have a position, then, for each run of adjacent color stops
  57. // without positions, set their positions so that they are evenly spaced between the preceding
  58. // and following color stops with positions.
  59. // Note: Though not mentioned anywhere in the specification transition hints are counted as "color stops with positions".
  60. size_t i = 1;
  61. auto find_run_end = [&] {
  62. auto color_stop_has_position = [](auto& color_stop) {
  63. return color_stop.transition_hint.has_value() || isfinite(color_stop.position);
  64. };
  65. while (i < color_stop_list.size() - 1 && !color_stop_has_position(resolved_color_stops[i])) {
  66. i++;
  67. }
  68. return i;
  69. };
  70. while (i < resolved_color_stops.size() - 1) {
  71. auto& stop = resolved_color_stops[i];
  72. if (!isfinite(stop.position)) {
  73. auto run_start = i - 1;
  74. auto start_position = resolved_color_stops[i++].transition_hint.value_or(resolved_color_stops[run_start].position);
  75. auto run_end = find_run_end();
  76. auto end_position = resolved_color_stops[run_end].transition_hint.value_or(resolved_color_stops[run_end].position);
  77. auto spacing = (end_position - start_position) / (run_end - run_start);
  78. for (auto j = run_start + 1; j < run_end; j++) {
  79. resolved_color_stops[j].position = start_position + (j - run_start) * spacing;
  80. }
  81. }
  82. i++;
  83. }
  84. // Determine the location of the transition hint as a percentage of the distance between the two color stops,
  85. // denoted as a number between 0 and 1, where 0 indicates the hint is placed right on the first color stop,
  86. // and 1 indicates the hint is placed right on the second color stop.
  87. for (size_t i = 1; i < resolved_color_stops.size(); i++) {
  88. auto& color_stop = resolved_color_stops[i];
  89. auto& previous_color_stop = resolved_color_stops[i - 1];
  90. if (color_stop.transition_hint.has_value()) {
  91. auto stop_length = color_stop.position - previous_color_stop.position;
  92. color_stop.transition_hint = stop_length > 0 ? (*color_stop.transition_hint - previous_color_stop.position) / stop_length : 0;
  93. }
  94. }
  95. Optional<float> repeat_length = {};
  96. if (repeating)
  97. repeat_length = resolved_color_stops.last().position - resolved_color_stops.first().position;
  98. return { resolved_color_stops, repeat_length };
  99. }
  100. LinearGradientData resolve_linear_gradient_data(Layout::NodeWithStyleAndBoxModelMetrics const& node, CSSPixelSize gradient_size, CSS::LinearGradientStyleValue const& linear_gradient)
  101. {
  102. auto gradient_angle = linear_gradient.angle_degrees(gradient_size);
  103. auto gradient_length_px = Gfx::calculate_gradient_length(gradient_size.to_type<float>(), gradient_angle);
  104. auto resolved_color_stops = resolve_color_stop_positions(
  105. node, linear_gradient.color_stop_list(), [&](auto const& length_percentage) {
  106. return length_percentage.to_px(node, CSSPixels::nearest_value_for(gradient_length_px)).to_float() / static_cast<float>(gradient_length_px);
  107. },
  108. linear_gradient.is_repeating());
  109. return { gradient_angle, resolved_color_stops };
  110. }
  111. ConicGradientData resolve_conic_gradient_data(Layout::NodeWithStyleAndBoxModelMetrics const& node, CSS::ConicGradientStyleValue const& conic_gradient)
  112. {
  113. CSS::Angle one_turn(360.0f, CSS::Angle::Type::Deg);
  114. auto resolved_color_stops = resolve_color_stop_positions(
  115. node, conic_gradient.color_stop_list(), [&](auto const& angle_percentage) {
  116. return angle_percentage.resolved(node, one_turn).to_degrees() / one_turn.to_degrees();
  117. },
  118. conic_gradient.is_repeating());
  119. return { conic_gradient.angle_degrees(), resolved_color_stops };
  120. }
  121. RadialGradientData resolve_radial_gradient_data(Layout::NodeWithStyleAndBoxModelMetrics const& node, CSSPixelSize gradient_size, CSS::RadialGradientStyleValue const& radial_gradient)
  122. {
  123. // Start center, goes right to ending point, where the gradient line intersects the ending shape
  124. auto resolved_color_stops = resolve_color_stop_positions(
  125. node, radial_gradient.color_stop_list(), [&](auto const& length_percentage) {
  126. return length_percentage.to_px(node, gradient_size.width()).to_float() / gradient_size.width().to_float();
  127. },
  128. radial_gradient.is_repeating());
  129. return { resolved_color_stops };
  130. }
  131. void paint_linear_gradient(PaintContext& context, DevicePixelRect const& gradient_rect, LinearGradientData const& data)
  132. {
  133. context.recording_painter().fill_rect_with_linear_gradient(gradient_rect.to_type<int>(), data);
  134. }
  135. void paint_conic_gradient(PaintContext& context, DevicePixelRect const& gradient_rect, ConicGradientData const& data, DevicePixelPoint position)
  136. {
  137. context.recording_painter().fill_rect_with_conic_gradient(gradient_rect.to_type<int>(), data, position.to_type<int>());
  138. }
  139. void paint_radial_gradient(PaintContext& context, DevicePixelRect const& gradient_rect, RadialGradientData const& data, DevicePixelPoint center, DevicePixelSize size)
  140. {
  141. context.recording_painter().fill_rect_with_radial_gradient(gradient_rect.to_type<int>(), data, center.to_type<int>(), size.to_type<int>());
  142. }
  143. }