Hi,

I am having trouble rendering PNGs that use Palette as "Color Type". Here is some simple code to reproduce the issue:

```
private async System.Threading.Tasks.Task Fetch()

{

HttpClient httpClient = new HttpClient();

Uri uri = new Uri("http://static.splashnology.com/articles/How-to-Optimize-PNG-and-JPEG-without-Quality-Loss/PNG-Palette.png");

HttpResponseMessage response = await httpClient.GetAsync(uri);

if (response.StatusCode == HttpStatusCode.Ok)

{

try

{

var content = await response.Content.ReadAsBufferAsync();

WriteableBitmap image = await BitmapFactory.New(1, 1).FromStream(content.AsStream());

Rect destination = new Rect(0, 0, image.PixelWidth, image.PixelHeight);

Rect source = new Rect(0, 0, image.PixelWidth, image.PixelHeight);

WriteableBitmap canvas = new WriteableBitmap(image.PixelWidth, image.PixelHeight);

canvas.Blit(destination, image, source);

RadarImage.Source = canvas;

}

catch (Exception e)

{

System.Diagnostics.Debug.WriteLine(e.Message);

System.Diagnostics.Debug.WriteLine(e.StackTrace);

}

}

}
```

If I run that code using Windows Phone 8.1, the image appears using wrong colors. If I do the same test using a PNG that is using RGB as "Color Type", then everything is works fine.

↧

Source code checked in, #111640

November 19, 2014, 2:25 am

≫ Next: Updated Release: WriteableBitmapEx 1.0.14 (Nov 19, 2014)

≪ Previous: Created Unassigned: PNG rendered incorrectly [21480]

* Fixed issue with alpha blending for Blit on WinRT which does not use pARGB

↧

Updated Release: WriteableBitmapEx 1.0.14 (Nov 19, 2014)

November 19, 2014, 2:28 am

≫ Next: Released: WriteableBitmapEx 1.0.14 (Nov 19, 2014)

≪ Previous: Source code checked in, #111640

This is the final version 1.0 of WriteableBitmapEx with Windows Phone 8 & 7, WPF, Windows and Windows Phone WinRT 8 & 8.1 Windows Store XAML and Silverlight support

Added Windows 8.1 RenderTargetBitmap support via PixelBuffer
Added Windows Phone 8 support and sample
Much improved performance for WinRT XAML
Bug fixes for alpha blitting, rectangle drawing coordinates and much more

↧

Released: WriteableBitmapEx 1.0.14 (Nov 19, 2014)

November 19, 2014, 2:29 am

≫ Next: Updated Release: WriteableBitmapEx 1.0.14 (Nov 19, 2014)

≪ Previous: Updated Release: WriteableBitmapEx 1.0.14 (Nov 19, 2014)

This is the final version 1.0 of WriteableBitmapEx with Windows Phone 8 & 7, WPF, WinRT 8 & 8.1 Windows and Windows Phone XAML and Silverlight support

Added Windows 8.1 RenderTargetBitmap support via PixelBuffer
Added Windows Phone 8 support and sample
Much improved performance for WinRT XAML
Bug fixes for alpha blitting, rectangle drawing coordinates and much more

↧

Updated Release: WriteableBitmapEx 1.0.14 (Nov 19, 2014)

November 19, 2014, 2:29 am

≫ Next: Created Unassigned: Applying a Lapace Kernel using Convolute gets DivideByZero [21582]

≪ Previous: Released: WriteableBitmapEx 1.0.14 (Nov 19, 2014)

This is the final version 1.0 of WriteableBitmapEx with Windows Phone 8 & 7, WPF, WinRT 8 & 8.1 Windows and Windows Phone XAML and Silverlight support

Added Windows 8.1 RenderTargetBitmap support via PixelBuffer
Added Windows Phone 8 support and sample
Much improved performance for WinRT XAML
Bug fixes for alpha blitting, rectangle drawing coordinates and much more

↧

Created Unassigned: Applying a Lapace Kernel using Convolute gets DivideByZero [21582]

November 24, 2014, 11:12 am

≫ Next: Commented Issue: Add lineWidth overload for DrawLine and DrawLineAa [17046]

≪ Previous: Updated Release: WriteableBitmapEx 1.0.14 (Nov 19, 2014)

Using these kernel

new [,]
{
{ 0, -1, 0},
{-1, 4, -1},
{ 0, -1, 0}
},
new [,]
{
{-1, -1, -1},
{-1, 8, -1},
{-1, -1, -1}
}

↧

Commented Issue: Add lineWidth overload for DrawLine and DrawLineAa [17046]

December 9, 2014, 8:18 am

≫ Next: Commented Issue: Add lineWidth overload for DrawLine and DrawLineAa [17046]

≪ Previous: Created Unassigned: Applying a Lapace Kernel using Convolute gets DivideByZero [21582]

It would be very beneficial to pass lineWidth to overloaded methods for standard and Anti-Aliased lines.
Comments: ** Comment from web user: polipo **

i'm waiting this feature, too

↧

Commented Issue: Add lineWidth overload for DrawLine and DrawLineAa [17046]

December 9, 2014, 12:48 pm

≫ Next: New Post: Can't draw anything - help me !

≪ Previous: Commented Issue: Add lineWidth overload for DrawLine and DrawLineAa [17046]

It would be very beneficial to pass lineWidth to overloaded methods for standard and Anti-Aliased lines.
Comments: ** Comment from web user: andyb1979 **

Guys, I implemented this using an ellipse blitted at every point of a bresenham line. The result is quite good. You get a jagged edge as the coordinate mode is integer, but the line itself is slightly smoothed at the edges.

I don't have the code to hand, but the process was

- For a pen sized N, create an NxN WPF Ellipse and RenderToBitmap.
- Store this in a WriteableBitmap and get its BitmapContext
- Now modify the code for DrawLineBresenham to pass a BitmapContext in and call Blit on the BitmapContext instead of filling the pixels

↧

New Post: Can't draw anything - help me !

December 13, 2014, 10:36 am

≫ Next: Created Unassigned: UnauthorizedAccess at CopyPixels() [21619]

≪ Previous: Commented Issue: Add lineWidth overload for DrawLine and DrawLineAa [17046]

Hi !

I'm developping an app in which one i want to draw dynamically some shapes.
Someone told me to use WriteableBitmapEx which seems to fit with what i want to do.
However i cant draw anything, maybe i forgot an important line in my code ... I'm actually just testing a sample given here. See the code :

xaml :

<Grid Name="myGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="40"/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>
        <Image Name="myImage" Grid.Row="0" />
        <Button Grid.Row="1" Content="DRAW !" HorizontalAlignment="Center" Tapped="Button_Tapped"/>
        <TextBlock Grid.Row="2" Text="{Binding classString}" HorizontalAlignment="Center"/>
    </Grid>

and then i click on a button to draw some shapes, here is the code of the button :
c# :

private async void Button_Tapped(object sender, TappedRoutedEventArgs e)
        {
            // Initialize the WriteableBitmap with size 512x512 and set it as source of an Image control
            WriteableBitmap writeableBmp = BitmapFactory.New(200, 200);
            writeableBmp.GetBitmapContext();

            // Clear the WriteableBitmap with white color
            writeableBmp.Clear(Colors.White);

            // Set the pixel at P(10, 13) to black
            writeableBmp.SetPixel(10, 13, Colors.Black);

            // Get the color of the pixel at P(30, 43)
            Color color = writeableBmp.GetPixel(30, 43);

            // Green line from P1(1, 2) to P2(30, 40)
            writeableBmp.DrawLine(1, 2, 30, 40, Colors.Green);

            // Blue anti-aliased line from P1(10, 20) to P2(50, 70)
            writeableBmp.DrawLineAa(10, 20, 50, 70, Colors.Blue);

            // Black triangle with the points P1(10, 5), P2(20, 40) and P3(30, 10)
            writeableBmp.DrawTriangle(10, 5, 20, 40, 30, 10, Colors.Black);

            // Red rectangle from the point P1(2, 4) that is 10px wide and 6px high
            writeableBmp.DrawRectangle(2, 4, 12, 10, Colors.Red);

            // Filled blue ellipse with the center point P1(2, 2) that is 8px wide and 5px high
            writeableBmp.FillEllipseCentered(2, 2, 8, 5, Colors.Blue);

            // Closed green polyline with P1(10, 5), P2(20, 40), P3(30, 30) and P4(7, 8)
            int[] p = new int[] { 10, 5, 20, 40, 30, 30, 7, 8, 10, 5 };
            writeableBmp.DrawPolyline(p, Colors.Green);

            writeableBmp.Invalidate();

            myImage.Source = writeableBmp;


            //Creating instance for the MessageDialog Class  
            //and passing the message in it's Constructor  
            MessageDialog msgbox = new MessageDialog("Drew !");
            //Calling the Show method of MessageDialog class  
            //which will show the MessageBox  
            await msgbox.ShowAsync();

        }

