Canvas: implement global composition and blending.

This commit is contained in:
Mátyás Mustoha 2015-04-20 13:16:45 +02:00
parent 8efd70b01b
commit a8343a0750
31 changed files with 221 additions and 127 deletions

View file

@ -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>),
}

View file

@ -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

View file

@ -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]

View file

@ -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) {

View file

@ -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)

View file

@ -1,5 +0,0 @@
[2d.composite.operation.casesensitive.html]
type: testharness
[Canvas test: 2d.composite.operation.casesensitive]
expected: FAIL

View file

@ -1,5 +0,0 @@
[2d.composite.operation.clear.html]
type: testharness
[Canvas test: 2d.composite.operation.clear]
expected: FAIL

View file

@ -1,5 +0,0 @@
[2d.composite.operation.darker.html]
type: testharness
[Canvas test: 2d.composite.operation.darker]
expected: FAIL

View file

@ -1,5 +0,0 @@
[2d.composite.operation.default.html]
type: testharness
[Canvas test: 2d.composite.operation.default]
expected: FAIL

View file

@ -1,5 +0,0 @@
[2d.composite.operation.highlight.html]
type: testharness
[Canvas test: 2d.composite.operation.highlight]
expected: FAIL

View file

@ -1,5 +0,0 @@
[2d.composite.operation.nullsuffix.html]
type: testharness
[Canvas test: 2d.composite.operation.nullsuffix]
expected: FAIL

View file

@ -1,5 +0,0 @@
[2d.composite.operation.over.html]
type: testharness
[Canvas test: 2d.composite.operation.over]
expected: FAIL

View file

@ -1,5 +0,0 @@
[2d.composite.operation.unrecognised.html]
type: testharness
[Canvas test: 2d.composite.operation.unrecognised]
expected: FAIL

View file

@ -1,5 +0,0 @@
[2d.composite.solid.destination-atop.html]
type: testharness
[Canvas test: 2d.composite.solid.destination-atop]
expected: FAIL

View file

@ -1,5 +0,0 @@
[2d.composite.solid.destination-in.html]
type: testharness
[Canvas test: 2d.composite.solid.destination-in]
expected: FAIL

View file

@ -1,5 +0,0 @@
[2d.composite.solid.destination-out.html]
type: testharness
[Canvas test: 2d.composite.solid.destination-out]
expected: FAIL

View file

@ -1,5 +0,0 @@
[2d.composite.solid.destination-over.html]
type: testharness
[Canvas test: 2d.composite.solid.destination-over]
expected: FAIL

View file

@ -1,5 +0,0 @@
[2d.composite.solid.lighter.html]
type: testharness
[Canvas test: 2d.composite.solid.lighter]
expected: FAIL

View file

@ -1,5 +0,0 @@
[2d.composite.solid.source-out.html]
type: testharness
[Canvas test: 2d.composite.solid.source-out]
expected: FAIL

View file

@ -1,5 +0,0 @@
[2d.composite.solid.xor.html]
type: testharness
[Canvas test: 2d.composite.solid.xor]
expected: FAIL

View file

@ -1,5 +0,0 @@
[2d.composite.transparent.lighter.html]
type: testharness
[Canvas test: 2d.composite.transparent.lighter]
expected: FAIL

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -1,5 +0,0 @@
[2d.strokeRect.globalcomposite.html]
type: testharness
[strokeRect is not affected by globalCompositeOperation]
expected: FAIL

View file

@ -0,0 +1,5 @@
[2d.shadow.composite.1.html]
type: testharness
[Shadows are drawn using globalCompositeOperation]
expected: FAIL

View file

@ -0,0 +1,5 @@
[2d.shadow.composite.2.html]
type: testharness
[Shadows are drawn using globalCompositeOperation]
expected: FAIL

View file

@ -1,5 +0,0 @@
[2d.state.saverestore.globalCompositeOperation.html]
type: testharness
[save()/restore() works for globalCompositeOperation]
expected: FAIL

View file

@ -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