SVGPathElement.cpp 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. /*
  2. * Copyright (c) 2020, Matthew Olsson <mattco@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <AK/Debug.h>
  7. #include <AK/ExtraMathConstants.h>
  8. #include <AK/Optional.h>
  9. #include <LibGfx/Painter.h>
  10. #include <LibGfx/Path.h>
  11. #include <LibWeb/DOM/Document.h>
  12. #include <LibWeb/DOM/Event.h>
  13. #include <LibWeb/Layout/SVGGeometryBox.h>
  14. #include <LibWeb/SVG/SVGPathElement.h>
  15. namespace Web::SVG {
  16. [[maybe_unused]] static void print_instruction(PathInstruction const& instruction)
  17. {
  18. VERIFY(PATH_DEBUG);
  19. auto& data = instruction.data;
  20. switch (instruction.type) {
  21. case PathInstructionType::Move:
  22. dbgln("Move (absolute={})", instruction.absolute);
  23. for (size_t i = 0; i < data.size(); i += 2)
  24. dbgln(" x={}, y={}", data[i], data[i + 1]);
  25. break;
  26. case PathInstructionType::ClosePath:
  27. dbgln("ClosePath (absolute={})", instruction.absolute);
  28. break;
  29. case PathInstructionType::Line:
  30. dbgln("Line (absolute={})", instruction.absolute);
  31. for (size_t i = 0; i < data.size(); i += 2)
  32. dbgln(" x={}, y={}", data[i], data[i + 1]);
  33. break;
  34. case PathInstructionType::HorizontalLine:
  35. dbgln("HorizontalLine (absolute={})", instruction.absolute);
  36. for (size_t i = 0; i < data.size(); ++i)
  37. dbgln(" x={}", data[i]);
  38. break;
  39. case PathInstructionType::VerticalLine:
  40. dbgln("VerticalLine (absolute={})", instruction.absolute);
  41. for (size_t i = 0; i < data.size(); ++i)
  42. dbgln(" y={}", data[i]);
  43. break;
  44. case PathInstructionType::Curve:
  45. dbgln("Curve (absolute={})", instruction.absolute);
  46. for (size_t i = 0; i < data.size(); i += 6)
  47. dbgln(" (x1={}, y1={}, x2={}, y2={}), (x={}, y={})", data[i], data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5]);
  48. break;
  49. case PathInstructionType::SmoothCurve:
  50. dbgln("SmoothCurve (absolute={})", instruction.absolute);
  51. for (size_t i = 0; i < data.size(); i += 4)
  52. dbgln(" (x2={}, y2={}), (x={}, y={})", data[i], data[i + 1], data[i + 2], data[i + 3]);
  53. break;
  54. case PathInstructionType::QuadraticBezierCurve:
  55. dbgln("QuadraticBezierCurve (absolute={})", instruction.absolute);
  56. for (size_t i = 0; i < data.size(); i += 4)
  57. dbgln(" (x1={}, y1={}), (x={}, y={})", data[i], data[i + 1], data[i + 2], data[i + 3]);
  58. break;
  59. case PathInstructionType::SmoothQuadraticBezierCurve:
  60. dbgln("SmoothQuadraticBezierCurve (absolute={})", instruction.absolute);
  61. for (size_t i = 0; i < data.size(); i += 2)
  62. dbgln(" x={}, y={}", data[i], data[i + 1]);
  63. break;
  64. case PathInstructionType::EllipticalArc:
  65. dbgln("EllipticalArc (absolute={})", instruction.absolute);
  66. for (size_t i = 0; i < data.size(); i += 7)
  67. dbgln(" (rx={}, ry={}) x-axis-rotation={}, large-arc-flag={}, sweep-flag={}, (x={}, y={})",
  68. data[i],
  69. data[i + 1],
  70. data[i + 2],
  71. data[i + 3],
  72. data[i + 4],
  73. data[i + 5],
  74. data[i + 6]);
  75. break;
  76. case PathInstructionType::Invalid:
  77. dbgln("Invalid");
  78. break;
  79. }
  80. }
  81. SVGPathElement::SVGPathElement(DOM::Document& document, DOM::QualifiedName qualified_name)
  82. : SVGGeometryElement(document, move(qualified_name))
  83. {
  84. }
  85. JS::ThrowCompletionOr<void> SVGPathElement::initialize(JS::Realm& realm)
  86. {
  87. MUST_OR_THROW_OOM(Base::initialize(realm));
  88. set_prototype(&Bindings::ensure_web_prototype<Bindings::SVGPathElementPrototype>(realm, "SVGPathElement"));
  89. return {};
  90. }
  91. void SVGPathElement::parse_attribute(DeprecatedFlyString const& name, DeprecatedString const& value)
  92. {
  93. SVGGeometryElement::parse_attribute(name, value);
  94. if (name == "d") {
  95. m_instructions = AttributeParser::parse_path_data(value);
  96. m_path.clear();
  97. }
  98. }
  99. Gfx::Path path_from_path_instructions(ReadonlySpan<PathInstruction> instructions)
  100. {
  101. Gfx::Path path;
  102. Optional<Gfx::FloatPoint> previous_control_point;
  103. PathInstructionType last_instruction = PathInstructionType::Invalid;
  104. for (auto& instruction : instructions) {
  105. // If the first path element uses relative coordinates, we treat them as absolute by making them relative to (0, 0).
  106. auto last_point = path.segments().is_empty() ? Gfx::FloatPoint { 0, 0 } : path.segments().last()->point();
  107. auto& absolute = instruction.absolute;
  108. auto& data = instruction.data;
  109. if constexpr (PATH_DEBUG) {
  110. print_instruction(instruction);
  111. }
  112. bool clear_last_control_point = true;
  113. switch (instruction.type) {
  114. case PathInstructionType::Move: {
  115. Gfx::FloatPoint point = { data[0], data[1] };
  116. if (absolute) {
  117. path.move_to(point);
  118. } else {
  119. path.move_to(point + last_point);
  120. }
  121. break;
  122. }
  123. case PathInstructionType::ClosePath:
  124. path.close();
  125. break;
  126. case PathInstructionType::Line: {
  127. Gfx::FloatPoint point = { data[0], data[1] };
  128. if (absolute) {
  129. path.line_to(point);
  130. } else {
  131. path.line_to(point + last_point);
  132. }
  133. break;
  134. }
  135. case PathInstructionType::HorizontalLine: {
  136. if (absolute)
  137. path.line_to(Gfx::FloatPoint { data[0], last_point.y() });
  138. else
  139. path.line_to(Gfx::FloatPoint { data[0] + last_point.x(), last_point.y() });
  140. break;
  141. }
  142. case PathInstructionType::VerticalLine: {
  143. if (absolute)
  144. path.line_to(Gfx::FloatPoint { last_point.x(), data[0] });
  145. else
  146. path.line_to(Gfx::FloatPoint { last_point.x(), data[0] + last_point.y() });
  147. break;
  148. }
  149. case PathInstructionType::EllipticalArc: {
  150. double rx = data[0];
  151. double ry = data[1];
  152. double x_axis_rotation = double { data[2] } * M_DEG2RAD;
  153. double large_arc_flag = data[3];
  154. double sweep_flag = data[4];
  155. Gfx::FloatPoint next_point;
  156. if (absolute)
  157. next_point = { data[5], data[6] };
  158. else
  159. next_point = { data[5] + last_point.x(), data[6] + last_point.y() };
  160. path.elliptical_arc_to(next_point, { rx, ry }, x_axis_rotation, large_arc_flag != 0, sweep_flag != 0);
  161. break;
  162. }
  163. case PathInstructionType::QuadraticBezierCurve: {
  164. clear_last_control_point = false;
  165. Gfx::FloatPoint through = { data[0], data[1] };
  166. Gfx::FloatPoint point = { data[2], data[3] };
  167. if (absolute) {
  168. path.quadratic_bezier_curve_to(through, point);
  169. previous_control_point = through;
  170. } else {
  171. auto control_point = through + last_point;
  172. path.quadratic_bezier_curve_to(control_point, point + last_point);
  173. previous_control_point = control_point;
  174. }
  175. break;
  176. }
  177. case PathInstructionType::SmoothQuadraticBezierCurve: {
  178. clear_last_control_point = false;
  179. if (!previous_control_point.has_value()
  180. || ((last_instruction != PathInstructionType::QuadraticBezierCurve) && (last_instruction != PathInstructionType::SmoothQuadraticBezierCurve))) {
  181. previous_control_point = last_point;
  182. }
  183. auto dx_end_control = last_point.dx_relative_to(previous_control_point.value());
  184. auto dy_end_control = last_point.dy_relative_to(previous_control_point.value());
  185. auto control_point = Gfx::FloatPoint { last_point.x() + dx_end_control, last_point.y() + dy_end_control };
  186. Gfx::FloatPoint end_point = { data[0], data[1] };
  187. if (absolute) {
  188. path.quadratic_bezier_curve_to(control_point, end_point);
  189. } else {
  190. path.quadratic_bezier_curve_to(control_point, end_point + last_point);
  191. }
  192. previous_control_point = control_point;
  193. break;
  194. }
  195. case PathInstructionType::Curve: {
  196. clear_last_control_point = false;
  197. Gfx::FloatPoint c1 = { data[0], data[1] };
  198. Gfx::FloatPoint c2 = { data[2], data[3] };
  199. Gfx::FloatPoint p2 = { data[4], data[5] };
  200. if (!absolute) {
  201. p2 += last_point;
  202. c1 += last_point;
  203. c2 += last_point;
  204. }
  205. path.cubic_bezier_curve_to(c1, c2, p2);
  206. previous_control_point = c2;
  207. break;
  208. }
  209. case PathInstructionType::SmoothCurve: {
  210. clear_last_control_point = false;
  211. if (!previous_control_point.has_value()
  212. || ((last_instruction != PathInstructionType::Curve) && (last_instruction != PathInstructionType::SmoothCurve))) {
  213. previous_control_point = last_point;
  214. }
  215. // 9.5.2. Reflected control points https://svgwg.org/svg2-draft/paths.html#ReflectedControlPoints
  216. // If the current point is (curx, cury) and the final control point of the previous path segment is (oldx2, oldy2),
  217. // then the reflected point (i.e., (newx1, newy1), the first control point of the current path segment) is:
  218. // (newx1, newy1) = (curx - (oldx2 - curx), cury - (oldy2 - cury))
  219. auto reflected_previous_control_x = last_point.x() - previous_control_point.value().dx_relative_to(last_point);
  220. auto reflected_previous_control_y = last_point.y() - previous_control_point.value().dy_relative_to(last_point);
  221. Gfx::FloatPoint c1 = Gfx::FloatPoint { reflected_previous_control_x, reflected_previous_control_y };
  222. Gfx::FloatPoint c2 = { data[0], data[1] };
  223. Gfx::FloatPoint p2 = { data[2], data[3] };
  224. if (!absolute) {
  225. p2 += last_point;
  226. c2 += last_point;
  227. }
  228. path.cubic_bezier_curve_to(c1, c2, p2);
  229. previous_control_point = c2;
  230. break;
  231. }
  232. case PathInstructionType::Invalid:
  233. VERIFY_NOT_REACHED();
  234. }
  235. if (clear_last_control_point) {
  236. previous_control_point = Gfx::FloatPoint {};
  237. }
  238. last_instruction = instruction.type;
  239. }
  240. return path;
  241. }
  242. Gfx::Path& SVGPathElement::get_path()
  243. {
  244. if (!m_path.has_value()) {
  245. m_path = path_from_path_instructions(m_instructions);
  246. }
  247. return m_path.value();
  248. }
  249. }