Compare commits

...

4 Commits

Author SHA1 Message Date
2631fec53c feat: 优化 overlay_pixels 2026-03-06 16:37:20 +08:00
6db8941b67 fix: 矩形框移动出界 2026-03-06 15:39:57 +08:00
d694a69723 feat: 实现取色功能 2026-03-05 14:20:43 +08:00
51055b8ea8 feat: 实现矩形选择功能 2026-03-04 17:36:27 +08:00
2 changed files with 368 additions and 55 deletions

View File

@@ -68,6 +68,10 @@ impl MSColor {
let b = n as u8;
Self { r, g, b, a: 0xff }
}
pub fn invert(&self) -> Self {
Self::new(255 - self.r, 255 - self.g, 255 - self.b, self.a)
}
}
#[derive(Clone, Copy, PartialEq)]
@@ -113,6 +117,40 @@ impl Path2D {
}
}
pub struct RectSelection {
/// 左上角坐标
x: i32,
y: i32,
w: i32,
h: i32,
pixels: Vec<u8>,
}
impl RectSelection {
pub fn new(x: i32, y: i32, w: i32, h: i32, pixels: Vec<u8>) -> RectSelection {
Self { x, y, w, h, pixels }
}
pub fn contains(&self, p: Point) -> bool {
let x = p.x as i32;
let y = p.y as i32;
!(x < self.x || y < self.y || x >= self.x + self.w || y >= self.y + self.h)
}
pub fn move_offset(&mut self, offset_x: i32, offset_y: i32) {
self.x += offset_x;
self.y += offset_y;
}
pub fn size(&self) -> (i32, i32) {
(self.w, self.h)
}
pub fn position(&self) -> (i32, i32) {
(self.x, self.y)
}
}
pub struct MSCanvas {
width: i32,
height: i32,
@@ -209,41 +247,71 @@ impl MSCanvas {
dst
}
pub fn pixel_at(&self, x: i32, y: i32) -> MSColor {
pub fn pixel_at(&self, x: i32, y: i32) -> Option<MSColor> {
// 边界检查
if x < 0 || x >= self.width || y < 0 || y >= self.height {
return MSColor::ZERO;
return None;
}
let index = ((y * self.width + x) * 4) as usize;
MSColor::new(
Some(MSColor::new(
self.pixels[index],
self.pixels[index + 1],
self.pixels[index + 2],
self.pixels[index + 3],
)
))
}
pub fn pixel_is(&self, x: i32, y: i32, color: MSColor) -> bool {
match self.pixel_at(x, y) {
Some(c) => c == color,
None => false,
}
}
pub fn select_rect(&self, x: i32, y: i32, w: i32, h: i32) -> RectSelection {
let mut result = vec![255; (w * h * 4) as usize];
let mut index = 0;
for yi in y..(y + h) {
for xi in x..(x + w) {
let color = self.pixel_at(xi, yi).unwrap_or(MSColor::WHITE);
result[index] = color.r;
result[index + 1] = color.g;
result[index + 2] = color.b;
result[index + 3] = color.a;
index += 4;
}
}
RectSelection::new(x, y, w, h, result)
}
pub fn overlay_pixels(&mut self, canvas: &MSCanvas) -> Vec<u8> {
let mut pixels = canvas.get_pixels();
let width = canvas.width.min(self.width) as usize;
let height = canvas.height.min(self.height) as usize;
let width = canvas.width.min(self.width);
let height = canvas.height.min(self.height);
// 预计算步长,避免重复计算
let src_stride = self.width as usize * 4;
let dst_stride = width * 4;
for y in 0..height {
let src_base = y * src_stride;
let dst_base = y * dst_stride;
// 使用显式循环,可能被编译器自动向量化
for x in 0..width {
let index = ((y * width + x) * 4) as usize;
let src_idx = src_base + x * 4;
let dst_idx = dst_base + x * 4;
// 跳过透明像素
if self.pixels[index + 3] == 0 {
continue;
// 只在非透明时复制
if self.pixels[src_idx + 3] != 0 {
// 一次复制4个字节可能被优化为单个u32操作
pixels[dst_idx..dst_idx + 4]
.copy_from_slice(&self.pixels[src_idx..src_idx + 4]);
}
pixels[index] = self.pixels[index];
pixels[index + 1] = self.pixels[index + 1];
pixels[index + 2] = self.pixels[index + 2];
pixels[index + 3] = self.pixels[index + 3];
}
}
@@ -355,6 +423,12 @@ impl MSCanvas {
}
}
pub fn fill_pixels_i32(&mut self, points: Vec<Point<i32>>) {
for point in points {
self.fill_pixel_at1(point.x, point.y);
}
}
pub fn stroke_cross(&mut self, point: Point) {
let Point { x, y } = point;
let r = 10;
@@ -540,7 +614,7 @@ impl MSCanvas {
pub fn fill_slow(&mut self, begin: Point) {
let start_x = begin.x as i32;
let start_y = begin.y as i32;
let target_color = self.pixel_at(start_x, start_y);
let target_color = self.pixel_at(start_x, start_y).unwrap_or(MSColor::ZERO);
if target_color == self.fill_color {
return;
}
@@ -552,7 +626,7 @@ impl MSCanvas {
if x < 0 || x >= self.width || y < 0 || y >= self.height {
continue;
}
if self.pixel_at(x, y) == target_color {
if self.pixel_is(x, y, target_color) {
self.fill_pixel_at1(x, y);
let p1 = (x - 1, y);
@@ -578,7 +652,7 @@ impl MSCanvas {
return;
}
let target_color = self.pixel_at(start_x, start_y);
let target_color = self.pixel_at(start_x, start_y).unwrap_or(MSColor::ZERO);
if target_color == self.fill_color {
return;
}
@@ -588,11 +662,11 @@ impl MSCanvas {
while let Some((y, mut lx, mut rx)) = stack.pop() {
// 向左扩展 lx
while lx - 1 >= 0 && self.pixel_at(lx - 1, y) == target_color {
while lx - 1 >= 0 && self.pixel_is(lx - 1, y, target_color) {
lx -= 1;
}
// 向右扩展 rx
while rx + 1 < width && self.pixel_at(rx + 1, y) == target_color {
while rx + 1 < width && self.pixel_is(rx + 1, y, target_color) {
rx += 1;
}
@@ -605,10 +679,10 @@ impl MSCanvas {
if y - 1 >= 0 {
let mut x = lx;
while x <= rx {
if self.pixel_at(x, y - 1) == target_color {
if self.pixel_is(x, y - 1, target_color) {
let span_start = x;
// 跳过连续的目标色块
while x <= rx && self.pixel_at(x, y - 1) == target_color {
while x <= rx && self.pixel_is(x, y - 1, target_color) {
x += 1;
}
// 将这个 span 入栈(用于后续处理上一行的上一行)
@@ -623,9 +697,9 @@ impl MSCanvas {
if y + 1 < height {
let mut x = lx;
while x <= rx {
if self.pixel_at(x, y + 1) == target_color {
if self.pixel_is(x, y + 1, target_color) {
let span_start = x;
while x <= rx && self.pixel_at(x, y + 1) == target_color {
while x <= rx && self.pixel_is(x, y + 1, target_color) {
x += 1;
}
stack.push((y + 1, span_start, x - 1));
@@ -1217,10 +1291,10 @@ impl MSCanvas {
}
}
/// 填充一个简单多边形(支持凹多边形)
pub fn fill_polygon(&mut self, points: &[Point]) {
fn rasterize_polygon(&mut self, points: &[Point]) -> Vec<Point<i32>> {
let mut result = Vec::new();
if points.len() < 3 {
return;
return result;
}
// 计算 y 范围
@@ -1267,7 +1341,7 @@ impl MSCanvas {
let x_start = active_edges[i].x.ceil() as i32;
let x_end = active_edges[i + 1].x.floor() as i32;
for x in x_start..=x_end {
self.fill_pixel_at1(x, y);
result.push(Point::new(x, y));
}
}
}
@@ -1277,6 +1351,14 @@ impl MSCanvas {
edge.x += edge.dx_dy;
}
}
result
}
/// 填充一个简单多边形(支持凹多边形)
pub fn fill_polygon(&mut self, points: &[Point]) {
let filled_points = self.rasterize_polygon(points);
self.fill_pixels_i32(filled_points);
}
pub fn begin_path(&mut self) {
@@ -1314,6 +1396,50 @@ impl MSCanvas {
let points = self.path2d.points.clone();
self.fill_polygon(&points[..]);
}
pub fn draw_rect_selection(&mut self, x: i32, y: i32, rect: &RectSelection) {
// 边界检查
if x >= self.width || y >= self.height {
return;
}
// 考虑矩形四边出界的情况
let w = (rect.w).min(self.width - x).min(rect.w + x);
let h = (rect.h).min(self.height - y).min(rect.h + y);
if w == 0 || h == 0 {
return;
}
let mut src_offset_x = 0usize;
let mut src_offset_y = 0usize;
if x < 0 {
src_offset_x = (-x) as usize;
}
if y < 0 {
src_offset_y = (-y) as usize;
}
let x = x.max(0) as usize;
let y = y.max(0) as usize;
let w = w as usize;
let h = h as usize;
let width = self.width as usize;
for dy in 0..h {
for dx in 0..w {
let src_index = ((dy + src_offset_y) * rect.w as usize + dx + src_offset_x) * 4;
if rect.pixels[src_index + 3] == 0 {
continue;
}
let dst_index = ((y + dy) * width + x + dx) * 4;
self.pixels[dst_index] = rect.pixels[src_index];
self.pixels[dst_index + 1] = rect.pixels[src_index + 1];
self.pixels[dst_index + 2] = rect.pixels[src_index + 2];
self.pixels[dst_index + 3] = rect.pixels[src_index + 3];
}
}
}
}
fn point_muln(point: Point, t: f32) -> Point {

View File

@@ -13,7 +13,7 @@ use iced::{color, event, mouse};
use crate::color_box::{ColorSelectionBox, CurrentColorBox};
use crate::image_button::image_button;
use crate::mouse_area::mouse_area;
use crate::mscanvas::{MSCanvas, MSColor};
use crate::mscanvas::{MSCanvas, MSColor, RectSelection};
const WIDTH: u32 = 800;
const HEIGHT: u32 = 600;
@@ -80,12 +80,15 @@ impl std::fmt::Display for ShapeStyle {
}
}
#[allow(unused)]
#[derive(Debug, Clone, Copy)]
enum Message {
MousePressed(Point),
MouseReleased(Point),
MouseMoved(Point),
MouseDoubleClick(Point),
MouseRightPressed(Point),
MouseRightReleased(Point),
Clear,
SavePNG,
@@ -300,6 +303,7 @@ enum ControlState {
struct PaintApp {
tool_states: [bool; Tool::Count as usize],
tool_selected: Tool,
prev_tool_selected: Tool,
/// 画图层
canvas: MSCanvas,
@@ -329,6 +333,8 @@ struct PaintApp {
foreground_color: MSColor,
background_color: MSColor,
rect_selection: Option<RectSelection>,
}
impl PaintApp {
@@ -349,6 +355,7 @@ impl PaintApp {
let mut ins = Self {
tool_states: [false; Tool::Count as usize],
tool_selected: Tool::Count,
prev_tool_selected: Tool::Count,
canvas,
view_canvas,
is_drawing: false,
@@ -361,11 +368,20 @@ impl PaintApp {
config: Config::default(),
foreground_color: MSColor::BLACK,
background_color: MSColor::WHITE,
rect_selection: None,
};
ins.canvas.fill_color(ins.foreground_color);
ins.canvas.stroke_color(ins.foreground_color);
ins.canvas.line_width(ins.config.line_width);
ins.canvas
.fill_color(ins.foreground_color)
.stroke_color(ins.foreground_color)
.line_width(ins.config.line_width);
ins.view_canvas
.fill_color(MSColor::BLACK)
.stroke_color(MSColor::BLACK)
.line_width(1);
ins.update_tool_states(Tool::Pencil);
ins
}
@@ -378,10 +394,12 @@ impl PaintApp {
.height(Length::Fixed(height as f32));
let canvas_area = mouse_area(image_widget)
.on_press(|pos| Message::MousePressed(pos)) // 占位,实际逻辑在 on_drag 或自定义
.on_press(|pos| Message::MousePressed(pos))
.on_release(|pos| Message::MouseReleased(pos))
.on_move(|pos| Message::MouseMoved(pos))
.on_double_click(|pos| Message::MouseDoubleClick(pos));
.on_double_click(|pos| Message::MouseDoubleClick(pos))
.on_right_press(|pos| Message::MouseRightPressed(pos))
.on_right_release(|pos| Message::MouseRightReleased(pos));
// 注意mouse_area 的 on_move 给出的坐标通常是相对于 widget 左上角的,这正是我们需要的!
let canvas_area = container(canvas_area)
.width(Length::Fill)
@@ -588,6 +606,9 @@ impl PaintApp {
Tool::FillWithColor => {
self.update_with_fill_with_color(message);
}
Tool::PickColor => {
self.update_with_pick_color(message);
}
Tool::Pencil => {
self.update_with_pencil(message);
}
@@ -716,28 +737,162 @@ impl PaintApp {
// region tool update
fn draw_rect_selection(&mut self, x: i32, y: i32) {
if self.rect_selection.is_none() {
return;
}
let rect_selection = self.rect_selection.as_ref().unwrap();
let (width, height) = rect_selection.size();
self.view_canvas.draw_rect_selection(x, y, rect_selection);
self.view_canvas
.stroke_dashed_rect(x, y, width, height, 1, 1);
// 画矩形四条边上的三个点
{
let sw = 3;
let half_sw = sw / 2;
self.view_canvas.fill_rect(x - half_sw, y - half_sw, sw, sw);
self.view_canvas
.fill_rect((x + width / 2) - half_sw, y - half_sw, sw, sw);
self.view_canvas
.fill_rect((x + width - 1) - half_sw, y - half_sw, sw, sw);
self.view_canvas
.fill_rect(x - half_sw, (y + height / 2) - half_sw, sw, sw);
self.view_canvas.fill_rect(
(x + width - 1) - half_sw,
(y + height / 2) - half_sw,
sw,
sw,
);
self.view_canvas
.fill_rect(x - half_sw, (y + height - 1) - half_sw, sw, sw);
self.view_canvas.fill_rect(
(x + width / 2) - half_sw,
(y + height - 1) - half_sw,
sw,
sw,
);
self.view_canvas.fill_rect(
(x + width - 1) - half_sw,
(y + height - 1) - half_sw,
sw,
sw,
);
}
}
fn release_rect_selection(&mut self) {
if self.rect_selection.is_none() {
return;
}
let rect_selection = self.rect_selection.as_ref().unwrap();
let (x, y) = rect_selection.position();
self.view_canvas.restore_pixels();
self.canvas.restore_pixels();
self.canvas.draw_rect_selection(x, y, rect_selection);
self.dirty = true;
self.rect_selection = None;
}
pub fn update_with_select(&mut self, message: Message) {
match message {
Message::MousePressed(pos) => {
Message::MousePressed(pos) => match self.control_state {
ControlState::Zero => {
self.is_drawing = true;
self.view_canvas.save_pixels();
self.begin_point = pos;
self.control_state = ControlState::One;
}
ControlState::One => {
if let Some(rect_selection) = self.rect_selection.as_ref() {
if rect_selection.contains(pos) {
self.is_drawing = true;
self.begin_point = pos;
self.control_state = ControlState::Two;
} else {
self.release_rect_selection();
self.is_drawing = true;
self.view_canvas.save_pixels();
self.begin_point = pos;
self.control_state = ControlState::One;
}
}
}
_ => {}
},
Message::MouseReleased(pos) => {
self.is_drawing = false;
match self.control_state {
ControlState::One => {
self.view_canvas.restore_pixels();
self.view_canvas
.stroke_dashed_rect1(self.begin_point, pos, 1, 1);
let p1 = self.begin_point;
let p2 = pos;
let mut x = p1.x;
let mut y = p1.y;
let mut width = p2.x - p1.x;
let mut height = p2.y - p1.y;
if width < 1.0 || height < 1.0 {
self.control_state = ControlState::Zero;
return;
}
if width < 0.0 && height < 0.0 {
x = p2.x;
y = p2.y;
width = p1.x - p2.x;
height = p1.y - p2.y;
} else if width < 0.0 {
x += width;
width = -width;
} else if height < 0.0 {
y += height;
height = -height;
}
self.rect_selection = Some(self.canvas.select_rect(
x as i32,
y as i32,
width as i32,
height as i32,
));
self.canvas
.clear_rect(x as i32, y as i32, width as i32, height as i32);
self.canvas.save_pixels();
self.draw_rect_selection(x as i32, y as i32);
self.begin_point = pos;
self.dirty = true;
}
ControlState::Two => {
self.control_state = ControlState::One;
if let Some(rect_selection) = self.rect_selection.as_mut() {
let offset_x = pos.x - self.begin_point.x;
let offset_y = pos.y - self.begin_point.y;
rect_selection.move_offset(offset_x as i32, offset_y as i32);
}
}
_ => {}
}
}
Message::MouseMoved(pos) => {
if self.is_drawing {
match self.control_state {
ControlState::One => {
self.view_canvas.restore_pixels();
self.view_canvas
.stroke_dashed_rect1(self.begin_point, pos, 3, 1);
self.dirty = true;
}
ControlState::Two => {
if let Some(rect_selection) = self.rect_selection.as_ref() {
let offset_x = pos.x - self.begin_point.x;
let offset_y = pos.y - self.begin_point.y;
let (x, y) = rect_selection.position();
self.view_canvas.restore_pixels();
self.draw_rect_selection(x + offset_x as i32, y + offset_y as i32);
self.dirty = true;
}
}
_ => {}
}
}
}
_ => {}
}
@@ -797,6 +952,30 @@ impl PaintApp {
}
}
pub fn update_with_pick_color(&mut self, message: Message) {
match message {
Message::MousePressed(pos) => {
let color_option = self.canvas.pixel_at(pos.x as i32, pos.y as i32);
if let Some(color) = color_option {
self.foreground_color = color;
self.canvas.stroke_color(color);
self.canvas.fill_color(color);
}
}
Message::MouseRightPressed(pos) => {
let color_option = self.canvas.pixel_at(pos.x as i32, pos.y as i32);
if let Some(color) = color_option {
self.background_color = color;
}
}
Message::MouseReleased(_) | Message::MouseRightReleased(_) => {
self.update_tool_states(self.prev_tool_selected);
}
_ => {}
}
}
pub fn update_with_pencil(&mut self, message: Message) {
match message {
Message::MousePressed(pos) => {
@@ -1037,6 +1216,7 @@ impl PaintApp {
self.canvas.stroke();
}
}
self.dirty = true;
}
pub fn update_with_polygon(&mut self, message: Message) {
@@ -1078,7 +1258,6 @@ impl PaintApp {
self.is_drawing = false;
self.control_state = ControlState::Zero;
self.close_polygon();
self.dirty = true;
}
_ => {}
}
@@ -1188,7 +1367,19 @@ impl PaintApp {
if self.tool_selected == Tool::Polygon && self.control_state != ControlState::Zero {
// 切换到其他工具,闭合路径
self.close_polygon();
}
if self.tool_selected == Tool::Select && self.control_state != ControlState::Zero {
// 切换到其他工具,释放选择框
self.release_rect_selection();
}
self.is_drawing = false;
self.control_state = ControlState::Zero;
self.view_canvas.clear_zero();
self.dirty = true;
if self.tool_selected == idx.into() {
return;
}
let old_value = self.tool_states[idx];
@@ -1196,12 +1387,8 @@ impl PaintApp {
self.tool_states[i] = false;
}
self.tool_states[idx] = !old_value;
self.prev_tool_selected = self.tool_selected;
self.tool_selected = idx.into();
self.is_drawing = false;
self.control_state = ControlState::Zero;
self.view_canvas.clear_zero();
self.dirty = true;
}
/// 将原始字节转换为 Iced 的图像句柄