mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-12-07 21:59:54 +00:00
LibWeb: Implement support for drawing with CanvasPattern
We already had the API, but drawing to the canvas was not affected by any created CanvasPattern. This moves CanvasPatternPaintStyle to LibGfx so we don't have to reach into LibWeb, and implements the plumbing to let Skia use images as a fill pattern.
This commit is contained in:
Jelle Raaijmakers
Tim Ledbetter
parent
9753b8e62c
commit
62ae4e878f
Notes:
github-actions[bot]
2025-10-23 12:21:23 +00:00
Author: https://github.com/gmta
Commit: 62ae4e878f
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6548
Reviewed-by: https://github.com/tcl3 ✅
20 changed files with 237 additions and 167 deletions
|
|
@ -1,102 +1,94 @@
|
|||
/*
|
||||
* Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
|
||||
* Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#include <LibWeb/HTML/Canvas/CanvasDrawImage.h>
|
||||
#include <LibWeb/HTML/ImageBitmap.h>
|
||||
#include <LibWeb/SVG/SVGImageElement.h>
|
||||
|
||||
namespace Web::HTML {
|
||||
|
||||
static void default_source_size(CanvasImageSource const& image, float& source_width, float& source_height)
|
||||
Gfx::IntSize canvas_image_source_dimensions(CanvasImageSource const& image)
|
||||
{
|
||||
image.visit(
|
||||
[&source_width, &source_height](GC::Root<HTMLImageElement> const& source) {
|
||||
if (source->immutable_bitmap()) {
|
||||
source_width = source->immutable_bitmap()->width();
|
||||
source_height = source->immutable_bitmap()->height();
|
||||
} else {
|
||||
// FIXME: This is very janky and not correct.
|
||||
source_width = source->width();
|
||||
source_height = source->height();
|
||||
}
|
||||
},
|
||||
[&source_width, &source_height](GC::Root<SVG::SVGImageElement> const& source) {
|
||||
if (source->current_image_bitmap()) {
|
||||
source_width = source->current_image_bitmap()->width();
|
||||
source_height = source->current_image_bitmap()->height();
|
||||
} else {
|
||||
// FIXME: This is very janky and not correct.
|
||||
source_width = source->width()->anim_val()->value();
|
||||
source_height = source->height()->anim_val()->value();
|
||||
}
|
||||
},
|
||||
[&source_width, &source_height](GC::Root<HTML::HTMLVideoElement> const& source) {
|
||||
if (auto const bitmap = source->bitmap(); bitmap) {
|
||||
source_width = bitmap->width();
|
||||
source_height = bitmap->height();
|
||||
} else {
|
||||
source_width = source->video_width();
|
||||
source_height = source->video_height();
|
||||
}
|
||||
},
|
||||
[&source_width, &source_height](GC::Root<OffscreenCanvas> const& source) {
|
||||
auto const bitmap = source->bitmap();
|
||||
return image.visit(
|
||||
[](GC::Root<HTMLImageElement> const& source) -> Gfx::IntSize {
|
||||
if (auto immutable_bitmap = source->immutable_bitmap())
|
||||
return immutable_bitmap->size();
|
||||
|
||||
if (!bitmap) {
|
||||
source_width = 0;
|
||||
source_height = 0;
|
||||
return;
|
||||
}
|
||||
source_width = bitmap->width();
|
||||
source_height = bitmap->height();
|
||||
// FIXME: This is very janky and not correct.
|
||||
return { source->width(), source->height() };
|
||||
},
|
||||
[&source_width, &source_height](GC::Root<HTMLCanvasElement> const& source) {
|
||||
if (source->surface()) {
|
||||
source_width = source->surface()->size().width();
|
||||
source_height = source->surface()->size().height();
|
||||
} else {
|
||||
source_width = source->width();
|
||||
source_height = source->height();
|
||||
}
|
||||
[](GC::Root<SVG::SVGImageElement> const& source) -> Gfx::IntSize {
|
||||
if (auto immutable_bitmap = source->current_image_bitmap())
|
||||
return immutable_bitmap->size();
|
||||
|
||||
// FIXME: This is very janky and not correct.
|
||||
return { source->width()->anim_val()->value(), source->height()->anim_val()->value() };
|
||||
},
|
||||
[&source_width, &source_height](auto const& source) {
|
||||
if (source->bitmap()) {
|
||||
source_width = source->bitmap()->width();
|
||||
source_height = source->bitmap()->height();
|
||||
} else {
|
||||
source_width = source->width();
|
||||
source_height = source->height();
|
||||
}
|
||||
[](GC::Root<HTMLCanvasElement> const& source) -> Gfx::IntSize {
|
||||
if (auto painting_surface = source->surface())
|
||||
return painting_surface->size();
|
||||
return { source->width(), source->height() };
|
||||
},
|
||||
[](GC::Root<ImageBitmap> const& source) -> Gfx::IntSize {
|
||||
if (auto* bitmap = source->bitmap())
|
||||
return bitmap->size();
|
||||
return { source->width(), source->height() };
|
||||
},
|
||||
[](GC::Root<OffscreenCanvas> const& source) -> Gfx::IntSize {
|
||||
if (auto bitmap = source->bitmap())
|
||||
return bitmap->size();
|
||||
return {};
|
||||
},
|
||||
[](GC::Root<HTMLVideoElement> const& source) -> Gfx::IntSize {
|
||||
if (auto bitmap = source->bitmap())
|
||||
return bitmap->size();
|
||||
return { source->video_width(), source->video_height() };
|
||||
});
|
||||
}
|
||||
|
||||
WebIDL::ExceptionOr<void> CanvasDrawImage::draw_image(Web::HTML::CanvasImageSource const& image, float destination_x, float destination_y)
|
||||
RefPtr<Gfx::ImmutableBitmap> canvas_image_source_bitmap(CanvasImageSource const& image)
|
||||
{
|
||||
return image.visit(
|
||||
[](OneOf<GC::Root<HTMLImageElement>, GC::Root<SVG::SVGImageElement>> auto const& element) {
|
||||
return element->default_image_bitmap();
|
||||
},
|
||||
[](GC::Root<HTMLCanvasElement> const& canvas) -> RefPtr<Gfx::ImmutableBitmap> {
|
||||
auto surface = canvas->surface();
|
||||
if (!surface)
|
||||
return Gfx::ImmutableBitmap::create(*canvas->get_bitmap_from_surface());
|
||||
return Gfx::ImmutableBitmap::create_snapshot_from_painting_surface(*surface);
|
||||
},
|
||||
[](OneOf<GC::Root<ImageBitmap>, GC::Root<OffscreenCanvas>, GC::Root<HTMLVideoElement>> auto const& source) -> RefPtr<Gfx::ImmutableBitmap> {
|
||||
auto bitmap = source->bitmap();
|
||||
if (!bitmap)
|
||||
return {};
|
||||
return Gfx::ImmutableBitmap::create(*bitmap);
|
||||
});
|
||||
}
|
||||
|
||||
WebIDL::ExceptionOr<void> CanvasDrawImage::draw_image(CanvasImageSource const& image, float destination_x, float destination_y)
|
||||
{
|
||||
// If not specified, the dw and dh arguments must default to the values of sw and sh, interpreted such that one CSS pixel in the image is treated as one unit in the output bitmap's coordinate space.
|
||||
// If the sx, sy, sw, and sh arguments are omitted, then they must default to 0, 0, the image's intrinsic width in image pixels, and the image's intrinsic height in image pixels, respectively.
|
||||
// If the image has no intrinsic dimensions, then the concrete object size must be used instead, as determined using the CSS "Concrete Object Size Resolution" algorithm, with the specified size having
|
||||
// neither a definite width nor height, nor any additional constraints, the object's intrinsic properties being those of the image argument, and the default object size being the size of the output bitmap.
|
||||
float source_width;
|
||||
float source_height;
|
||||
default_source_size(image, source_width, source_height);
|
||||
return draw_image_internal(image, 0, 0, source_width, source_height, destination_x, destination_y, source_width, source_height);
|
||||
auto size = canvas_image_source_dimensions(image);
|
||||
return draw_image_internal(image, 0, 0, size.width(), size.height(), destination_x, destination_y, size.width(), size.height());
|
||||
}
|
||||
|
||||
WebIDL::ExceptionOr<void> CanvasDrawImage::draw_image(Web::HTML::CanvasImageSource const& image, float destination_x, float destination_y, float destination_width, float destination_height)
|
||||
WebIDL::ExceptionOr<void> CanvasDrawImage::draw_image(CanvasImageSource const& image, float destination_x, float destination_y, float destination_width, float destination_height)
|
||||
{
|
||||
// If the sx, sy, sw, and sh arguments are omitted, then they must default to 0, 0, the image's intrinsic width in image pixels, and the image's intrinsic height in image pixels, respectively.
|
||||
// If the image has no intrinsic dimensions, then the concrete object size must be used instead, as determined using the CSS "Concrete Object Size Resolution" algorithm, with the specified size having
|
||||
// neither a definite width nor height, nor any additional constraints, the object's intrinsic properties being those of the image argument, and the default object size being the size of the output bitmap.
|
||||
float source_width;
|
||||
float source_height;
|
||||
default_source_size(image, source_width, source_height);
|
||||
return draw_image_internal(image, 0, 0, source_width, source_height, destination_x, destination_y, destination_width, destination_height);
|
||||
auto size = canvas_image_source_dimensions(image);
|
||||
return draw_image_internal(image, 0, 0, size.width(), size.height(), destination_x, destination_y, destination_width, destination_height);
|
||||
}
|
||||
|
||||
WebIDL::ExceptionOr<void> CanvasDrawImage::draw_image(Web::HTML::CanvasImageSource const& image, float source_x, float source_y, float source_width, float source_height, float destination_x, float destination_y, float destination_width, float destination_height)
|
||||
WebIDL::ExceptionOr<void> CanvasDrawImage::draw_image(CanvasImageSource const& image, float source_x, float source_y, float source_width, float source_height, float destination_x, float destination_y, float destination_width, float destination_height)
|
||||
{
|
||||
return draw_image_internal(image, source_x, source_y, source_width, source_height, destination_x, destination_y, destination_width, destination_height);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,19 @@
|
|||
/*
|
||||
* Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
|
||||
* Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#pragma once
|
||||
|
||||
#include <LibGfx/Size.h>
|
||||
#include <LibWeb/Forward.h>
|
||||
#include <LibWeb/HTML/HTMLCanvasElement.h>
|
||||
#include <LibWeb/HTML/HTMLImageElement.h>
|
||||
#include <LibWeb/HTML/HTMLVideoElement.h>
|
||||
#include <LibWeb/HTML/OffscreenCanvas.h>
|
||||
#include <LibWeb/SVG/SVGImageElement.h>
|
||||
#include <LibWeb/WebIDL/ExceptionOr.h>
|
||||
|
||||
namespace Web::HTML {
|
||||
|
|
@ -19,6 +22,9 @@ namespace Web::HTML {
|
|||
// NOTE: This is the Variant created by the IDL wrapper generator, and needs to be updated accordingly.
|
||||
using CanvasImageSource = Variant<GC::Root<HTMLImageElement>, GC::Root<SVG::SVGImageElement>, GC::Root<HTMLCanvasElement>, GC::Root<ImageBitmap>, GC::Root<OffscreenCanvas>, GC::Root<HTMLVideoElement>>;
|
||||
|
||||
Gfx::IntSize canvas_image_source_dimensions(CanvasImageSource const&);
|
||||
RefPtr<Gfx::ImmutableBitmap> canvas_image_source_bitmap(CanvasImageSource const&);
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/canvas.html#canvasdrawimage
|
||||
class CanvasDrawImage {
|
||||
public:
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
#include <LibWeb/HTML/Canvas/CanvasState.h>
|
||||
#include <LibWeb/HTML/CanvasGradient.h>
|
||||
#include <LibWeb/HTML/CanvasPattern.h>
|
||||
#include <LibWeb/HTML/HTMLCanvasElement.h>
|
||||
|
||||
namespace Web::HTML {
|
||||
|
||||
|
|
|
|||
|
|
@ -16,9 +16,8 @@
|
|||
#include <LibGfx/Font/Font.h>
|
||||
#include <LibGfx/FontCascadeList.h>
|
||||
#include <LibGfx/PaintStyle.h>
|
||||
#include <LibGfx/Path.h>
|
||||
#include <LibGfx/WindingRule.h>
|
||||
#include <LibWeb/Bindings/CanvasRenderingContext2DPrototype.h>
|
||||
#include <LibWeb/CSS/StyleValues/StyleValue.h>
|
||||
#include <LibWeb/HTML/CanvasGradient.h>
|
||||
#include <LibWeb/HTML/CanvasPattern.h>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,21 @@
|
|||
/*
|
||||
* Copyright (c) 2023, MacDue <macdue@dueutil.tech>
|
||||
* Copyright (c) 2024, Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
|
||||
* Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#include <LibGfx/Bitmap.h>
|
||||
#include <LibWeb/Bindings/CanvasPatternPrototype.h>
|
||||
#include <LibWeb/Bindings/Intrinsics.h>
|
||||
#include <LibWeb/HTML/CanvasPattern.h>
|
||||
#include <LibWeb/HTML/CanvasRenderingContext2D.h>
|
||||
#include <LibWeb/SVG/SVGImageElement.h>
|
||||
|
||||
namespace Web::HTML {
|
||||
|
||||
GC_DEFINE_ALLOCATOR(CanvasPattern);
|
||||
|
||||
CanvasPattern::CanvasPattern(JS::Realm& realm, CanvasPatternPaintStyle& pattern)
|
||||
CanvasPattern::CanvasPattern(JS::Realm& realm, Gfx::CanvasPatternPaintStyle& pattern)
|
||||
: PlatformObject(realm)
|
||||
, m_pattern(pattern)
|
||||
{
|
||||
|
|
@ -27,15 +26,15 @@ CanvasPattern::~CanvasPattern() = default;
|
|||
// https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-createpattern
|
||||
WebIDL::ExceptionOr<GC::Ptr<CanvasPattern>> CanvasPattern::create(JS::Realm& realm, CanvasImageSource const& image, StringView repetition)
|
||||
{
|
||||
auto parse_repetition = [&](auto repetition) -> Optional<CanvasPatternPaintStyle::Repetition> {
|
||||
if (repetition == "repeat"sv)
|
||||
return CanvasPatternPaintStyle::Repetition::Repeat;
|
||||
if (repetition == "repeat-x"sv)
|
||||
return CanvasPatternPaintStyle::Repetition::RepeatX;
|
||||
if (repetition == "repeat-y"sv)
|
||||
return CanvasPatternPaintStyle::Repetition::RepeatY;
|
||||
if (repetition == "no-repeat"sv)
|
||||
return CanvasPatternPaintStyle::Repetition::NoRepeat;
|
||||
auto parse_repetition = [&](auto value) -> Optional<Gfx::CanvasPatternPaintStyle::Repetition> {
|
||||
if (value == "repeat"sv)
|
||||
return Gfx::CanvasPatternPaintStyle::Repetition::Repeat;
|
||||
if (value == "repeat-x"sv)
|
||||
return Gfx::CanvasPatternPaintStyle::Repetition::RepeatX;
|
||||
if (value == "repeat-y"sv)
|
||||
return Gfx::CanvasPatternPaintStyle::Repetition::RepeatY;
|
||||
if (value == "no-repeat"sv)
|
||||
return Gfx::CanvasPatternPaintStyle::Repetition::NoRepeat;
|
||||
return {};
|
||||
};
|
||||
|
||||
|
|
@ -60,12 +59,14 @@ WebIDL::ExceptionOr<GC::Ptr<CanvasPattern>> CanvasPattern::create(JS::Realm& rea
|
|||
return WebIDL::SyntaxError::create(realm, "Repetition value is not valid"_utf16);
|
||||
|
||||
// 6. Let pattern be a new CanvasPattern object with the image image and the repetition behavior given by repetition.
|
||||
auto pattern = TRY_OR_THROW_OOM(realm.vm(), CanvasPatternPaintStyle::create(image, *repetition_value));
|
||||
auto immutable_bitmap = canvas_image_source_bitmap(image);
|
||||
auto paint_style = TRY_OR_THROW_OOM(realm.vm(), Gfx::CanvasPatternPaintStyle::create(immutable_bitmap, *repetition_value));
|
||||
auto pattern = realm.create<CanvasPattern>(realm, *paint_style);
|
||||
|
||||
// FIXME: 7. If image is not origin-clean, then mark pattern as not origin-clean.
|
||||
|
||||
// 8. Return pattern.
|
||||
return realm.create<CanvasPattern>(realm, *pattern);
|
||||
return pattern;
|
||||
}
|
||||
|
||||
void CanvasPattern::initialize(JS::Realm& realm)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/*
|
||||
* Copyright (c) 2023, MacDue <macdue@dueutil.tech>
|
||||
* Copyright (c) 2025, Shannon Booth <shannon@serenityos.org>
|
||||
* Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
|
@ -13,33 +14,6 @@
|
|||
|
||||
namespace Web::HTML {
|
||||
|
||||
class CanvasPatternPaintStyle final : public Gfx::PaintStyle {
|
||||
public:
|
||||
enum class Repetition {
|
||||
Repeat,
|
||||
RepeatX,
|
||||
RepeatY,
|
||||
NoRepeat
|
||||
};
|
||||
|
||||
static ErrorOr<NonnullRefPtr<CanvasPatternPaintStyle>> create(CanvasImageSource image, Repetition repetition)
|
||||
{
|
||||
return adopt_nonnull_ref_or_enomem(new (nothrow) CanvasPatternPaintStyle(move(image), repetition));
|
||||
}
|
||||
|
||||
Repetition repetition() const { return m_repetition; }
|
||||
|
||||
private:
|
||||
CanvasPatternPaintStyle(CanvasImageSource image, Repetition repetition)
|
||||
: m_image(move(image))
|
||||
, m_repetition(repetition)
|
||||
{
|
||||
}
|
||||
|
||||
CanvasImageSource m_image;
|
||||
Repetition m_repetition { Repetition::Repeat };
|
||||
};
|
||||
|
||||
class CanvasPattern final : public Bindings::PlatformObject {
|
||||
WEB_PLATFORM_OBJECT(CanvasPattern, Bindings::PlatformObject);
|
||||
GC_DECLARE_ALLOCATOR(CanvasPattern);
|
||||
|
|
@ -52,11 +26,11 @@ public:
|
|||
NonnullRefPtr<Gfx::PaintStyle> to_gfx_paint_style() { return m_pattern; }
|
||||
|
||||
private:
|
||||
CanvasPattern(JS::Realm&, CanvasPatternPaintStyle&);
|
||||
CanvasPattern(JS::Realm&, Gfx::CanvasPatternPaintStyle&);
|
||||
|
||||
virtual void initialize(JS::Realm&) override;
|
||||
|
||||
NonnullRefPtr<CanvasPatternPaintStyle> m_pattern;
|
||||
NonnullRefPtr<Gfx::CanvasPatternPaintStyle> m_pattern;
|
||||
};
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@
|
|||
#include <LibWeb/HTML/CanvasRenderingContext2D.h>
|
||||
#include <LibWeb/HTML/HTMLCanvasElement.h>
|
||||
#include <LibWeb/HTML/HTMLImageElement.h>
|
||||
#include <LibWeb/HTML/HTMLMediaElement.h>
|
||||
#include <LibWeb/HTML/HTMLVideoElement.h>
|
||||
#include <LibWeb/HTML/ImageBitmap.h>
|
||||
#include <LibWeb/HTML/ImageData.h>
|
||||
#include <LibWeb/HTML/ImageRequest.h>
|
||||
|
|
@ -135,31 +137,7 @@ WebIDL::ExceptionOr<void> CanvasRenderingContext2D::draw_image_internal(CanvasIm
|
|||
if (usability == CanvasImageSourceUsability::Bad)
|
||||
return {};
|
||||
|
||||
auto bitmap = image.visit(
|
||||
[](GC::Root<HTMLImageElement> const& source) -> RefPtr<Gfx::ImmutableBitmap> {
|
||||
auto width = source->intrinsic_width().value_or({}).to_int();
|
||||
auto height = source->intrinsic_height().value_or({}).to_int();
|
||||
return source->default_image_bitmap_sized({ width, height });
|
||||
},
|
||||
[](GC::Root<SVG::SVGImageElement> const& source) -> RefPtr<Gfx::ImmutableBitmap> {
|
||||
auto width = source->intrinsic_width().value_or({}).to_int();
|
||||
auto height = source->intrinsic_height().value_or({}).to_int();
|
||||
return source->default_image_bitmap_sized({ width, height });
|
||||
},
|
||||
[](GC::Root<OffscreenCanvas> const& source) -> RefPtr<Gfx::ImmutableBitmap> { return Gfx::ImmutableBitmap::create(*source->bitmap()); },
|
||||
[](GC::Root<HTMLCanvasElement> const& source) -> RefPtr<Gfx::ImmutableBitmap> {
|
||||
auto surface = source->surface();
|
||||
if (!surface)
|
||||
return {};
|
||||
return Gfx::ImmutableBitmap::create_snapshot_from_painting_surface(*surface);
|
||||
},
|
||||
[](GC::Root<HTMLVideoElement> const& source) -> RefPtr<Gfx::ImmutableBitmap> { return Gfx::ImmutableBitmap::create(*source->bitmap()); },
|
||||
[](GC::Root<ImageBitmap> const& source) -> RefPtr<Gfx::ImmutableBitmap> {
|
||||
auto* bitmap = source->bitmap();
|
||||
if (!bitmap)
|
||||
return {};
|
||||
return Gfx::ImmutableBitmap::create(*bitmap);
|
||||
});
|
||||
auto bitmap = canvas_image_source_bitmap(image);
|
||||
if (!bitmap)
|
||||
return {};
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ public:
|
|||
String alt() const { return get_attribute_value(HTML::AttributeNames::alt); }
|
||||
|
||||
RefPtr<Gfx::ImmutableBitmap> immutable_bitmap() const;
|
||||
RefPtr<Gfx::ImmutableBitmap> default_image_bitmap_sized(Gfx::IntSize) const;
|
||||
virtual RefPtr<Gfx::ImmutableBitmap> default_image_bitmap_sized(Gfx::IntSize) const override;
|
||||
|
||||
WebIDL::UnsignedLong width() const;
|
||||
WebIDL::ExceptionOr<void> set_width(WebIDL::UnsignedLong);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue