【WPF学习】第四十七章 WriteableBitmap类

　　wpf允许使用image元素显示位图。然而，按这种方法显示图片的方法完全是单向的。应用程序使用现成的位图，读取问题，并在窗口中显示位图。就其本身而言，image元素没有提供创建和编辑位图信息的方法。

　　这正是writeablebitmap类的用武之地。该类继承自bitmapsource，bitmapsource类是当设置image.source属性时使用的类(不管是在代码中直接设置图像，还是在xaml中隐式地设置图像)。但bitmapsource是只读的位图数据映射，而writeablebitmap类是可修改的像素数组，为实现许多有趣得效果提供了可能。

一、生成位图

　　为使用writeablebitmap类生成一幅位图，必须提供提供几部分重要信息：以像素为单位的宽度和高度、两个方向上的dpi分辨率以及图像格式。

　　下面是创建一幅与当前图像元素尺寸相同的位图的示例：

// create the bitmap, with the dimensions of the image placeholder.
            writeablebitmap wb = new writeablebitmap((int)img.width,
                (int)img.height, 96, 96, pixelformats.bgra32, null);

　　pixelformats枚举提供了许多像素格式，但只有一半格式呗认为是可写入的并且得到了writeablebitmap类的支持。下面是可供使用的像素格式：

• 　　bgra32。这种格式使用32位srgb颜色。这意味每个像素由32位(或4个字节)表示。第1个字节表示蓝色通道的贡献(作为从0到255之间的数字)。第2个字节用于绿色通道，第3个字节用于红色通道，第4个字节用于alpha值(0表示完全透明，255表示完全不透明)。正如可能看到的，颜色的顺序（蓝绿、红和alpha）与名称bgra32中字母的顺序是匹配的。

• 　　bgr32。.这种格式为每个像素使用4个字节，就像bgra32格式一样。区别是忽略了alpha通道。当不需要透明度时可使用这种格式。
• 　　pbgra32。就像bgra32格式一样，该格式为每个像素使用4个字节。区别在于处理半透明像素的方式。为了提高透明度计算的性能，每个颜色字节是预先相乘的（因此在pbgra32中有字母p）。这意味着每个颜色字节被乘上了alpha值并除以255.在bgra32格式中具有b、g、r、a值(255,100,0,200)的半透明像素，在pbgra32格式中变成了(200,78,0,200)。
• 　　blackwhite、gray2、gray4、gray8。这些格式是黑白和灰度格式。单词gray后面的数字和每像素的位置相对应。因此，这些格式是压缩的，但它们不支持颜色。
• 　　indexed1、indexed2、indexed4、indexed8。这些是索引格式，这意味着每个像素指向颜色调色板中的一个值。当使用这些格式中的某种格式时，必须做出writeablebitmap构造函数的最后一个参数传递相应的colorpalette对象。单词indexed后面的数字和每像素的位数相对应。索引格式是压缩的，使用这些格式稍微复杂一些，并且分别支持更少的颜色——2、4、16以及256种颜色。

　　前三种格式——bgra32、bgr32以及pbgra32——是最常见的选择。

二、写入writeablebitmap对象

　　开始时，writeablebitmap对象中所有字节的值都是0。本质上，就是一个大的黑色的矩形。为使用内容填充writeablebitmap对象，需要使用writepixels()方法。writepixels()方法将字节数组复制到指定位置的位图中，可调用writepixels()方法设置单个像素、整幅位图或选择的某块矩形区域。为从writeablebitmap对象中获取像素，需要使用copypixels()方法，该方法将希望获取的多个字节转换成字节数组。总之，writepixels()和copypixels()方法没有提供可供使用的最方便编程模型，但这是低级像素访问需要付出的代价。

　　为成功地使用writepixels()方法，需要理解图像格式并需要理解如何将像素编码到字节。例如，在bgra32类型的32位位图中，每个像素需要4个字节，每个字节分别用于蓝、绿、红以及alpha成分。下面的代码显示了如何手动设置这些数值，然后将它们转换成数组：

