Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-08 16:00:19 -05:00
Code Issues Activity

✨ Draw fills offscreen to support blend mode when multiple fills

Browse source
This commit is contained in:
Belén Albeza 2024-11-14 16:21:51 +01:00
parent 3eb24e7f5f
commit 263d7eb313
3 changed files with 64 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
frontend/src/app/render_wasm.cljs
View file

@ -79,23 +79,23 @@
;; These values correspond to skia::BlendMode representation ;; These values correspond to skia::BlendMode representation
;; https://rust-skia.github.io/doc/skia_safe/enum.BlendMode.html ;; https://rust-skia.github.io/doc/skia_safe/enum.BlendMode.html
(let [encoded-blend (case blend-mode (let [encoded-blend (case blend-mode
:normal 3 :normal 3
:darken 16 :darken 16
:multiply 24 :multiply 24
:color-burn 19 :color-burn 19
:lighten 17 :lighten 17
:screen 14 :screen 14
:color-dodge 18 :color-dodge 18
:overlay 15 :overlay 15
:soft-light 21 :soft-light 21
:hard-light 20 :hard-light 20
:difference 22 :difference 22
:exclusion 23 :exclusion 23
:hue 25 :hue 25
:saturation 26 :saturation 26
:color 27 :color 27
:luminosity 28 :luminosity 28
3)] 3)]
(._set_shape_blend_mode ^js internal-module encoded-blend))) (._set_shape_blend_mode ^js internal-module encoded-blend)))
(defn set-objects (defn set-objects

36
render-wasm/src/render.rs
View file

@ -28,7 +28,7 @@ impl GpuState {
} }
/// Create a Skia surface that will be used for rendering. /// Create a Skia surface that will be used for rendering.
fn create_surface(&mut self, width: i32, height: i32) -> skia::Surface { fn create_target_surface(&mut self, width: i32, height: i32) -> skia::Surface {
let backend_render_target = let backend_render_target =
gpu::backend_render_targets::make_gl((width, height), 1, 8, self.framebuffer_info); gpu::backend_render_targets::make_gl((width, height), 1, 8, self.framebuffer_info);
@ -46,39 +46,53 @@ impl GpuState {
pub(crate) struct RenderState { pub(crate) struct RenderState {
gpu_state: GpuState, gpu_state: GpuState,
pub surface: skia::Surface, pub final_surface: skia::Surface,
pub drawing_surface: skia::Surface,
} }
impl RenderState { impl RenderState {
pub fn new(width: i32, height: i32) -> RenderState { pub fn new(width: i32, height: i32) -> RenderState {
// This needs to be done once per WebGL context. // This needs to be done once per WebGL context.
let mut gpu_state = GpuState::new(); let mut gpu_state = GpuState::new();
let surface = gpu_state.create_surface(width, height); let mut final_surface = gpu_state.create_target_surface(width, height);
let drawing_surface = final_surface
.new_surface_with_dimensions((width, height))
.unwrap();
RenderState { gpu_state, surface } RenderState {
gpu_state,
final_surface,
drawing_surface,
}
} }
pub fn resize(&mut self, width: i32, height: i32) { pub fn resize(&mut self, width: i32, height: i32) {
let surface = self.gpu_state.create_surface(width, height); let surface = self.gpu_state.create_target_surface(width, height);
self.surface = surface; self.final_surface = surface;
self.drawing_surface = self
.final_surface
.new_surface_with_dimensions((width, height))
.unwrap();
} }
pub fn flush(&mut self) { pub fn flush(&mut self) {
self.gpu_state self.gpu_state
.context .context
.flush_and_submit_surface(&mut self.surface, None) .flush_and_submit_surface(&mut self.final_surface, None)
} }
pub fn translate(&mut self, dx: f32, dy: f32) { pub fn translate(&mut self, dx: f32, dy: f32) {
self.surface.canvas().translate((dx, dy)); self.drawing_surface.canvas().translate((dx, dy));
} }
pub fn scale(&mut self, sx: f32, sy: f32) { pub fn scale(&mut self, sx: f32, sy: f32) {
self.surface.canvas().scale((sx, sy)); self.drawing_surface.canvas().scale((sx, sy));
} }
pub fn reset_canvas(&mut self) { pub fn reset_canvas(&mut self) {
self.surface.canvas().clear(skia_safe::Color::TRANSPARENT); self.drawing_surface
self.surface.canvas().reset_matrix(); .canvas()
.clear(skia_safe::Color::TRANSPARENT);
self.drawing_surface.canvas().reset_matrix();
} }
} }

32
render-wasm/src/state.rs
View file

@ -1,4 +1,4 @@
use skia_safe as skia; use skia_safe::{self as skia, SamplingOptions};
use std::collections::HashMap; use std::collections::HashMap;
use uuid::Uuid; use uuid::Uuid;
@ -46,9 +46,14 @@ impl<'a> State<'a> {
let shape = self.shapes.get(&id).unwrap(); let shape = self.shapes.get(&id).unwrap();
// This is needed so the next non-children shape does not carry this shape's transform // This is needed so the next non-children shape does not carry this shape's transform
self.render_state.surface.canvas().save(); self.render_state.final_surface.canvas().save();
self.render_state.drawing_surface.canvas().save();
render_single_shape(&mut self.render_state.surface, shape); render_single_shape(
&mut self.render_state.final_surface,
&mut self.render_state.drawing_surface,
shape,
);
// draw all the children shapes // draw all the children shapes
let shape_ids = shape.children.clone(); let shape_ids = shape.children.clone();
@ -56,7 +61,8 @@ impl<'a> State<'a> {
self.render_shape_tree(shape_id); self.render_shape_tree(shape_id);
} }
self.render_state.surface.canvas().restore(); self.render_state.final_surface.canvas().restore();
self.render_state.drawing_surface.canvas().restore();
} }
pub fn use_shape(&'a mut self, id: Uuid) { pub fn use_shape(&'a mut self, id: Uuid) {
@ -74,7 +80,7 @@ impl<'a> State<'a> {
} }
} }
fn render_single_shape(surface: &mut skia::Surface, shape: &Shape) { fn render_single_shape(surface: &mut skia::Surface, offscreen: &mut skia::Surface, shape: &Shape) {
let r = skia::Rect::new( let r = skia::Rect::new(
shape.selrect.x1, shape.selrect.x1,
shape.selrect.y1, shape.selrect.y1,
@ -105,12 +111,18 @@ fn render_single_shape(surface: &mut skia::Surface, shape: &Shape) {
center.negate(); center.negate();
matrix.pre_translate(center); matrix.pre_translate(center);
surface.canvas().concat(&matrix); offscreen.canvas().concat(&matrix);
// TODO: use blend mode for the shape as a whole, not in each fill
for fill in shape.fills().rev() { for fill in shape.fills().rev() {
let mut p = fill.to_paint(); offscreen.canvas().draw_rect(r, &fill.to_paint());
p.set_blend_mode(shape.blend_mode.into());
surface.canvas().draw_rect(r, &p);
} }
let mut paint = skia::Paint::default();
paint.set_blend_mode(shape.blend_mode.into());
offscreen.draw(
&mut surface.canvas(),
(0.0, 0.0),
SamplingOptions::new(skia::FilterMode::Linear, skia::MipmapMode::None),
Some(&paint),
);
} }