mirror of
https://github.com/servo/servo.git
synced 2025-06-06 16:45:39 +00:00
Canvas: implement global composition and blending.
This commit is contained in:
parent
8efd70b01b
commit
a8343a0750
31 changed files with 221 additions and 127 deletions
|
@ -2,7 +2,7 @@
|
|||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
use canvas_paint_task::{FillOrStrokeStyle, LineCapStyle, LineJoinStyle};
|
||||
use canvas_paint_task::{FillOrStrokeStyle, LineCapStyle, LineJoinStyle, CompositionOrBlending};
|
||||
use geom::matrix2d::Matrix2D;
|
||||
use geom::point::Point2D;
|
||||
use geom::rect::Rect;
|
||||
|
@ -46,6 +46,7 @@ pub enum Canvas2dMsg {
|
|||
SetLineJoin(LineJoinStyle),
|
||||
SetMiterLimit(f32),
|
||||
SetGlobalAlpha(f32),
|
||||
SetGlobalComposition(CompositionOrBlending),
|
||||
SetTransform(Matrix2D<f32>),
|
||||
}
|
||||
|
||||
|
|
|
@ -4,8 +4,9 @@
|
|||
|
||||
use azure::azure::AzFloat;
|
||||
use azure::azure_hl::{DrawTarget, SurfaceFormat, BackendType, StrokeOptions, DrawOptions, Pattern};
|
||||
use azure::azure_hl::{ColorPattern, PathBuilder, JoinStyle, CapStyle, DrawSurfaceOptions, Filter};
|
||||
use azure::azure_hl::{ColorPattern, PathBuilder, DrawSurfaceOptions, Filter};
|
||||
use azure::azure_hl::{GradientStop, LinearGradientPattern, RadialGradientPattern, ExtendMode};
|
||||
use azure::azure_hl::{JoinStyle, CapStyle, CompositionOp};
|
||||
use canvas_msg::{CanvasMsg, Canvas2dMsg, CanvasCommonMsg};
|
||||
use geom::matrix2d::Matrix2D;
|
||||
use geom::point::Point2D;
|
||||
|
@ -244,6 +245,7 @@ impl<'a> CanvasPaintTask<'a> {
|
|||
Canvas2dMsg::SetMiterLimit(limit) => painter.set_miter_limit(limit),
|
||||
Canvas2dMsg::SetTransform(ref matrix) => painter.set_transform(matrix),
|
||||
Canvas2dMsg::SetGlobalAlpha(alpha) => painter.set_global_alpha(alpha),
|
||||
Canvas2dMsg::SetGlobalComposition(op) => painter.set_global_composition(op),
|
||||
Canvas2dMsg::GetImageData(dest_rect, canvas_size, chan) => painter.get_image_data(dest_rect, canvas_size, chan),
|
||||
Canvas2dMsg::PutImageData(imagedata, image_data_rect, dirty_rect)
|
||||
=> painter.put_image_data(imagedata, image_data_rect, dirty_rect),
|
||||
|
@ -477,6 +479,10 @@ impl<'a> CanvasPaintTask<'a> {
|
|||
self.state.draw_options.alpha = alpha;
|
||||
}
|
||||
|
||||
fn set_global_composition(&mut self, op: CompositionOrBlending) {
|
||||
self.state.draw_options.set_composition_op(op.to_azure_style());
|
||||
}
|
||||
|
||||
fn create(size: Size2D<i32>) -> DrawTarget {
|
||||
DrawTarget::new(BackendType::Skia, size, SurfaceFormat::B8G8R8A8)
|
||||
}
|
||||
|
@ -715,6 +721,185 @@ impl LineJoinStyle {
|
|||
}
|
||||
}
|
||||
|
||||
#[derive(Copy, Clone, PartialEq)]
|
||||
pub enum CompositionStyle {
|
||||
SrcIn,
|
||||
SrcOut,
|
||||
SrcOver,
|
||||
SrcAtop,
|
||||
DestIn,
|
||||
DestOut,
|
||||
DestOver,
|
||||
DestAtop,
|
||||
Copy,
|
||||
Lighter,
|
||||
Xor,
|
||||
}
|
||||
|
||||
impl CompositionStyle {
|
||||
fn to_azure_style(&self) -> CompositionOp {
|
||||
match *self {
|
||||
CompositionStyle::SrcIn => CompositionOp::In,
|
||||
CompositionStyle::SrcOut => CompositionOp::Out,
|
||||
CompositionStyle::SrcOver => CompositionOp::Over,
|
||||
CompositionStyle::SrcAtop => CompositionOp::Atop,
|
||||
CompositionStyle::DestIn => CompositionOp::DestIn,
|
||||
CompositionStyle::DestOut => CompositionOp::DestOut,
|
||||
CompositionStyle::DestOver => CompositionOp::DestOver,
|
||||
CompositionStyle::DestAtop => CompositionOp::DestAtop,
|
||||
CompositionStyle::Copy => CompositionOp::Source,
|
||||
CompositionStyle::Lighter => CompositionOp::Add,
|
||||
CompositionStyle::Xor => CompositionOp::Xor,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn from_str(string: &str) -> Option<CompositionStyle> {
|
||||
match string {
|
||||
"source-in" => Some(CompositionStyle::SrcIn),
|
||||
"source-out" => Some(CompositionStyle::SrcOut),
|
||||
"source-over" => Some(CompositionStyle::SrcOver),
|
||||
"source-atop" => Some(CompositionStyle::SrcAtop),
|
||||
"destination-in" => Some(CompositionStyle::DestIn),
|
||||
"destination-out" => Some(CompositionStyle::DestOut),
|
||||
"destination-over" => Some(CompositionStyle::DestOver),
|
||||
"destination-atop" => Some(CompositionStyle::DestAtop),
|
||||
"copy" => Some(CompositionStyle::Copy),
|
||||
"lighter" => Some(CompositionStyle::Lighter),
|
||||
"xor" => Some(CompositionStyle::Xor),
|
||||
_ => None
|
||||
}
|
||||
}
|
||||
|
||||
pub fn to_str(&self) -> &str {
|
||||
match *self {
|
||||
CompositionStyle::SrcIn => "source-in",
|
||||
CompositionStyle::SrcOut => "source-out",
|
||||
CompositionStyle::SrcOver => "source-over",
|
||||
CompositionStyle::SrcAtop => "source-atop",
|
||||
CompositionStyle::DestIn => "destination-in",
|
||||
CompositionStyle::DestOut => "destination-out",
|
||||
CompositionStyle::DestOver => "destination-over",
|
||||
CompositionStyle::DestAtop => "destination-atop",
|
||||
CompositionStyle::Copy => "copy",
|
||||
CompositionStyle::Lighter => "lighter",
|
||||
CompositionStyle::Xor => "xor",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Copy, Clone, PartialEq)]
|
||||
pub enum BlendingStyle {
|
||||
Multiply,
|
||||
Screen,
|
||||
Overlay,
|
||||
Darken,
|
||||
Lighten,
|
||||
ColorDodge,
|
||||
ColorBurn,
|
||||
HardLight,
|
||||
SoftLight,
|
||||
Difference,
|
||||
Exclusion,
|
||||
Hue,
|
||||
Saturation,
|
||||
Color,
|
||||
Luminosity,
|
||||
}
|
||||
|
||||
impl BlendingStyle {
|
||||
fn to_azure_style(&self) -> CompositionOp {
|
||||
match *self {
|
||||
BlendingStyle::Multiply => CompositionOp::Multiply,
|
||||
BlendingStyle::Screen => CompositionOp::Screen,
|
||||
BlendingStyle::Overlay => CompositionOp::Overlay,
|
||||
BlendingStyle::Darken => CompositionOp::Darken,
|
||||
BlendingStyle::Lighten => CompositionOp::Lighten,
|
||||
BlendingStyle::ColorDodge => CompositionOp::ColorDodge,
|
||||
BlendingStyle::ColorBurn => CompositionOp::ColorBurn,
|
||||
BlendingStyle::HardLight => CompositionOp::HardLight,
|
||||
BlendingStyle::SoftLight => CompositionOp::SoftLight,
|
||||
BlendingStyle::Difference => CompositionOp::Difference,
|
||||
BlendingStyle::Exclusion => CompositionOp::Exclusion,
|
||||
BlendingStyle::Hue => CompositionOp::Hue,
|
||||
BlendingStyle::Saturation => CompositionOp::Saturation,
|
||||
BlendingStyle::Color => CompositionOp::Color,
|
||||
BlendingStyle::Luminosity => CompositionOp::Luminosity,
|
||||
}
|
||||
}
|
||||
|
||||
pub fn from_str(string: &str) -> Option<BlendingStyle> {
|
||||
match string {
|
||||
"multiply" => Some(BlendingStyle::Multiply),
|
||||
"screen" => Some(BlendingStyle::Screen),
|
||||
"overlay" => Some(BlendingStyle::Overlay),
|
||||
"darken" => Some(BlendingStyle::Darken),
|
||||
"lighten" => Some(BlendingStyle::Lighten),
|
||||
"color-dodge" => Some(BlendingStyle::ColorDodge),
|
||||
"color-burn" => Some(BlendingStyle::ColorBurn),
|
||||
"hard-light" => Some(BlendingStyle::HardLight),
|
||||
"soft-light" => Some(BlendingStyle::SoftLight),
|
||||
"difference" => Some(BlendingStyle::Difference),
|
||||
"exclusion" => Some(BlendingStyle::Exclusion),
|
||||
"hue" => Some(BlendingStyle::Hue),
|
||||
"saturation" => Some(BlendingStyle::Saturation),
|
||||
"color" => Some(BlendingStyle::Color),
|
||||
"luminosity" => Some(BlendingStyle::Luminosity),
|
||||
_ => None
|
||||
}
|
||||
}
|
||||
|
||||
pub fn to_str(&self) -> &str {
|
||||
match *self {
|
||||
BlendingStyle::Multiply => "multiply",
|
||||
BlendingStyle::Screen => "screen",
|
||||
BlendingStyle::Overlay => "overlay",
|
||||
BlendingStyle::Darken => "darken",
|
||||
BlendingStyle::Lighten => "lighten",
|
||||
BlendingStyle::ColorDodge => "color-dodge",
|
||||
BlendingStyle::ColorBurn => "color-burn",
|
||||
BlendingStyle::HardLight => "hard-light",
|
||||
BlendingStyle::SoftLight => "soft-light",
|
||||
BlendingStyle::Difference => "difference",
|
||||
BlendingStyle::Exclusion => "exclusion",
|
||||
BlendingStyle::Hue => "hue",
|
||||
BlendingStyle::Saturation => "saturation",
|
||||
BlendingStyle::Color => "color",
|
||||
BlendingStyle::Luminosity => "luminosity",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Copy, Clone, PartialEq)]
|
||||
pub enum CompositionOrBlending {
|
||||
Composition(CompositionStyle),
|
||||
Blending(BlendingStyle),
|
||||
}
|
||||
|
||||
impl CompositionOrBlending {
|
||||
fn to_azure_style(&self) -> CompositionOp {
|
||||
match *self {
|
||||
CompositionOrBlending::Composition(op) => op.to_azure_style(),
|
||||
CompositionOrBlending::Blending(op) => op.to_azure_style(),
|
||||
}
|
||||
}
|
||||
|
||||
pub fn default() -> CompositionOrBlending {
|
||||
CompositionOrBlending::Composition(CompositionStyle::SrcOver)
|
||||
}
|
||||
|
||||
pub fn from_str(string: &str) -> Option<CompositionOrBlending> {
|
||||
if let Some(op) = CompositionStyle::from_str(string) {
|
||||
return Some(CompositionOrBlending::Composition(op));
|
||||
}
|
||||
|
||||
if let Some(op) = BlendingStyle::from_str(string) {
|
||||
return Some(CompositionOrBlending::Blending(op));
|
||||
}
|
||||
|
||||
None
|
||||
}
|
||||
}
|
||||
|
||||
/// Used by drawImage to get rid of the extra pixels of the image data that
|
||||
/// won't be copied to the canvas
|
||||
/// image_data: Color pixel data of the image
|
||||
|
|
|
@ -35,7 +35,7 @@ use dom::bindings::utils::{Reflectable, Reflector, WindowProxyHandler};
|
|||
use script_task::ScriptChan;
|
||||
|
||||
use canvas::canvas_paint_task::{CanvasGradientStop, LinearGradientStyle, RadialGradientStyle};
|
||||
use canvas::canvas_paint_task::{LineCapStyle, LineJoinStyle};
|
||||
use canvas::canvas_paint_task::{LineCapStyle, LineJoinStyle, CompositionOrBlending};
|
||||
use cssparser::RGBA;
|
||||
use encoding::types::EncodingRef;
|
||||
use geom::matrix2d::Matrix2D;
|
||||
|
@ -270,7 +270,7 @@ no_jsmanaged_fields!(RGBA);
|
|||
no_jsmanaged_fields!(Matrix2D<T>);
|
||||
no_jsmanaged_fields!(StorageType);
|
||||
no_jsmanaged_fields!(CanvasGradientStop, LinearGradientStyle, RadialGradientStyle);
|
||||
no_jsmanaged_fields!(LineCapStyle, LineJoinStyle);
|
||||
no_jsmanaged_fields!(LineCapStyle, LineJoinStyle, CompositionOrBlending);
|
||||
|
||||
impl JSTraceable for Box<ScriptChan+Send> {
|
||||
#[inline]
|
||||
|
|
|
@ -30,7 +30,7 @@ use geom::size::Size2D;
|
|||
use canvas::canvas_msg::{CanvasMsg, Canvas2dMsg, CanvasCommonMsg};
|
||||
use canvas::canvas_paint_task::{CanvasPaintTask, FillOrStrokeStyle};
|
||||
use canvas::canvas_paint_task::{LinearGradientStyle, RadialGradientStyle};
|
||||
use canvas::canvas_paint_task::{LineCapStyle, LineJoinStyle};
|
||||
use canvas::canvas_paint_task::{LineCapStyle, LineJoinStyle, CompositionOrBlending};
|
||||
|
||||
use net_traits::image::base::Image;
|
||||
use net_traits::image_cache_task::{ImageResponseMsg, Msg};
|
||||
|
@ -61,6 +61,7 @@ pub struct CanvasRenderingContext2D {
|
|||
#[jstraceable]
|
||||
struct CanvasContextState {
|
||||
global_alpha: f64,
|
||||
global_composition: CompositionOrBlending,
|
||||
image_smoothing_enabled: bool,
|
||||
stroke_color: RGBA,
|
||||
line_width: f64,
|
||||
|
@ -81,6 +82,7 @@ impl CanvasContextState {
|
|||
};
|
||||
CanvasContextState {
|
||||
global_alpha: 1.0,
|
||||
global_composition: CompositionOrBlending::default(),
|
||||
image_smoothing_enabled: true,
|
||||
stroke_color: black,
|
||||
line_width: 1.0,
|
||||
|
@ -421,6 +423,23 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
|
|||
self.renderer.send(CanvasMsg::Canvas2d(Canvas2dMsg::SetGlobalAlpha(alpha as f32))).unwrap()
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-context-2d-globalcompositeoperation
|
||||
fn GlobalCompositeOperation(self) -> DOMString {
|
||||
let state = self.state.borrow();
|
||||
match state.global_composition {
|
||||
CompositionOrBlending::Composition(op) => op.to_str().to_owned(),
|
||||
CompositionOrBlending::Blending(op) => op.to_str().to_owned(),
|
||||
}
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-context-2d-globalcompositeoperation
|
||||
fn SetGlobalCompositeOperation(self, op_str: DOMString) {
|
||||
if let Some(op) = CompositionOrBlending::from_str(&op_str) {
|
||||
self.state.borrow_mut().global_composition = op;
|
||||
self.renderer.send(CanvasMsg::Canvas2d(Canvas2dMsg::SetGlobalComposition(op))).unwrap()
|
||||
}
|
||||
}
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/#dom-context-2d-fillrect
|
||||
fn FillRect(self, x: f64, y: f64, width: f64, height: f64) {
|
||||
if let Some(rect) = self.create_drawable_rect(x, y, width, height) {
|
||||
|
|
|
@ -50,7 +50,7 @@ interface CanvasRenderingContext2D {
|
|||
|
||||
// compositing
|
||||
attribute unrestricted double globalAlpha; // (default 1.0)
|
||||
// attribute DOMString globalCompositeOperation; // (default source-over)
|
||||
attribute DOMString globalCompositeOperation; // (default source-over)
|
||||
|
||||
// image smoothing
|
||||
attribute boolean imageSmoothingEnabled; // (default true)
|
||||
|
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.operation.casesensitive.html]
|
||||
type: testharness
|
||||
[Canvas test: 2d.composite.operation.casesensitive]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.operation.clear.html]
|
||||
type: testharness
|
||||
[Canvas test: 2d.composite.operation.clear]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.operation.darker.html]
|
||||
type: testharness
|
||||
[Canvas test: 2d.composite.operation.darker]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.operation.default.html]
|
||||
type: testharness
|
||||
[Canvas test: 2d.composite.operation.default]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.operation.highlight.html]
|
||||
type: testharness
|
||||
[Canvas test: 2d.composite.operation.highlight]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.operation.nullsuffix.html]
|
||||
type: testharness
|
||||
[Canvas test: 2d.composite.operation.nullsuffix]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.operation.over.html]
|
||||
type: testharness
|
||||
[Canvas test: 2d.composite.operation.over]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.operation.unrecognised.html]
|
||||
type: testharness
|
||||
[Canvas test: 2d.composite.operation.unrecognised]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.solid.destination-atop.html]
|
||||
type: testharness
|
||||
[Canvas test: 2d.composite.solid.destination-atop]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.solid.destination-in.html]
|
||||
type: testharness
|
||||
[Canvas test: 2d.composite.solid.destination-in]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.solid.destination-out.html]
|
||||
type: testharness
|
||||
[Canvas test: 2d.composite.solid.destination-out]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.solid.destination-over.html]
|
||||
type: testharness
|
||||
[Canvas test: 2d.composite.solid.destination-over]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.solid.lighter.html]
|
||||
type: testharness
|
||||
[Canvas test: 2d.composite.solid.lighter]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.solid.source-out.html]
|
||||
type: testharness
|
||||
[Canvas test: 2d.composite.solid.source-out]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.solid.xor.html]
|
||||
type: testharness
|
||||
[Canvas test: 2d.composite.solid.xor]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.transparent.lighter.html]
|
||||
type: testharness
|
||||
[Canvas test: 2d.composite.transparent.lighter]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.uncovered.fill.copy.html]
|
||||
type: testharness
|
||||
[fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.uncovered.fill.destination-atop.html]
|
||||
type: testharness
|
||||
[fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.uncovered.fill.destination-in.html]
|
||||
type: testharness
|
||||
[fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.uncovered.fill.source-in.html]
|
||||
type: testharness
|
||||
[fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.composite.uncovered.fill.source-out.html]
|
||||
type: testharness
|
||||
[fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.strokeRect.globalcomposite.html]
|
||||
type: testharness
|
||||
[strokeRect is not affected by globalCompositeOperation]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
[2d.shadow.composite.1.html]
|
||||
type: testharness
|
||||
[Shadows are drawn using globalCompositeOperation]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
[2d.shadow.composite.2.html]
|
||||
type: testharness
|
||||
[Shadows are drawn using globalCompositeOperation]
|
||||
expected: FAIL
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[2d.state.saverestore.globalCompositeOperation.html]
|
||||
type: testharness
|
||||
[save()/restore() works for globalCompositeOperation]
|
||||
expected: FAIL
|
||||
|
|
@ -6879,9 +6879,6 @@
|
|||
[CanvasRenderingContext2D interface: operation resetTransform()]
|
||||
expected: FAIL
|
||||
|
||||
[CanvasRenderingContext2D interface: attribute globalCompositeOperation]
|
||||
expected: FAIL
|
||||
|
||||
[CanvasRenderingContext2D interface: operation createPattern(CanvasImageSource,DOMString)]
|
||||
expected: FAIL
|
||||
|
||||
|
@ -7017,9 +7014,6 @@
|
|||
[CanvasRenderingContext2D interface: document.createElement("canvas").getContext("2d") must inherit property "resetTransform" with the proper type (12)]
|
||||
expected: FAIL
|
||||
|
||||
[CanvasRenderingContext2D interface: document.createElement("canvas").getContext("2d") must inherit property "globalCompositeOperation" with the proper type (14)]
|
||||
expected: FAIL
|
||||
|
||||
[CanvasRenderingContext2D interface: document.createElement("canvas").getContext("2d") must inherit property "strokeStyle" with the proper type (16)]
|
||||
expected: FAIL
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue