HTML5 canvas blend mode

15 Feb 2014, 19:23

Is there a way using the C++ API to set similar HTML5 canvas blend modes:

http://www.w3.org/TR/2dcontext/#dom-con ... eoperation

17 Feb 2014, 10:32

Hi Don,

As WPF only supports SrcOver, that is the only blend mode implemented in noesisGUI. Although in our internal renderer everything is structured to allow new blend modes. I imagine that if this becomes vital for your project we could implement an extension to XAML supporting this.

18 Feb 2014, 00:48

The main important one is to support "clear" of alphas.
(e.g. in canvas, clearRect)

So basically I want to draw a shape. The fragment shader(/fixed function Blend) should multiply the destination alpha with the invert of the source alpha (rgb values don't need to be changed)

Is that possible to do now in some other way?

Thanks
Don

18 Feb 2014, 12:33

Not sure to understand. Do you want to draw a shape that clear the alpha? or do you want to clear all the alpha values of the framebuffer?

18 Feb 2014, 15:37

I want to draw a shape that clears the alpha

18 Feb 2014, 19:15

Yes, I see. Although for now, it cannot be done. Why do you need it? Can you explain the high level effect you want to achieve? May be it can be done using masking.

18 Feb 2014, 20:13

The feature I want to implement is the canvas clearRect

http://www.w3schools.com/TAGs/canvas_clearrect.asp

19 Feb 2014, 01:23

This same effect can be achieved by setting a Clip geometry:

<Canvas
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <TextBlock Text="I'm here" FontSize="20" Margin="30"/>
    <Rectangle Fill="Red" Width="300" Height="150"
        Clip="M0,0 L300,0 300,150 0,150 z M20,20 L120,20 120,70 20,70 z"
    />
</Canvas>

That xaml code can be directly translated to C++ code:

Ptr<Canvas> canvas = *new Canvas();
UIElementCollection* children = canvas->GetChildren();

Ptr<TextBlock> tb = *new TextBlock("I'm here");
tb->SetMargin(Thickness(30.0f));
children->Add(tb.GetPtr());

Ptr<Rectangle> rect = *new Rectangle();
rect->SetWidth(300.0f);
rect->SetHeight(150.0f);
Ptr<StreamGeometry> clip = *new StreamGeometry(
    "M0,0 L300,0 300,150 0,150 z M20,20 L120,20 120,70 20,70 z"
);
rect->SetClip(clip.GetPtr());
children->Add(rect.GetPtr());

HTML5 canvas blend mode

HTML5 canvas blend mode

Re: HTML5 canvas blend mode

Re: HTML5 canvas blend mode

Re: HTML5 canvas blend mode

Re: HTML5 canvas blend mode

Re: HTML5 canvas blend mode

Re: HTML5 canvas blend mode

Re: HTML5 canvas blend mode

Who is online