GradientPainting.cpp 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. /*
  2. * Copyright (c) 2022, MacDue <macdue@dueutil.tech>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <AK/Checked.h>
  7. #include <AK/Math.h>
  8. #include <LibGfx/Gamma.h>
  9. #include <LibGfx/Line.h>
  10. #include <LibWeb/CSS/StyleValue.h>
  11. #include <LibWeb/Painting/GradientPainting.h>
  12. namespace Web::Painting {
  13. static float normalized_gradient_angle_radians(float gradient_angle)
  14. {
  15. // Adjust angle so 0 degrees is bottom
  16. float real_angle = 90 - gradient_angle;
  17. return real_angle * (AK::Pi<float> / 180);
  18. }
  19. static float calulate_gradient_length(Gfx::IntSize const& gradient_size, float sin_angle, float cos_angle)
  20. {
  21. return AK::fabs(gradient_size.height() * sin_angle) + AK::fabs(gradient_size.width() * cos_angle);
  22. }
  23. static float calulate_gradient_length(Gfx::IntSize const& gradient_size, float gradient_angle)
  24. {
  25. float angle = normalized_gradient_angle_radians(gradient_angle);
  26. float sin_angle, cos_angle;
  27. AK::sincos(angle, sin_angle, cos_angle);
  28. return calulate_gradient_length(gradient_size, sin_angle, cos_angle);
  29. }
  30. LinearGradientData resolve_linear_gradient_data(Layout::Node const& node, Gfx::FloatSize const& gradient_size, CSS::LinearGradientStyleValue const& linear_gradient)
  31. {
  32. auto& color_stop_list = linear_gradient.color_stop_list();
  33. VERIFY(color_stop_list.size() >= 2);
  34. ColorStopList resolved_color_stops;
  35. auto color_stop_length = [&](auto& stop) {
  36. return stop.color_stop.second_position.has_value() ? 2 : 1;
  37. };
  38. size_t expanded_size = 0;
  39. for (auto& stop : color_stop_list)
  40. expanded_size += color_stop_length(stop);
  41. resolved_color_stops.ensure_capacity(expanded_size);
  42. for (auto& stop : color_stop_list) {
  43. auto resolved_stop = ColorStop { .color = stop.color_stop.color };
  44. for (int i = 0; i < color_stop_length(stop); i++)
  45. resolved_color_stops.append(resolved_stop);
  46. }
  47. auto gradient_angle = linear_gradient.angle_degrees(gradient_size);
  48. auto gradient_length_px = calulate_gradient_length(gradient_size.to_rounded<int>(), gradient_angle);
  49. auto gradient_length = CSS::Length::make_px(gradient_length_px);
  50. // 1. If the first color stop does not have a position, set its position to 0%.
  51. resolved_color_stops.first().position = 0;
  52. // If the last color stop does not have a position, set its position to 100%
  53. resolved_color_stops.last().position = gradient_length_px;
  54. // 2. If a color stop or transition hint has a position that is less than the
  55. // specified position of any color stop or transition hint before it in the list,
  56. // set its position to be equal to the largest specified position of any color stop
  57. // or transition hint before it.
  58. auto max_previous_color_stop_or_hint = resolved_color_stops[0].position;
  59. auto resolve_stop_position = [&](auto& length_percentage) {
  60. float value = length_percentage.resolved(node, gradient_length).to_px(node);
  61. value = max(value, max_previous_color_stop_or_hint);
  62. max_previous_color_stop_or_hint = value;
  63. return value;
  64. };
  65. size_t resolved_index = 0;
  66. for (auto& stop : color_stop_list) {
  67. if (stop.transition_hint.has_value())
  68. resolved_color_stops[resolved_index].transition_hint = resolve_stop_position(stop.transition_hint->value);
  69. if (stop.color_stop.position.has_value())
  70. resolved_color_stops[resolved_index].position = resolve_stop_position(*stop.color_stop.position);
  71. if (stop.color_stop.second_position.has_value())
  72. resolved_color_stops[++resolved_index].position = resolve_stop_position(*stop.color_stop.second_position);
  73. ++resolved_index;
  74. }
  75. // 3. If any color stop still does not have a position, then, for each run of adjacent color stops
  76. // without positions, set their positions so that they are evenly spaced between the preceding
  77. // and following color stops with positions.
  78. // Note: Though not mentioned anywhere in the specification transition hints are counted as "color stops with positions".
  79. size_t i = 1;
  80. auto find_run_end = [&] {
  81. auto color_stop_has_position = [](auto& color_stop) {
  82. return color_stop.transition_hint.has_value() || isfinite(color_stop.position);
  83. };
  84. while (i < color_stop_list.size() - 1 && !color_stop_has_position(resolved_color_stops[i])) {
  85. i++;
  86. }
  87. return i;
  88. };
  89. while (i < resolved_color_stops.size() - 1) {
  90. auto& stop = resolved_color_stops[i];
  91. if (!isfinite(stop.position)) {
  92. auto run_start = i - 1;
  93. auto start_position = resolved_color_stops[i++].transition_hint.value_or(resolved_color_stops[run_start].position);
  94. auto run_end = find_run_end();
  95. auto end_position = resolved_color_stops[run_end].transition_hint.value_or(resolved_color_stops[run_end].position);
  96. auto spacing = (end_position - start_position) / (run_end - run_start);
  97. for (auto j = run_start + 1; j < run_end; j++) {
  98. resolved_color_stops[j].position = start_position + (j - run_start) * spacing;
  99. }
  100. }
  101. i++;
  102. }
  103. // Determine the location of the transition hint as a percentage of the distance between the two color stops,
  104. // denoted as a number between 0 and 1, where 0 indicates the hint is placed right on the first color stop,
  105. // and 1 indicates the hint is placed right on the second color stop.
  106. for (size_t i = 1; i < resolved_color_stops.size(); i++) {
  107. auto& color_stop = resolved_color_stops[i];
  108. auto& previous_color_stop = resolved_color_stops[i - 1];
  109. if (color_stop.transition_hint.has_value()) {
  110. auto stop_length = color_stop.position - previous_color_stop.position;
  111. color_stop.transition_hint = stop_length > 0 ? (*color_stop.transition_hint - previous_color_stop.position) / stop_length : 0;
  112. }
  113. }
  114. Optional<float> repeat_length = {};
  115. if (linear_gradient.is_repeating())
  116. repeat_length = resolved_color_stops.last().position - resolved_color_stops.first().position;
  117. return { gradient_angle, resolved_color_stops, repeat_length };
  118. }
  119. static float mix(float x, float y, float a)
  120. {
  121. return x * (1 - a) + y * a;
  122. }
  123. // Note: Gfx::gamma_accurate_blend() is NOT correct for linear gradients!
  124. static Gfx::Color color_mix(Gfx::Color x, Gfx::Color y, float a)
  125. {
  126. if (x.alpha() == y.alpha() || x.with_alpha(0) == y.with_alpha(0)) {
  127. return Gfx::Color {
  128. round_to<u8>(mix(x.red(), y.red(), a)),
  129. round_to<u8>(mix(x.green(), y.green(), a)),
  130. round_to<u8>(mix(x.blue(), y.blue(), a)),
  131. round_to<u8>(mix(x.alpha(), y.alpha(), a)),
  132. };
  133. }
  134. // Use slower but more visually pleasing premultiplied alpha mixing if both the color and alpha differ.
  135. // https://drafts.csswg.org/css-images/#coloring-gradient-line
  136. auto mixed_alpha = mix(x.alpha(), y.alpha(), a);
  137. auto premultiplied_mix_channel = [&](float channel_x, float channel_y, float a) {
  138. return round_to<u8>(mix(channel_x * (x.alpha() / 255.0f), channel_y * (y.alpha() / 255.0f), a) / (mixed_alpha / 255.0f));
  139. };
  140. return Gfx::Color {
  141. premultiplied_mix_channel(x.red(), y.red(), a),
  142. premultiplied_mix_channel(x.green(), y.green(), a),
  143. premultiplied_mix_channel(x.blue(), y.blue(), a),
  144. round_to<u8>(mixed_alpha),
  145. };
  146. }
  147. void paint_linear_gradient(PaintContext& context, Gfx::IntRect const& gradient_rect, LinearGradientData const& data)
  148. {
  149. float angle = normalized_gradient_angle_radians(data.gradient_angle);
  150. float sin_angle, cos_angle;
  151. AK::sincos(angle, sin_angle, cos_angle);
  152. // Full length of the gradient
  153. auto length = calulate_gradient_length(gradient_rect.size(), sin_angle, cos_angle);
  154. Gfx::FloatPoint offset { cos_angle * (length / 2), sin_angle * (length / 2) };
  155. auto center = gradient_rect.translated(-gradient_rect.location()).center();
  156. auto start_point = center.to_type<float>() - offset;
  157. // Rotate gradient line to be horizontal
  158. auto rotated_start_point_x = start_point.x() * cos_angle - start_point.y() * -sin_angle;
  159. auto color_stop_step = [&](auto& previous_stop, auto& next_stop, float position) -> float {
  160. if (position < previous_stop.position)
  161. return 0;
  162. if (position > next_stop.position)
  163. return 1;
  164. // For any given point between the two color stops,
  165. // determine the point’s location as a percentage of the distance between the two color stops.
  166. // Let this percentage be P.
  167. auto stop_length = next_stop.position - previous_stop.position;
  168. // FIXME: Avoids NaNs... Still not quite correct?
  169. if (stop_length <= 0)
  170. return 1;
  171. auto p = (position - previous_stop.position) / stop_length;
  172. if (!next_stop.transition_hint.has_value())
  173. return p;
  174. if (*next_stop.transition_hint >= 1)
  175. return 0;
  176. if (*next_stop.transition_hint <= 0)
  177. return 1;
  178. // Let C, the color weighting at that point, be equal to P^(logH(.5)).
  179. auto c = AK::pow(p, AK::log<float>(0.5) / AK::log(*next_stop.transition_hint));
  180. // The color at that point is then a linear blend between the colors of the two color stops,
  181. // blending (1 - C) of the first stop and C of the second stop.
  182. return c;
  183. };
  184. Vector<Gfx::Color, 1024> gradient_line_colors;
  185. auto gradient_color_count = round_to<int>(data.repeat_length.value_or(length));
  186. gradient_line_colors.resize(gradient_color_count);
  187. auto& color_stops = data.color_stops;
  188. auto start_offset = data.repeat_length.has_value() ? color_stops.first().position : 0.0f;
  189. auto start_offset_int = round_to<int>(start_offset);
  190. for (int loc = 0; loc < gradient_color_count; loc++) {
  191. Gfx::Color gradient_color = color_mix(
  192. color_stops[0].color,
  193. color_stops[1].color,
  194. color_stop_step(
  195. color_stops[0],
  196. color_stops[1],
  197. loc + start_offset_int));
  198. for (size_t i = 1; i < color_stops.size() - 1; i++) {
  199. gradient_color = color_mix(
  200. gradient_color,
  201. color_stops[i + 1].color,
  202. color_stop_step(
  203. color_stops[i],
  204. color_stops[i + 1],
  205. loc + start_offset_int));
  206. }
  207. gradient_line_colors[loc] = gradient_color;
  208. }
  209. auto lookup_color = [&](int loc) {
  210. return gradient_line_colors[clamp(loc, 0, gradient_color_count - 1)];
  211. };
  212. for (int y = 0; y < gradient_rect.height(); y++) {
  213. for (int x = 0; x < gradient_rect.width(); x++) {
  214. auto loc = (x * cos_angle - (gradient_rect.height() - y) * -sin_angle) - rotated_start_point_x - start_offset;
  215. if (data.repeat_length.has_value()) {
  216. loc = AK::fmod(loc, *data.repeat_length);
  217. if (loc < 0)
  218. loc = *data.repeat_length + loc;
  219. }
  220. // Blend between the two neighbouring colors (this fixes some nasty aliasing issues at small angles)
  221. auto blend = loc - static_cast<int>(loc);
  222. auto gradient_color = color_mix(lookup_color(loc - 1), lookup_color(loc), blend);
  223. context.painter().set_pixel(gradient_rect.x() + x, gradient_rect.y() + y, gradient_color, gradient_color.alpha() < 255);
  224. }
  225. }
  226. }
  227. }