int alpha = 0;
int red = 0;
int green = 0;
int blue = 0;

byte[] colordata={blue,gree,red,alpha};

　　需要注意，在此顺序是很关键的。字节数组必须遵循在bgra32标准中设置的蓝、绿、红、alpha顺序。

　　当调用writepixels()方法时，提供int32rect对象以指定位图中希望更新的矩形区域。int32rect封装了4部分信息：更新区域左上角的x和y坐标，以及更新区域的宽度和高度。

　　下面的代码采用在前面代码中显示的colordata数组，并使用该数组设置writeablebitmap对象中的第一个像素：

// define the update square (which is as big as the entire image).
int32rect rect = new int32rect(0, 0, (int)img.width, (int)img.height);

wb.writepixels(rect, colordata, 0, 0);

　　使用这种方法，可创建生产writeablebitmap对象的代码例程。只需要循环处理图像中的所有列和所有行，并在每次迭代中更新单个像素。

            random rand = new random();
            for (int x = 0; x < wb.pixelwidth; x++)
            {
                for (int y = 0; y < wb.pixelheight; y++)
                {
                    int alpha = 0;
                    int red = 0;
                    int green = 0;
                    int blue = 0;

                    // determine the pixel's color.
                    if ((x % 5 == 0) || (y % 7 == 0))
                    {
                        red = (int)((double)y / wb.pixelheight * 255);
                        green = rand.next(100, 255);
                        blue = (int)((double)x / wb.pixelwidth * 255);
                        alpha = 255;
                    }
                    else
                    {
                        red = (int)((double)x / wb.pixelwidth * 255);
                        green = rand.next(100, 255);
                        blue = (int)((double)y / wb.pixelheight * 255);
                        alpha = 50;
                    }

                    // set the pixel value.                    
                    byte[] colordata = { (byte)blue, (byte)green, (byte)red, (byte)alpha }; // b g r

                    int32rect rect = new int32rect(x, y, 1, 1);
                    int stride = (wb.pixelwidth * wb.format.bitsperpixel) / 8;
                    wb.writepixels(rect, colordata, stride, 0);

                    //wb.writepixels(.[y * wb.pixelwidth + x] = pixelcolorvalue;
                }
            }

　　上述代码包含一个额外细节：针对跨距(stride)的计算，writepixels()方法需要跨距。从技术角度看，跨距是每行像素数据需要的字节数量。可通过将每行中像素的数量乘上所使用格式的每像素位数(通常为4，如本例使用的bgra32格式)，然后将所得结果除以8，进而将其从位数转换成字节数。

　　完成每个像素的生产过程后，需要显示最终位图。通常将使用image元素完成该工作：

img.source = wb;

　　即使是在写入和显示位图后，也仍可自由地读取和修改writeablebitmap对象中的像素，从而可以构建更特殊的用于位图编辑以及位图命中测试的例程。

三、更高效的像素写入

　　尽管上一节中显示的代码可以工作，但并非最佳方法。如果需要一次性写入大量像素数据——甚至是整幅图像——最好使用更大的块，因为调用writepixels()方法需要一定的开销，并且调用该方法越频繁，应用程序的运行速度就越慢。

　　下图显示了一个测试应用程序。该测试程序通过使用沿着规则网格线散步的基本随机模式填充像素来创建一幅动态位图。本章示例采用两种方法执行该任务：使用上一节中国解释的逐像素方法和稍后介绍看到的一次写入策略。如果测试该应用程序，将发现一次写入技术快很多。

 

 　　为一次更新多个像素，需要理解像素被打包进字节数组的方式。无论使用哪种格式，更新缓冲区都将包括一维字节数组。这个数组提供了用于图像矩形区域中像素的数值，从左向右延伸填充每行，然后自上而下延伸。

　　为找到某个特定像素，需要使用以下公式，下移数行，然后一道该行中恰当的位置：