and the messagebox appears properly.

Do you see what i'm missing ?

Atanakar.

↧

Created Unassigned: UnauthorizedAccess at CopyPixels() [21619]

December 22, 2014, 6:11 am

≫ Next: Created Unassigned: DrawEllipse draws lines around edge of bitmap [21623]

≪ Previous: New Post: Can't draw anything - help me !

Hello. I found out that calling CopyPixels() (or in fact any functions that invokes this methods internally) causes System.UnauthorizedAccessException to occur. I've managed to trace the error: it all goes wrong at line 160 in BitmapContext.cs (dstPtr[i] = (srcPtr[i * 4 + 3] << 24) etc.).
I'm using Windows Phone 8.1 Runtime SDK. This bug occurs on both emulator and an actual device.

↧

Created Unassigned: DrawEllipse draws lines around edge of bitmap [21623]

December 24, 2014, 3:03 am

≫ Next: New Post: DrawRectangle doesnt persist on writeablebitmap

≪ Previous: Created Unassigned: UnauthorizedAccess at CopyPixels() [21619]

DrawEllipse() results in lines around the edge of the bitmap if the ellipse overlaps the edge. See attached image. I'm using v1.0.14.

↧

New Post: DrawRectangle doesnt persist on writeablebitmap

January 22, 2015, 3:50 am

≫ Next: New Post: Dynamic updating of a processed WriteableBitmap in a WPF component

≪ Previous: Created Unassigned: DrawEllipse draws lines around edge of bitmap [21623]

When I draw a rectangle it appears on the writeable bitmap but when I then draw another the first one disappears, this does not happen when I use FillRectangle, am I missing something?

↧

New Post: Dynamic updating of a processed WriteableBitmap in a WPF component

January 29, 2015, 9:24 am

≫ Next: New Post: DrawString method implementation

≪ Previous: New Post: DrawRectangle doesnt persist on writeablebitmap

I have a WPF Image control, whose source is bound to a WriteableBitmap in my XAML code and this WriteableBitmap is continuously updated in the code behind. The bitmap is displayed in the image control and the window as long as it's not processed using WriteableBitmapEx methods. If I try to process the image before returning it to the UI control the image doesn't appear anymore.

Here are the code snippets:

XAML:

<Image x:Name="ImageControl" Source="{Binding ImageSource}" Stretch="Uniform" />

Bound method in the code behind:

public ImageSource ImageSource
        {
            get
            {
                return this.bitmap;
            }
        }

The above code works and the image displays properly.

If, however, I modify the last method and do something like:

public ImageSource ImageSource
        {
            get
            {
                return this.bitmap.Crop(20,20,200,200);
            }
        }

then the image doesn't appear anymore.

Anybody has a clue as to why that happens?

↧

New Post: DrawString method implementation

February 1, 2015, 4:14 am

≫ Next: New Post: DrawString method implementation

≪ Previous: New Post: Dynamic updating of a processed WriteableBitmap in a WPF component

Hi,

