RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 19:27:45 +00:00
Code Issues Activity Actions

PixelPaint: Add rounded rectangles (both with/without antialiasing)

Browse source
This commit is contained in:
MacDue 2022-06-01 22:17:55 +01:00 • committed by Andreas Kling
parent a30c81104d
commit f1baa56cc8
2 changed files with 85 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

107
Userland/Applications/PixelPaint/Tools/RectangleTool.cpp
View file

@ -1,6 +1,7 @@
/* /*
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org> * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
* Copyright (c) 2021, Mustafa Quraish <mustafa@serenityos.org> * Copyright (c) 2021, Mustafa Quraish <mustafa@serenityos.org>
* Copyright (c) 2022, MacDue <macdue@dueutil.tech>
* Copyright (c) 2022, the SerenityOS developers. * Copyright (c) 2022, the SerenityOS developers.
* *
* SPDX-License-Identifier: BSD-2-Clause * SPDX-License-Identifier: BSD-2-Clause
@ -11,17 +12,19 @@
#include "../Layer.h" #include "../Layer.h"
#include <LibGUI/Action.h> #include <LibGUI/Action.h>
#include <LibGUI/BoxLayout.h> #include <LibGUI/BoxLayout.h>
#include <LibGUI/CheckBox.h>
#include <LibGUI/Label.h> #include <LibGUI/Label.h>
#include <LibGUI/Menu.h> #include <LibGUI/Menu.h>
#include <LibGUI/Painter.h> #include <LibGUI/Painter.h>
#include <LibGUI/RadioButton.h> #include <LibGUI/RadioButton.h>
#include <LibGUI/TextBox.h> #include <LibGUI/TextBox.h>
#include <LibGUI/ValueSlider.h> #include <LibGUI/ValueSlider.h>
#include <LibGfx/AntiAliasingPainter.h>
#include <LibGfx/Rect.h> #include <LibGfx/Rect.h>
namespace PixelPaint { namespace PixelPaint {
void RectangleTool::draw_using(GUI::Painter& painter, Gfx::IntPoint const& start_position, Gfx::IntPoint const& end_position, int thickness) void RectangleTool::draw_using(GUI::Painter& painter, Gfx::IntPoint const& start_position, Gfx::IntPoint const& end_position, int thickness, int corner_radius)
{ {
Gfx::IntRect rect; Gfx::IntRect rect;
if (m_draw_mode == DrawMode::FromCenter) { if (m_draw_mode == DrawMode::FromCenter) {
@ -41,6 +44,20 @@ void RectangleTool::draw_using(GUI::Painter& painter, Gfx::IntPoint const& start
case FillMode::Gradient: case FillMode::Gradient:
painter.fill_rect_with_gradient(rect, m_editor->primary_color(), m_editor->secondary_color()); painter.fill_rect_with_gradient(rect, m_editor->primary_color(), m_editor->secondary_color());
break; break;
case FillMode::RoundedCorners: {
int min_dimension = corner_radius * 2;
if (rect.width() < min_dimension)
rect.set_width(min_dimension);
if (rect.height() < min_dimension)
rect.set_height(min_dimension);
if (m_antialias_enabled) {
Gfx::AntiAliasingPainter aa_painter { painter };
aa_painter.fill_rect_with_rounded_corners(rect, m_editor->color_for(m_drawing_button), corner_radius);
} else {
painter.fill_rect_with_rounded_corners(rect, m_editor->color_for(m_drawing_button), corner_radius);
}
break;
}
default: default:
VERIFY_NOT_REACHED(); VERIFY_NOT_REACHED();
} }
@ -71,7 +88,7 @@ void RectangleTool::on_mouseup(Layer* layer, MouseEvent& event)
if (event.layer_event().button() == m_drawing_button) { if (event.layer_event().button() == m_drawing_button) {
GUI::Painter painter(layer->currently_edited_bitmap()); GUI::Painter painter(layer->currently_edited_bitmap());
draw_using(painter, m_rectangle_start_position, m_rectangle_end_position, m_thickness); draw_using(painter, m_rectangle_start_position, m_rectangle_end_position, m_thickness, m_corner_radius);
m_drawing_button = GUI::MouseButton::None; m_drawing_button = GUI::MouseButton::None;
layer->did_modify_bitmap(); layer->did_modify_bitmap();
m_editor->update(); m_editor->update();
@ -108,7 +125,7 @@ void RectangleTool::on_second_paint(Layer const* layer, GUI::PaintEvent& event)
painter.add_clip_rect(event.rect()); painter.add_clip_rect(event.rect());
auto start_position = editor_stroke_position(m_rectangle_start_position, m_thickness); auto start_position = editor_stroke_position(m_rectangle_start_position, m_thickness);
auto end_position = editor_stroke_position(m_rectangle_end_position, m_thickness); auto end_position = editor_stroke_position(m_rectangle_end_position, m_thickness);
draw_using(painter, start_position, end_position, AK::max(m_thickness * m_editor->scale(), 1)); draw_using(painter, start_position, end_position, AK::max(m_thickness * m_editor->scale(), 1), m_corner_radius * m_editor->scale());
} }
void RectangleTool::on_keydown(GUI::KeyEvent& event) void RectangleTool::on_keydown(GUI::KeyEvent& event)
@ -127,57 +144,93 @@ GUI::Widget* RectangleTool::get_properties_widget()
m_properties_widget = GUI::Widget::construct(); m_properties_widget = GUI::Widget::construct();
m_properties_widget->set_layout<GUI::VerticalBoxLayout>(); m_properties_widget->set_layout<GUI::VerticalBoxLayout>();
auto& thickness_container = m_properties_widget->add<GUI::Widget>(); auto& thickness_or_radius_container = m_properties_widget->add<GUI::Widget>();
thickness_container.set_fixed_height(20); thickness_or_radius_container.set_fixed_height(20);
thickness_container.set_layout<GUI::HorizontalBoxLayout>(); thickness_or_radius_container.set_layout<GUI::HorizontalBoxLayout>();
auto& thickness_label = thickness_container.add<GUI::Label>("Thickness:"); auto& thickness_or_radius_label = thickness_or_radius_container.add<GUI::Label>();
thickness_label.set_text_alignment(Gfx::TextAlignment::CenterLeft); thickness_or_radius_label.set_text_alignment(Gfx::TextAlignment::CenterLeft);
thickness_label.set_fixed_size(80, 20); thickness_or_radius_label.set_fixed_size(80, 20);
auto& thickness_slider = thickness_container.add<GUI::ValueSlider>(Orientation::Horizontal, "px"); auto& thickness_or_radius_slider = thickness_or_radius_container.add<GUI::ValueSlider>(Orientation::Horizontal, "px");
thickness_slider.set_range(1, 10);
thickness_slider.set_value(m_thickness);
thickness_slider.on_change = [&](int value) { thickness_or_radius_slider.on_change = [&](int value) {
if (m_fill_mode == FillMode::RoundedCorners) {
m_corner_radius = value;
} else
m_thickness = value; m_thickness = value;
}; };
set_primary_slider(&thickness_slider);
auto update_slider = [&] {
auto update_values = [&](auto label, int value, int range_min, int range_max = 10) {
thickness_or_radius_label.set_text(label);
thickness_or_radius_slider.set_range(range_min, range_max);
thickness_or_radius_slider.set_value(value);
};
if (m_fill_mode == FillMode::RoundedCorners)
update_values("Radius:", m_corner_radius, 0, 50);
else
update_values("Thickness:", m_thickness, 1);
};
update_slider();
set_primary_slider(&thickness_or_radius_slider);
auto& mode_container = m_properties_widget->add<GUI::Widget>(); auto& mode_container = m_properties_widget->add<GUI::Widget>();
mode_container.set_fixed_height(70); mode_container.set_fixed_height(90);
mode_container.set_layout<GUI::HorizontalBoxLayout>(); mode_container.set_layout<GUI::HorizontalBoxLayout>();
auto& mode_label = mode_container.add<GUI::Label>("Mode:"); auto& mode_label = mode_container.add<GUI::Label>("Mode:");
mode_label.set_text_alignment(Gfx::TextAlignment::CenterLeft); mode_label.set_text_alignment(Gfx::TextAlignment::CenterLeft);
mode_label.set_fixed_size(80, 20); mode_label.set_fixed_size(30, 20);
auto& mode_radio_container = mode_container.add<GUI::Widget>(); auto& mode_radio_container = mode_container.add<GUI::Widget>();
mode_radio_container.set_layout<GUI::VerticalBoxLayout>(); mode_radio_container.set_layout<GUI::VerticalBoxLayout>();
auto& outline_mode_radio = mode_radio_container.add<GUI::RadioButton>("Outline"); auto& outline_mode_radio = mode_radio_container.add<GUI::RadioButton>("Outline");
auto& fill_mode_radio = mode_radio_container.add<GUI::RadioButton>("Fill"); auto& fill_mode_radio = mode_radio_container.add<GUI::RadioButton>("Fill");
auto& gradient_mode_radio = mode_radio_container.add<GUI::RadioButton>("Gradient"); auto& gradient_mode_radio = mode_radio_container.add<GUI::RadioButton>("Gradient");
mode_radio_container.set_fixed_width(70);
outline_mode_radio.on_checked = [&](bool) { auto& rounded_corners_mode_radio = mode_radio_container.add<GUI::RadioButton>("Rounded");
outline_mode_radio.on_checked = [&, update_slider](bool) {
m_fill_mode = FillMode::Outline; m_fill_mode = FillMode::Outline;
update_slider();
}; };
fill_mode_radio.on_checked = [&](bool) { fill_mode_radio.on_checked = [&, update_slider](bool) {
m_fill_mode = FillMode::Fill; m_fill_mode = FillMode::Fill;
update_slider();
}; };
gradient_mode_radio.on_checked = [&](bool) { gradient_mode_radio.on_checked = [&, update_slider](bool) {
m_fill_mode = FillMode::Gradient; m_fill_mode = FillMode::Gradient;
update_slider();
};
rounded_corners_mode_radio.on_checked = [&, update_slider](bool) {
m_fill_mode = FillMode::RoundedCorners;
update_slider();
}; };
outline_mode_radio.set_checked(true); outline_mode_radio.set_checked(true);
auto& aspect_container = m_properties_widget->add<GUI::Widget>(); auto& mode_extras_container = mode_container.add<GUI::Widget>();
aspect_container.set_fixed_height(20); mode_extras_container.set_layout<GUI::VerticalBoxLayout>();
aspect_container.set_layout<GUI::HorizontalBoxLayout>();
auto& aa_enable_checkbox = mode_extras_container.add<GUI::CheckBox>("Anti-alias");
aa_enable_checkbox.on_checked = [&](bool checked) {
m_antialias_enabled = checked;
};
auto& aspect_container = mode_extras_container.add<GUI::Widget>();
aspect_container.set_layout<GUI::VerticalBoxLayout>();
aspect_container.set_fixed_width(75);
auto& aspect_label = aspect_container.add<GUI::Label>("Aspect Ratio:"); auto& aspect_label = aspect_container.add<GUI::Label>("Aspect Ratio:");
aspect_label.set_text_alignment(Gfx::TextAlignment::CenterLeft); aspect_label.set_text_alignment(Gfx::TextAlignment::CenterLeft);
aspect_label.set_fixed_size(80, 20); aspect_label.set_fixed_size(75, 20);
m_aspect_w_textbox = aspect_container.add<GUI::TextBox>(); auto& aspect_fields_container = aspect_container.add<GUI::Widget>();
aspect_fields_container.set_fixed_width(75);
aspect_fields_container.set_layout<GUI::HorizontalBoxLayout>();
m_aspect_w_textbox = aspect_fields_container.add<GUI::TextBox>();
m_aspect_w_textbox->set_fixed_height(20); m_aspect_w_textbox->set_fixed_height(20);
m_aspect_w_textbox->set_fixed_width(25); m_aspect_w_textbox->set_fixed_width(25);
m_aspect_w_textbox->on_change = [&] { m_aspect_w_textbox->on_change = [&] {
@ -190,11 +243,11 @@ GUI::Widget* RectangleTool::get_properties_widget()
} }
}; };
auto& multiply_label = aspect_container.add<GUI::Label>("x"); auto& multiply_label = aspect_fields_container.add<GUI::Label>("x");
multiply_label.set_text_alignment(Gfx::TextAlignment::Center); multiply_label.set_text_alignment(Gfx::TextAlignment::Center);
multiply_label.set_fixed_size(10, 20); multiply_label.set_fixed_size(10, 20);
m_aspect_h_textbox = aspect_container.add<GUI::TextBox>(); m_aspect_h_textbox = aspect_fields_container.add<GUI::TextBox>();
m_aspect_h_textbox->set_fixed_height(20); m_aspect_h_textbox->set_fixed_height(20);
m_aspect_h_textbox->set_fixed_width(25); m_aspect_h_textbox->set_fixed_width(25);
m_aspect_h_textbox->on_change = [&] { m_aspect_w_textbox->on_change(); }; m_aspect_h_textbox->on_change = [&] { m_aspect_w_textbox->on_change(); };

5
Userland/Applications/PixelPaint/Tools/RectangleTool.h
View file

@ -32,6 +32,7 @@ private:
Outline, Outline,
Fill, Fill,
Gradient, Gradient,
RoundedCorners
}; };
enum class DrawMode { enum class DrawMode {
@ -39,7 +40,7 @@ private:
FromCorner, FromCorner,
}; };
void draw_using(GUI::Painter&, Gfx::IntPoint const& start_position, Gfx::IntPoint const& end_position, int thickness); void draw_using(GUI::Painter&, Gfx::IntPoint const& start_position, Gfx::IntPoint const& end_position, int thickness, int corner_radius);
RefPtr<GUI::Widget> m_properties_widget; RefPtr<GUI::Widget> m_properties_widget;
RefPtr<GUI::TextBox> m_aspect_w_textbox; RefPtr<GUI::TextBox> m_aspect_w_textbox;
@ -52,6 +53,8 @@ private:
DrawMode m_draw_mode { DrawMode::FromCorner }; DrawMode m_draw_mode { DrawMode::FromCorner };
int m_thickness { 1 }; int m_thickness { 1 };
Optional<float> m_aspect_ratio; Optional<float> m_aspect_ratio;
bool m_antialias_enabled { false };
int m_corner_radius = { 8 };
}; };
} }