CanvasPattern.cpp 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. /*
  2. * Copyright (c) 2023, MacDue <macdue@dueutil.tech>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <LibGfx/Bitmap.h>
  7. #include <LibWeb/Bindings/CanvasPatternPrototype.h>
  8. #include <LibWeb/Bindings/Intrinsics.h>
  9. #include <LibWeb/HTML/CanvasPattern.h>
  10. #include <LibWeb/HTML/CanvasRenderingContext2D.h>
  11. #include <LibWeb/HTML/ImageBitmap.h>
  12. #include <LibWeb/SVG/SVGImageElement.h>
  13. namespace Web::HTML {
  14. JS_DEFINE_ALLOCATOR(CanvasPattern);
  15. void CanvasPatternPaintStyle::paint(Gfx::IntRect physical_bounding_box, PaintFunction paint) const
  16. {
  17. // 1. Create an infinite transparent black bitmap.
  18. // *waves magic wand 🪄*
  19. // Done!
  20. // 2. Place a copy of the image on the bitmap, anchored such that its top left corner
  21. // is at the origin of the coordinate space, with one coordinate space unit per CSS pixel of the image,
  22. // then place repeated copies of this image horizontally to the left and right, if the repetition behavior
  23. // is "repeat-x", or vertically up and down, if the repetition behavior is "repeat-y", or in all four directions
  24. // all over the bitmap, if the repetition behavior is "repeat".
  25. // FIMXE: If the original image data is a bitmap image, then the value painted at a point in the area of
  26. // the repetitions is computed by filtering the original image data. When scaling up, if the imageSmoothingEnabled
  27. // attribute is set to false, then the image must be rendered using nearest-neighbor interpolation.
  28. // Otherwise, the user agent may use any filtering algorithm (for example bilinear interpolation or nearest-neighbor).
  29. // User agents which support multiple filtering algorithms may use the value of the imageSmoothingQuality attribute
  30. // to guide the choice of filtering algorithm. When such a filtering algorithm requires a pixel value from outside
  31. // the original image data, it must instead use the value from wrapping the pixel's coordinates to the original
  32. // image's dimensions. (That is, the filter uses 'repeat' behavior, regardless of the value of the pattern's repetition behavior.)
  33. // FIXME: 3. Transform the resulting bitmap according to the pattern's transformation matrix.
  34. // FIXME: 4. Transform the resulting bitmap again, this time according to the current transformation matrix.
  35. // 5. Replace any part of the image outside the area in which the pattern is to be rendered with transparent black.
  36. // 6. The resulting bitmap is what is to be rendered, with the same origin and same scale.
  37. auto const bitmap_width = m_bitmap->width();
  38. auto const bitmap_height = m_bitmap->height();
  39. paint([=, this](auto point) {
  40. point.translate_by(physical_bounding_box.location());
  41. point = [&]() -> Gfx::IntPoint {
  42. switch (m_repetition) {
  43. case Repetition::NoRepeat: {
  44. return point;
  45. }
  46. case Repetition::Repeat: {
  47. return {
  48. point.x() % bitmap_width,
  49. point.y() % bitmap_height
  50. };
  51. }
  52. case Repetition::RepeatX: {
  53. return {
  54. point.x() % bitmap_width,
  55. point.y()
  56. };
  57. }
  58. case Repetition::RepeatY: {
  59. return {
  60. point.x(),
  61. point.y() % bitmap_height
  62. };
  63. }
  64. default:
  65. VERIFY_NOT_REACHED();
  66. }
  67. }();
  68. if (m_bitmap->rect().contains(point))
  69. return m_bitmap->get_pixel(point);
  70. return Gfx::Color();
  71. });
  72. }
  73. CanvasPattern::CanvasPattern(JS::Realm& realm, CanvasPatternPaintStyle& pattern)
  74. : PlatformObject(realm)
  75. , m_pattern(pattern)
  76. {
  77. }
  78. CanvasPattern::~CanvasPattern() = default;
  79. // https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-createpattern
  80. WebIDL::ExceptionOr<JS::GCPtr<CanvasPattern>> CanvasPattern::create(JS::Realm& realm, CanvasImageSource const& image, StringView repetition)
  81. {
  82. auto parse_repetition = [&](auto repetition) -> Optional<CanvasPatternPaintStyle::Repetition> {
  83. if (repetition == "repeat"sv)
  84. return CanvasPatternPaintStyle::Repetition::Repeat;
  85. if (repetition == "repeat-x"sv)
  86. return CanvasPatternPaintStyle::Repetition::RepeatX;
  87. if (repetition == "repeat-y"sv)
  88. return CanvasPatternPaintStyle::Repetition::RepeatY;
  89. if (repetition == "no-repeat"sv)
  90. return CanvasPatternPaintStyle::Repetition::NoRepeat;
  91. return {};
  92. };
  93. // 1. Let usability be the result of checking the usability of image.
  94. auto usability = TRY(check_usability_of_image(image));
  95. // 2. If usability is bad, then return null.
  96. if (usability == CanvasImageSourceUsability::Bad)
  97. return JS::GCPtr<CanvasPattern> {};
  98. // 3. Assert: usability is good.
  99. VERIFY(usability == CanvasImageSourceUsability::Good);
  100. // 4. If repetition is the empty string, then set it to "repeat".
  101. if (repetition.is_empty())
  102. repetition = "repeat"sv;
  103. // 5. If repetition is not identical to one of "repeat", "repeat-x", "repeat-y", or "no-repeat",
  104. // then throw a "SyntaxError" DOMException.
  105. auto repetition_value = parse_repetition(repetition);
  106. if (!repetition_value.has_value())
  107. return WebIDL::SyntaxError::create(realm, "Repetition value is not valid"_fly_string);
  108. // Note: Bitmap won't be null here, as if it were it would have "bad" usability.
  109. auto const& bitmap = *image.visit([](auto const& source) -> Gfx::Bitmap const* { return source->bitmap(); });
  110. // 6. Let pattern be a new CanvasPattern object with the image image and the repetition behavior given by repetition.
  111. auto pattern = TRY_OR_THROW_OOM(realm.vm(), CanvasPatternPaintStyle::create(bitmap, *repetition_value));
  112. // FIXME: 7. If image is not origin-clean, then mark pattern as not origin-clean.
  113. // 8. Return pattern.
  114. return realm.heap().allocate<CanvasPattern>(realm, realm, *pattern);
  115. }
  116. void CanvasPattern::initialize(JS::Realm& realm)
  117. {
  118. Base::initialize(realm);
  119. WEB_SET_PROTOTYPE_FOR_INTERFACE(CanvasPattern);
  120. }
  121. }