(x + y * wb.pixelwidth) * bitsperpixel 

　　例如，为设置一幅bgra32格式(每个像素具有4个字节)的位图中额像素(40,100),需要使用下面的代码：

int pixeloffset = (x + y * wb.pixelwidth) * wb.format.bitsperpixel / 8;
pixels[pixeloffset] = (byte)blue;
pixels[pixeloffset + 1] = (byte)green;
pixels[pixeloffset + 2] = (byte)red;
pixels[pixeloffset + 3] = (byte)alpha;

　　根据上面的方法，下面是创建前面示例的完整代码，首先在一个数组中填充所有数据，然后值通过一次writepixels()方法调用将其复制到writeablebitmap对象中：

// create the bitmap, with the dimensions of the image placeholder.
            writeablebitmap wb = new writeablebitmap((int)img.width,
                (int)img.height, 96, 96, pixelformats.bgra32, null);

            // define the update square (which is as big as the entire image).
            int32rect rect = new int32rect(0, 0, (int)img.width, (int)img.height);

            byte[] pixels = new byte[(int)img.width * (int)img.height * wb.format.bitsperpixel / 8];
            random rand = new random();
            for (int y = 0; y < wb.pixelheight; y++)
            {
                for (int x = 0; x < wb.pixelwidth; x++)
                {
                    int alpha = 0;
                    int red = 0;
                    int green = 0;
                    int blue = 0;

                    // determine the pixel's color.
                    if ((x % 5 == 0) || (y % 7 == 0))
                    {
                        red = (int)((double)y / wb.pixelheight * 255);
                        green = rand.next(100, 255);
                        blue = (int)((double)x / wb.pixelwidth * 255);
                        alpha = 255;
                    }
                    else
                    {
                        red = (int)((double)x / wb.pixelwidth * 255);
                        green = rand.next(100, 255);
                        blue = (int)((double)y / wb.pixelheight * 255);
                        alpha = 50;
                    }

                    int pixeloffset = (x + y * wb.pixelwidth) * wb.format.bitsperpixel / 8;
                    pixels[pixeloffset] = (byte)blue;
                    pixels[pixeloffset + 1] = (byte)green;
                    pixels[pixeloffset + 2] = (byte)red;
                    pixels[pixeloffset + 3] = (byte)alpha;


                }

                int stride = (wb.pixelwidth * wb.format.bitsperpixel) / 8;

                wb.writepixels(rect, pixels, stride, 0);
            }

            // show the bitmap in an image element.
            img.source = wb;

　　在实际应用程序中，可选择折中方法。如果需要更新位图中一块较大的区域，不会一次写入一个像素，因为这种方法的运行速度太慢。但也不会在内存中同时保存全部图像数据，因为图像数据可能会很大(毕竟，一幅每像素需要4个字节的1000×1000像素的图像需要将近4mb的内存，这一要求不会很过分，但是耶比较高)。相反，应当写入一大块图像数据而不是单个像素，当一次生成一整幅位图时尤其如此。

本章示例完整标记：

<window x:class="drawing.generatebitmap"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        title="generatebitmap" height="460" width="472" sizetocontent="widthandheight">
    <grid x:name="layoutroot" background="white">
        <grid.rowdefinitions>
            <rowdefinition height="auto"></rowdefinition>
            <rowdefinition></rowdefinition>
        </grid.rowdefinitions>
        <button content="button" grid.row="1" height="81" horizontalalignment="left" margin="106,90,0,0" name="button1" verticalalignment="top" width="193" />
        <button content="generate bitmap" width="120" margin="5" padding="10" click="cmdgenerate2_click" horizontalalignment="center"></button>
        <image grid.row="1" x:name="img" margin="5" width="400" height="300" ishittestvisible="false"></image>
    </grid>
</window>

