donjames
Topic Author
Posts: 25
Joined: 27 May 2013, 16:35

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
 
User avatar
jsantos
Site Admin
Posts: 2904
Joined: 20 Jan 2012, 17:18
Contact:

Re: HTML5 canvas blend mode

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.
 
donjames
Topic Author
Posts: 25
Joined: 27 May 2013, 16:35

Re: HTML5 canvas blend mode

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
 
User avatar
jsantos
Site Admin
Posts: 2904
Joined: 20 Jan 2012, 17:18
Contact:

Re: HTML5 canvas blend mode

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?
 
donjames
Topic Author
Posts: 25
Joined: 27 May 2013, 16:35

Re: HTML5 canvas blend mode

18 Feb 2014, 15:37

I want to draw a shape that clears the alpha
 
User avatar
jsantos
Site Admin
Posts: 2904
Joined: 20 Jan 2012, 17:18
Contact:

Re: HTML5 canvas blend mode

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.
 
donjames
Topic Author
Posts: 25
Joined: 27 May 2013, 16:35

Re: HTML5 canvas blend mode

18 Feb 2014, 20:13

The feature I want to implement is the canvas clearRect

http://www.w3schools.com/TAGs/canvas_clearrect.asp
 
User avatar
sfernandez
Site Admin
Posts: 1912
Joined: 22 Dec 2011, 19:20

Re: HTML5 canvas blend mode

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());

Who is online

Users browsing this forum: No registered users and 1 guest