I have implemented effective DrawString extension method into WriteableBitmapEx library. It caches character glyphs in array [X,Y,BW-Color], it can be invoked using code

int DrawString(this WriteableBitmap bmp, int x0, int y0, Color fontColor, Typeface typeface, double emsize, string text)

This code will probably work only in WPF (I don'k know anything about differences in Silverlight and WinPhone).

This code is also on codeplex,
https://fastwpfgrid.codeplex.com/SourceControl/latest#WriteableBitmapEx/LetterGlyphTool.cs
https://fastwpfgrid.codeplex.com/SourceControl/latest#WriteableBitmapEx/LetterGlyph.cs
https://fastwpfgrid.codeplex.com/SourceControl/latest#WriteableBitmapEx/IntGeometry.cs

↧

New Post: DrawString method implementation

February 2, 2015, 12:50 am

≫ Next: Updated Wiki: Home

≪ Previous: New Post: DrawString method implementation

Thanks. That's great. :)

↧

Updated Wiki: Home

February 2, 2015, 12:51 am

≫ Next: Updated Wiki: Home

≪ Previous: New Post: DrawString method implementation

Description

The WriteableBitmapEx library is a collection of extension methods for the WriteableBitmap. The WriteableBitmap class is available for Windows Phone, WPF, WinRT Windows Store XAML and Silverlight and allows the direct manipulation of a bitmap and could be used to generate fast procedural images by drawing directly to a bitmap. The WriteableBitmap API is very minimalistic and there's only the raw Pixels array for such operations. The WriteableBitmapEx library tries to compensate that with extensions methods that are easy to use like built in methods and offer GDI+ like functionality. The library extends the WriteableBitmap class with elementary and fast (2D drawing) functionality, conversion methods and functions to combine (blit) WriteableBitmaps.
The extension methods are grouped into different CS files with a partial class. It is possible to include just a few methods by using the specific source CS files directly or all extension methods through the built library assembly.

Available as NuGet package.

WriteableBitmapEx was also ported to Windows Embedded.

See the Issue Tracker for a list of features that will be added in the future.

Features

GDI+ like drawing functionality for the WriteableBitmap.
Support for Windows Phone Silverlight, desktop Silverlight, WPF and Windows WinRT XAML.

Base
- Support for the Color structure (alpha premultiplication will be performed)
- Also overloads for faster int32 as color (assumed to be already alpha premultiplied)
- SetPixel method with various overloads
- GetPixel method to get the pixel color at a specified x, y coordinate
- Fast Clear methods
- Fast Clone method to copy a WriteableBitmap
- ForEach method to apply a given function to all pixels of the bitmap
Transformation
- Crop method to extract a defined region
- Resize method with support for bilinear interpolation and nearest neighbor
- Rotate in 90° steps clockwise and any arbitrary angle
- Flip vertical and horizontal
Shapes
- Fast line drawing algorithms including an anti-aliased algorithm
- Ellipse, polyline, quad, rectangle and triangle
- Cubic Beziér, Cardinal spline and closed curves
Filled shapes
- Fast ellipse and rectangle fill method
- Polygon, triangle and quad
- Beziér and Cardinal spline curves
Blitting
- Different blend modes including alpha, additive, subtractive, multiply, mask and none
- Optimized fast path for non blended blitting
Conversion
- Convert a WriteableBitmap to a byte array
- Create a WriteableBitmap from a byte array
- Create a WriteableBitmap easily from the application resource or content
- Create a WriteableBitmap from an any platform supported image stream
- Write a WriteableBitmap as a TGA image to a stream
- Separate extension method to save as a PNG image. Download here
Windows Phone specific methods
- Save to media library and the camera roll
External Code
- Draw String see DrawString method implementation

Live samples

Samples that come with the WriteableBitmapEx source code in action:

The Shapes sample includes various scenarios where different shapes are drawn. By default a little demo is shown called "Breathing Flower". Basically different sized circles rotating around a center ring are generated. The sample also contains a static page showing some of the possible shapes.
The Fill sample starts with a demo that animates the Cardinal spline's tension of the FillCurveClosed method, plus some random animated filled ellipses. The sample also contains a static page showing some of the possible filled shapes.
The Curve sample demonstrates the Beziér and Cardinal spline methods. The sample starts with a demo animation that uses the Cardinal spline DrawCurve method to draw an artificial plant that grows procedurally. The other part of the sample is interactive and allows to draw and manipulate Beziér and Cardinal splines with the mouse. See this blog post for further information.
The Blit sample combines WriteableBitmaps and shows a neat particle effect.

Video of the Windows Phone Interactive Curve Sample.

External resources:
Adam Kinney made a great sample that uses the WriteableBitmapEx library to dynamically apply a torn weathered effect to a photo.
Erik Klimczak from Calrity Consulting wrote a very good blog post about Advanced Animation: Animating 15,000 Visuals in Silverlight. He uses the WriteableBitmapEx to get the best performance.
Peter Bromberg wrote a great article called Silverlight 4 Martin Fractals with WriteableBitmapEx.

Performance!

The WriteableBitmapEx methods are much faster than the XAML Shape subclasses. For example, the WriteableBitmapEx line drawing approach is more than 20-30 times faster as the Silverlight Line element. So if a lot of shapes need to be drawn and anti-aliasing or other SIlverlight Shape properties are not needed, the WriteableBitmapEx methods are the right choice.

Easy to use!

// Initialize the WriteableBitmap with size 512x512 and set it as source of an Image control
WriteableBitmap writeableBmp = BitmapFactory.New(512, 512);
ImageControl.Source = writeableBmp;
writeableBmp.GetBitmapContext();

// Load an image from the calling Assembly's resources only by passing the relative path
writeableBmp = BitmapFactory.New(1, 1).FromResource("Data/flower2.png");

// Clear the WriteableBitmap with white color
writeableBmp.Clear(Colors.White);

// Set the pixel at P(10, 13) to black
writeableBmp.SetPixel(10, 13, Colors.Black);

// Get the color of the pixel at P(30, 43)
Color color = writeableBmp.GetPixel(30, 43);

// Green line from P1(1, 2) to P2(30, 40)
writeableBmp.DrawLine(1, 2, 30, 40, Colors.Green);

// Line from P1(1, 2) to P2(30, 40) using the fastest draw line method with the color as integerint[] pixels = writeableBmp.Pixels;
int w = writeableBmp.PixelWidth;
int h = writeableBmp.PixelHeight;
WriteableBitmapExtensions.DrawLine(pixels, w, h, 1, 2, 30, 40, myIntColor);

// Blue anti-aliased line from P1(10, 20) to P2(50, 70)
writeableBmp.DrawLineAa(10, 20, 50, 70, Colors.Blue);

// Black triangle with the points P1(10, 5), P2(20, 40) and P3(30, 10)
writeableBmp.DrawTriangle(10, 5, 20, 40, 30, 10, Colors.Black);

// Red rectangle from the point P1(2, 4) that is 10px wide and 6px high
writeableBmp.DrawRectangle(2, 4, 12, 10, Colors.Red);

// Filled blue ellipse with the center point P1(2, 2) that is 8px wide and 5px high
writeableBmp.FillEllipseCentered(2, 2, 8, 5, Colors.Blue);

// Closed green polyline with P1(10, 5), P2(20, 40), P3(30, 30) and P4(7, 8)int[] p = newint[] { 10, 5, 20, 40, 30, 30, 7, 8, 10, 5 };
writeableBmp.DrawPolyline(p, Colors.Green);

// Cubic Beziér curve from P1(5, 5) to P4(20, 7) with the control points P2(10, 15) and P3(15, 0)
writeableBmp.DrawBezier(5, 5, 10, 15, 15, 0, 20, 7,  Colors.Purple);

// Cardinal spline through the points P1(10, 5), P2(20, 40) and P3(30, 30) with a tension of 0.5int[] pts = newint[] { 10, 5, 20, 40, 30, 30};
writeableBmp.DrawCurve(pts, 0.5,  Colors.Yellow);

// A filled Cardinal spline through the points P1(10, 5), P2(20, 40) and P3(30, 30) with a tension of 0.5
writeableBmp.FillCurveClosed(pts, 0.5,  Colors.Green);

// Blit a bitmap using the additive blend mode at P1(10, 10)
writeableBmp.Blit(new Point(10, 10), bitmap, sourceRect, Colors.White, WriteableBitmapExtensions.BlendMode.Additive);

// Override all pixels with a function that changes the color based on the coordinate
writeableBmp.ForEach((x, y, color) => Color.FromArgb(color.A, (byte)(color.R / 2), (byte)(x * y), 100));

// Present the WriteableBitmap!
writeableBmp.Invalidate();

// Take snapshotvar clone = writeableBmp.Clone();

// Save to a TGA image stream (file for example)
writeableBmp.WriteTga(stream);

// Crops the WriteableBitmap to a region starting at P1(5, 8) and 10px wide and 10px highvar cropped = writeableBmp.Crop(5, 8, 10, 10);

// Rotates a copy of the WriteableBitmap 90 degress clockwise and returns the new copyvar rotated = writeableBmp.Rotate(90);

// Flips a copy of the WriteableBitmap around the horizontal axis and returns the new copyvar flipped = writeableBmp.Flip(FlipMode.Horizontal);

// Resizes the WriteableBitmap to 200px wide and 300px high using a bilinear interpolation methodvar resized = writeableBmp.Resize(200, 300, WriteableBitmapExtensions.Interpolation.Bilinear);

// Invalidate
writeableBmp.Dispose();

Additional Information

The WriteableBitmapEx library has its origin in several blog posts that also describe the implemenation and usage of some aspects in detail. The blog posts might be seen as the documentation.
WriteableBitmap Extension Methods introduced the SetPixel methods.
Drawing Lines - Silverlight WriteableBitmap Extensions II provided the DrawLine methods.
Drawing Shapes - Silverlight WriteableBitmap Extensions III brought the shape functionality (ellipse, polyline, quad, rectangle, triangle).
Convert, Encode And Decode Silverlight WriteableBitmap Data came with the byte array conversion methods and hows how to encode / decode a WriteableBitmap to JPEG.
Blitting and Blending with Silverlight’s WriteableBitmap provided the Blit functions.
WriteableBitmapEx - WriteableBitmap extensions now on CodePlex announced this project.
Quick and Dirty Output of WriteableBitmap as TGA Image provided the original TgaWrite function.
Rounder, Faster, Better - WriteableBitmapEx 0.9.0.0 announced version 0.9.0.0 and gives some further information about the curve sample.
Let it ring - WriteableBitmapEx for Windows Phone introtuced the WriteableBitmapEx version for the Windows Phone and a sample.
Filled To The Bursting Point - WriteableBitmapEx 0.9.5.0 announced version 0.9.5.0, has some information about the new Fill methods and comes with a nice sample.
One Bitmap to Rule Them All - WriteableBitmapEx for WinRT Metro Style announced version 1.0.0.0 and provides some background about the WinRT Metro Style version.

Support it

Credits

Bill Reiss wrote the Blit methods.
Nikola Mihaylov (Nokola) made some optimizations on the DrawLine and DrawRectangle methods, provided the original TgaWrite and the anti-aliased line drawing function.
Dr. Andrew Burnett-Thompson proposed the portability refactoring and WPF port.
Adam Kinney added some Blending modes to the Blit method.
Colin Eberhardt contributed the ForEach method.
Steve Hawley proposed an optimization of the Clear(Color) method.
Liam Bateman suggested the Color Keying BlendMode.
Mattias Fagerlund suggested the convolution method.
Wout de Zeeuw optimized the DrawLine method by 15%.
Lachlan Keown fixed a bug in the Blit alpha blending.
Your name here? We are always looking for valuable contributions.

René Schulte wrote all the rest and coordinates this project.

Ohloh statistics

↧