using system;
using system.collections.generic;
using system.linq;
using system.text;
using system.threading.tasks;
using system.windows;
using system.windows.controls;
using system.windows.data;
using system.windows.documents;
using system.windows.input;
using system.windows.media;
using system.windows.media.imaging;
using system.windows.shapes;

namespace drawing
{
    /// <summary>
    /// generatebitmap.xaml 的交互逻辑
    /// </summary>
    public partial class generatebitmap : window
    {
        public generatebitmap()
        {
            initializecomponent();
        }

        private void cmdgenerate_click(object sender, routedeventargs e)
        {
            // create the bitmap, with the dimensions of the image placeholder.
            writeablebitmap wb = new writeablebitmap((int)img.width,
                (int)img.height, 96, 96, pixelformats.bgra32, null);

            // define the update square (which is as big as the entire image).
            int32rect rect = new int32rect(0, 0, (int)img.width, (int)img.height);

            byte[] pixels = new byte[(int)img.width * (int)img.height * wb.format.bitsperpixel / 8];
            random rand = new random();
            for (int y = 0; y < wb.pixelheight; y++)
            {
                for (int x = 0; x < wb.pixelwidth; x++)
                {
                    int alpha = 0;
                    int red = 0;
                    int green = 0;
                    int blue = 0;

                    // determine the pixel's color.
                    if ((x % 5 == 0) || (y % 7 == 0))
                    {
                        red = (int)((double)y / wb.pixelheight * 255);
                        green = rand.next(100, 255);
                        blue = (int)((double)x / wb.pixelwidth * 255);
                        alpha = 255;
                    }
                    else
                    {
                        red = (int)((double)x / wb.pixelwidth * 255);
                        green = rand.next(100, 255);
                        blue = (int)((double)y / wb.pixelheight * 255);
                        alpha = 50;
                    }

                    int pixeloffset = (x + y * wb.pixelwidth) * wb.format.bitsperpixel / 8;
                    pixels[pixeloffset] = (byte)blue;
                    pixels[pixeloffset + 1] = (byte)green;
                    pixels[pixeloffset + 2] = (byte)red;
                    pixels[pixeloffset + 3] = (byte)alpha;


                }

                int stride = (wb.pixelwidth * wb.format.bitsperpixel) / 8;

                wb.writepixels(rect, pixels, stride, 0);
            }

            // show the bitmap in an image element.
            img.source = wb;
        }

        private void cmdgenerate2_click(object sender, routedeventargs e)
        {


            // create the bitmap, with the dimensions of the image placeholder.
            writeablebitmap wb = new writeablebitmap((int)img.width,
                (int)img.height, 96, 96, pixelformats.bgra32, null);

            random rand = new random();
            for (int x = 0; x < wb.pixelwidth; x++)
            {
                for (int y = 0; y < wb.pixelheight; y++)
                {
                    int alpha = 0;
                    int red = 0;
                    int green = 0;
                    int blue = 0;

                    // determine the pixel's color.
                    if ((x % 5 == 0) || (y % 7 == 0))
                    {
                        red = (int)((double)y / wb.pixelheight * 255);
                        green = rand.next(100, 255);
                        blue = (int)((double)x / wb.pixelwidth * 255);
                        alpha = 255;
                    }
                    else
                    {
                        red = (int)((double)x / wb.pixelwidth * 255);
                        green = rand.next(100, 255);
                        blue = (int)((double)y / wb.pixelheight * 255);
                        alpha = 50;
                    }

                    // set the pixel value.                    
                    byte[] colordata = { (byte)blue, (byte)green, (byte)red, (byte)alpha }; // b g r

                    int32rect rect = new int32rect(x, y, 1, 1);
                    int stride = (wb.pixelwidth * wb.format.bitsperpixel) / 8;
                    wb.writepixels(rect, colordata, stride, 0);

                    //wb.writepixels(.[y * wb.pixelwidth + x] = pixelcolorvalue;
                }
            }

            // show the bitmap in an image element.
            img.source = wb;
        }
    }
}