/Visual Studio 2008/CSSL3WriteableBitmap/ReadMe.html

# · HTML · 353 lines · 348 code · 5 blank · 0 comment · 0 complexity · b57b8dc8a41e56145cf435c2851dda8c MD5 · raw file 

    

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">

    3. 

  3. 

    4. 

  4. <head>

    5. 

  5. <meta content="zh-cn" http-equiv="Content-Language" />

    6. 

  6. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

    7. 

  7. <title>Working with Silverlight Writeab</title>

    8. 

  8. <style type="text/css">

    9. 

  9. h1 {

    10. 

  10. 	color: #FF0000;

    11. 

  11. }

    12. 

  12. h2 {

    13. 

  13. 	color: #3399FF;

    14. 

  14. }

    15. 

  15. </style>

    16. 

  16. </head>

    17. 

  17. 

    18. 

  18. <body>

    19. 

  19. 

    20. 

  20. <h1>Working with Silverlight WriteableBitmap</h1>

    21. 

  21. <h2>Introduction</h2>

    22. 

  22. <p>WriteableBitmap is a new feature in Silverlight 3. It allows you to work with 

    23. 

  23. raw pixel data of a bitmap image. This enables a lot of useful scenarios. 

    24. 

  24. However, due to the limitation in the security sandbox (for example, unable to 

    25. 

  25. write unsafe code that uses pointers), you may need to write more code compared 

    26. 

  26. to a similar desktop application.</p>

    27. 

  27. <p>This sample contains 3 sub samples which demonstrate some common tasks when 

    28. 

  28. working with WriteableBitmap:</p>

    29. 

  29. <ul>

    30. 

  30. 	<li>The gun shoot sample. It allows you to select two images of different 

    31. 

  31. 	size, scales them to the same resolution, and puts one on top of the other. 

    32. 

  32. 	When you click the top image to fire some bullets, a gun mark will be 

    33. 

  33. 	created, and you&#39;ll be able to see through the bottom image. This sample 

    34. 

  34. 	demonstrates how to scale a source image to a specific resolution (800 * 600 

    35. 

  35. 	in this case), as well as how to modify individual pixels.</li>

    36. 

  36. 	<li>The fill color sample. It implements a common feature in painting 

    37. 

  37. 	programmers: Fill an area with a solid color. It demonstrates how to apply 

    38. 

  38. 	common algorithms to Silverlight WriteableBitmap, as well as how to avoid 

    39. 

  39. 	stack overflow in very deep recursive methods by simulating the way CLR 

    40. 

  40. 	invokes methods.</li>

    41. 

  41. 	<li>The screenshot sample. It demonstrates another feature of 

    42. 

  42. 	WriteableBitmap: Create bitmap screenshots from either bitmap or non-bitmap 

    43. 

  43. 	elements. It allows you to save the result to a bmp file. It also 

    44. 

  44. 	demonstrates the limitation of the screenshot feature.</li>

    45. 

  45. </ul>

    46. 

  46. <p>To work with WriteableBitmap in any advanced scenarios, solid foundation of 

    47. 

  47. computer graphics is required. You should at least understand how bitmap is 

    48. 

  48. stored in memory, the essential concepts related to pixels and colors, and how 

    49. 

  49. to work with bitwise shift operations to improve performance.</p>

    50. 

  50. <h2>Important: When to use WriteableBitmap, and when not</h2>

    51. 

  51. <p>Traditionally, it may be attempted to use some CPU based solutions similar to 

    52. 

  52. WriteableBitmap whenever you need to modify a pixel on the screen. However, 

    53. 

  53. these days we have much better GPU based solutions. For example: The mighty 

    54. 

  54. shader effect. Keep in mind that when using WriteableBitmap, all jobs are 

    55. 

  55. performed on the CPU, and if you need to do the job on each pixel, you will have 

    56. 

  56. to do them pixel by pixel. Even if you create multiple threads, you can process 

    57. 

  57. at least 4 pixels at one time on a quad-core CPU. GPU, on the other hand, can 

    58. 

  58. process all pixels in parallel, no matter how many pixels the scenario contains. 

    59. 

  59. Also, in most scenarios, it is much easier to write HLSL compared to a CPU based 

    60. 

  60. algorithm, because you can think with a single pixel rather than find where the 

    61. 

  61. pixel is, get its color in an integer value, extract the ARGB information using 

    62. 

  62. bitwise shift operations, and so on. So it is recommended to use shader effect 

    63. 

  63. whenever possible.</p>

    64. 

  64. <p>However, shader effects do have limitations:</p>

    65. 

  65. <ul>

    66. 

  66. 	<li>Silverlight 3 supports pixel shader only. No vertex shader and geometry 

    67. 

  67. 	shader. Without geometry shader, you cannot create GPU primitives 

    68. 

  68. 	dynamically in your HLSL program.</li>

    69. 

  69. 	<li>Silverlight 3 supports shader 2.0 only (while Direct 3D 11 supports 

    70. 

  70. 	shader 5.0). There&#39;re a lot of limitations in shader 2.0 due to the 

    71. 

  71. 	limitation of GPU at that time. For example, up to 64 arithmetic instructions may be given in a HLSL program, limited numbers of GPU 

    72. 

  72. 	registries can be used, and so on. Keep in mind GPU does not support loop. 

    73. 

  73. 	So when compiling HLSL, all loops will be expanded. That will introduce more 

    74. 

  74. 	arithmetic instructions than you may expect. Silverlight needs to support 

    75. 

  75. 	low end GPUs (in contrast to Direct 3D). That&#39;s why shader 2.0 is chosen.</li>

    76. 

  76. 	<li>Some features are just difficult to be written in shader effect. For 

    77. 

  77. 	example, one pixel&#39;s processing relies on another pixel&#39;s result. Shader 

    78. 

  78. 	effects are usually used to perform the same operation to all pixels. Of 

    79. 

  79. 	course, you can pass different parameters to achieve different results. 

    80. 

  80. 	Think of a swirl effect. All pixels are performed using the same algorithm, 

    81. 

  81. 	just the angle parameter is different. So shader effect can be used. 

    82. 

  82. 	However, if you want to fill an area with a solid color, or maybe even 

    83. 

  83. 	gradient, it can be very difficult to do with shader effect.</li>

    84. 

  84. </ul>

    85. 

  85. <p>So use WriteableBitmap when:</p>

    86. 

  86. <ul>

    87. 

  87. 	<li>Your algorithm is too complex for a shader 2.0 program.</li>

    88. 

  88. 	<li>You have to support extremely low end computers where even shader 2.0 is 

    89. 

  89. 	not supported (in this case, CPU&#39;s SSE instructions set will be used if you 

    90. 

  90. 	choose shader effect, whose performance is not ideal).</li>

    91. 

  91. 	<li>In your algorithm, one pixel&#39;s processing relies on another pixel&#39;s 

    92. 

  92. 	result.</li>

    93. 

  93. </ul>

    94. 

  94. <h2>Difference between Silverlight and WPF&#39;s WriteableBitmap</h2>

    95. 

  95. <p>While this sample targets Silverlight, you may want to port it to WPF. You 

    96. 

  96. must be aware of some key differences between Silverlight and WPF&#39;s 

    97. 

  97. WriteableBitmap:</p>

    98. 

  98. <ul>

    99. 

  99. 	<li>Silverlight doesn&#39;t allow you to write unsafe code that uses pointers, 

    100. 

  100. 	while you will have to write unsafe code when working with WPF 

    101. 

  101. 	WriteableBitmap.</li>

    102. 

  102. 	<li>Silverlight exposes a Pixels property whose type is int[], while WPF 

    103. 

  103. 	exposes a BackBuffer property which is a pointer (convert it to a byte*) to 

    104. 

  104. 	the pixels&#39; data.</li>

    105. 

  105. 	<li>In Silverlight, since the pixel&#39;s color is of type int, you will have to 

    106. 

  106. 	use bitwise shift operations to extract ARGB information (you can use other 

    107. 

  107. 	solutions, but they&#39;re slow). In WPF, you can control the pointer to point 

    108. 

  108. 	to whatever position you like. For example, point to A, and then to R with 

    109. 

  109. 	pointer++.</li>

    110. 

  110. 	<li>Silverlight&#39;s WriteableBitmap supports Pbgra32 format only, so the back 

    111. 

  111. 	buffer stride is always pixel width * 4. WPF supports a lot of formats. So 

    112. 

  112. 	you need to get the back buffer stride from the BackBufferStride property.</li>

    113. 

  113. 	<li>In WPF, you need to wrap the write operation in a Lock and Unlock pair, 

    114. 

  114. 	while in Silverlight this is not required.</li>

    115. 

  115. 	<li>WPF allows you to use PLINQ to work with multi-core CPUs without 

    116. 

  116. 	worrying about threads, while in Silverlight you have to implement your own 

    117. 

  117. 	if you want to take advantage of multi-core CPUs.</li>

    118. 

  118. </ul>

    119. 

  119. <p>So, if you want to convert the following Silverlight code (extracted from the 

    120. 

  120. fill color sample) to WPF,</p>

    121. 

  121. <p align="left" class="MsoNormal">

    122. 

  122. <span lang="EN-US" style="font-size:9.0pt;font-family:

    123. 

  123. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    124. 

  124. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    125. 

  125. </span><span style="color:green">//Start from the clicked point.<o:p></o:p></span></span></p>

    126. 

  126. <p align="left" class="MsoNormal">

    127. 

  127. <span lang="EN-US" style="font-size:9.0pt;font-family:

    128. 

  128. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    129. 

  129. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    130. 

  130. </span><span style="color:#2B91AF">Point</span> clickedPoint = 

    131. 

  131. e.GetPosition(img);<o:p></o:p></span></p>

    132. 

  132. <p align="left" class="MsoNormal">

    133. 

  133. <span lang="EN-US" style="font-size:9.0pt;font-family:

    134. 

  134. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    135. 

  135. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    136. 

  136. </span><span style="color:green">//The position of the clicked point in the 

    137. 

  137. pixel array.<o:p></o:p></span></span></p>

    138. 

  138. <p align="left" class="MsoNormal">

    139. 

  139. <span lang="EN-US" style="font-size:9.0pt;font-family:

    140. 

  140. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    141. 

  141. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    142. 

  142. </span><span style="color:blue">int</span> clickedColorPosition = bmp.PixelWidth 

    143. 

  143. * (<span style="color:blue">int</span>)clickedPoint.Y + (<span style="color:blue">int</span>)clickedPoint.X;<o:p></o:p></span></p>

    144. 

  144. <p align="left" class="MsoNormal">

    145. 

  145. <span lang="EN-US" style="font-size:9.0pt;font-family:

    146. 

  146. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    147. 

  147. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    148. 

  148. </span><span style="color:green">//The color of the clicked point.<o:p></o:p></span></span></p>

    149. 

  149. <p align="left" class="MsoNormal">

    150. 

  150. <span lang="EN-US" style="font-size:9.0pt;font-family:

    151. 

  151. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    152. 

  152. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    153. 

  153. </span><span style="color:blue">int</span> clickedColor = 

    154. 

  154. bmp.Pixels[clickedColorPosition];<o:p></o:p></span></p>

    155. 

  155. <p>you will need to write:</p>

    156. 

  156. <p align="left" class="MsoNormal">

    157. 

  157. <span lang="EN-US" style="font-size:9.0pt;font-family:

    158. 

  158. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    159. 

  159. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    160. 

  160. </span>bmp.Lock();<o:p></o:p></span></p>

    161. 

  161. <p align="left" class="MsoNormal">

    162. 

  162. <span lang="EN-US" style="font-size:9.0pt;font-family:

    163. 

  163. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    164. 

  164. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    165. 

  165. </span><span style="color:green">//</span></span><span style="color:green"><span style="font-size:9.0pt;font-family:

    166. 

  166. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    167. 

  167. mso-font-kerning:0pt;mso-no-proof:yes">The start position in the back buffer.</span></span></p>

    168. 

  168. <p align="left" class="MsoNormal">

    169. 

  169. <span lang="EN-US" style="font-size:9.0pt;font-family:

    170. 

  170. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    171. 

  171. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    172. 

  172. </span><span style="color:blue">byte</span>* start = (<span style="color:blue">byte</span>*)bmp.BackBuffer.ToPointer();<o:p></o:p></span></p>

    173. 

  173. <p align="left" class="MsoNormal">

    174. 

  174. <span lang="EN-US" style="font-size:9.0pt;font-family:

    175. 

  175. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    176. 

  176. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    177. 

  177. </span><span style="color:green">//<span lang="EN-US" style="font-size: 9.0pt; font-family: 新宋体; mso-hansi-font-family: &quot;Times New Roman&quot;; mso-bidi-font-family: &quot;Times New Roman&quot;; mso-font-kerning: 0pt; mso-no-proof: yes"><span style="color: green">Start 

    178. 

  178. from the clicked point.<o:p></o:p></span></span></span></span></p>

    179. 

  179. <p align="left" class="MsoNormal">

    180. 

  180. <span lang="EN-US" style="font-size:9.0pt;font-family:

    181. 

  181. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    182. 

  182. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    183. 

  183. </span><span style="color:#2B91AF">Point</span> c</span><span style="font-size:9.0pt;font-family:

    184. 

  184. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    185. 

  185. mso-font-kerning:0pt;mso-no-proof:yes">licked</span><span lang="EN-US" style="font-size:9.0pt;font-family:

    186. 

  186. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    187. 

  187. mso-font-kerning:0pt;mso-no-proof:yes">Point = e.GetPosition(img);<o:p></o:p></span></p>

    188. 

  188. <p align="left" class="MsoNormal">

    189. 

  189. <span lang="EN-US" style="font-size:9.0pt;font-family:

    190. 

  190. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    191. 

  191. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    192. 

  192. </span><span style="color:green">//</span></span><span style="color:green"><span style="font-size:9.0pt;font-family:

    193. 

  193. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    194. 

  194. mso-font-kerning:0pt;mso-no-proof:yes">Get how many bytes a pixel occupies.</span></span></p>

    195. 

  195. <p align="left" class="MsoNormal">

    196. 

  196. <span lang="EN-US" style="font-size:9.0pt;font-family:

    197. 

  197. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    198. 

  198. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    199. 

  199. </span><span style="color:blue">int</span> bytesPerPixel = bmp.BackBufferStride 

    200. 

  200. / bmp.PixelWidth;<o:p></o:p></span></p>

    201. 

  201. <p align="left" class="MsoNormal">

    202. 

  202. <span lang="EN-US" style="font-size:9.0pt;font-family:

    203. 

  203. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    204. 

  204. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    205. 

  205. </span><span style="color:green">//</span></span><span lang="EN-US" style="font-size: 9.0pt; font-family: 新宋体; mso-hansi-font-family: &quot;Times New Roman&quot;; mso-bidi-font-family: &quot;Times New Roman&quot;; mso-font-kerning: 0pt; mso-no-proof: yes"><span style="color: green">The 

    206. 

  206. position of the clicked point in the pixel array.<o:p></o:p></span></span></p>

    207. 

  207. <p align="left" class="MsoNormal">

    208. 

  208. <span lang="EN-US" style="font-size:9.0pt;font-family:

    209. 

  209. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    210. 

  210. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    211. 

  211. </span><span style="color:blue">byte</span>* c</span><span style="font-size:9.0pt;font-family:

    212. 

  212. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    213. 

  213. mso-font-kerning:0pt;mso-no-proof:yes">licked</span><span lang="EN-US" style="font-size:9.0pt;font-family:

    214. 

  214. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    215. 

  215. mso-font-kerning:0pt;mso-no-proof:yes">Color</span><span style="font-size:9.0pt;font-family:

    216. 

  216. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    217. 

  217. mso-font-kerning:0pt;mso-no-proof:yes">Position</span><span lang="EN-US" style="font-size:9.0pt;font-family:

    218. 

  218. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    219. 

  219. mso-font-kerning:0pt;mso-no-proof:yes"> = start + (<span style="color:blue">int</span>)c</span><span style="font-size:9.0pt;font-family:

    220. 

  220. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    221. 

  221. mso-font-kerning:0pt;mso-no-proof:yes">licked</span><span lang="EN-US" style="font-size:9.0pt;font-family:

    222. 

  222. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    223. 

  223. mso-font-kerning:0pt;mso-no-proof:yes">Point.X 

    224. 

  224. * bytesPerPixel + bmp.BackBufferStride * (<span style="color:blue">int</span>)c</span><span style="font-size:9.0pt;font-family:

    225. 

  225. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    226. 

  226. mso-font-kerning:0pt;mso-no-proof:yes">licked</span><span lang="EN-US" style="font-size:9.0pt;font-family:

    227. 

  227. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    228. 

  228. mso-font-kerning:0pt;mso-no-proof:yes">Point.Y;<o:p></o:p></span></p>

    229. 

  229. <p align="left" class="MsoNormal">

    230. 

  230. <span lang="EN-US" style="font-size:9.0pt;font-family:

    231. 

  231. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    232. 

  232. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    233. 

  233. </span><span style="color:green">//<span lang="EN-US" style="font-size: 9.0pt; font-family: 新宋体; mso-hansi-font-family: &quot;Times New Roman&quot;; mso-bidi-font-family: &quot;Times New Roman&quot;; mso-font-kerning: 0pt; mso-no-proof: yes"><span style="color: green">The 

    234. 

  234. color of the clicked point.<o:p></o:p></span></span></span></span></p>

    235. 

  235. <p align="left" class="MsoNormal">

    236. 

  236. <span lang="EN-US" style="font-size:9.0pt;font-family:

    237. 

  237. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    238. 

  238. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    239. 

  239. </span><span style="color:blue">byte</span>[] c</span><span style="font-size:9.0pt;font-family:

    240. 

  240. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    241. 

  241. mso-font-kerning:0pt;mso-no-proof:yes">licked</span><span lang="EN-US" style="font-size:9.0pt;font-family:

    242. 

  242. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    243. 

  243. mso-font-kerning:0pt;mso-no-proof:yes">Color =

    244. 

  244. <span style="color:blue">new</span> <span style="color:blue">byte</span>[bytesPerPixel];<o:p></o:p></span></p>

    245. 

  245. <p align="left" class="MsoNormal">

    246. 

  246. <span lang="EN-US" style="font-size:9.0pt;font-family:

    247. 

  247. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    248. 

  248. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    249. 

  249. </span><span style="color:blue">for</span> (<span style="color:blue">int</span> 

    250. 

  250. i = 0; i &lt; bytesPerPixel; i++)<o:p></o:p></span></p>

    251. 

  251. <p align="left" class="MsoNormal">

    252. 

  252. <span lang="EN-US" style="font-size:9.0pt;font-family:

    253. 

  253. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    254. 

  254. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    255. 

  255. </span>{<o:p></o:p></span></p>

    256. 

  256. <p align="left" class="MsoNormal">

    257. 

  257. <span lang="EN-US" style="font-size:9.0pt;font-family:

    258. 

  258. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    259. 

  259. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    260. 

  260. </span>c</span><span style="font-size:9.0pt;font-family:

    261. 

  261. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    262. 

  262. mso-font-kerning:0pt;mso-no-proof:yes">licked</span><span lang="EN-US" style="font-size:9.0pt;font-family:

    263. 

  263. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    264. 

  264. mso-font-kerning:0pt;mso-no-proof:yes">Color[i] = c</span><span style="font-size:9.0pt;font-family:

    265. 

  265. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    266. 

  266. mso-font-kerning:0pt;mso-no-proof:yes">licked</span><span lang="EN-US" style="font-size:9.0pt;font-family:

    267. 

  267. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    268. 

  268. mso-font-kerning:0pt;mso-no-proof:yes">Color</span><span style="font-size:9.0pt;font-family:

    269. 

  269. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    270. 

  270. mso-font-kerning:0pt;mso-no-proof:yes">Position</span><span lang="EN-US" style="font-size:9.0pt;font-family:

    271. 

  271. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    272. 

  272. mso-font-kerning:0pt;mso-no-proof:yes">[i];<o:p></o:p></span></p>

    273. 

  273. <p align="left" class="MsoNormal">

    274. 

  274. <span lang="EN-US" style="font-size:9.0pt;font-family:

    275. 

  275. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    276. 

  276. mso-font-kerning:0pt;mso-no-proof:yes"><span style="mso-tab-count:3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    277. 

  277. </span>}</span><o:p></o:p><br/><o:p>//Other operations.</o:p>

    278. 

  278. <span style="font-size:9.0pt;font-family:

    279. 

  279. 新宋体;mso-hansi-font-family:&quot;Times New Roman&quot;;mso-bidi-font-family:&quot;Times New Roman&quot;;

    280. 

  280. mso-font-kerning:0pt;mso-no-proof:yes">

    281. 

  281. <br/><o:p>bmp.Unlock();</o:p></span>

    282. 

  282. <p>&nbsp;</p>

    283. 

  283. <p>In the future, we may also write WPF WriteableBitmap samples.</p>

    284. 

  284. <h2>Walkthrough of each sample</h2>

    285. 

  285. <h3>Gun shoot</h3>

    286. 

  286. <p>When you select 2 bitmap images, 2 WriteableBitmaps will be created and 

    287. 

  287. stored in memory. Since the images&#39; size may be different, we need to convert 

    288. 

  288. them to the same resolution. This is done by calculate a ratio and then 

    289. 

  289. multiplies each pixel&#39;s position with the ratio. For example, if we need to 

    290. 

  290. convert a 1600*1200 image to 800*600, we simply multiplies each pixel&#39;s position 

    291. 

  291. with 0.5</p>

    292. 

  292. <p>After the WriteableBitmaps are created, we set the source of the Image 

    293. 

  293. Control to the top one, and the source images are no longer needed.</p>

    294. 

  294. <p>When you click on the image, the program calculates a circle whose radius is 

    295. 

  295. 50. It also calculates the rectangle bound of the circle so we don&#39;t need to 

    296. 

  296. walkthrough all pixels. Then for each pixel in the bound, if it is in the 

    297. 

  297. radius, we paint the pixel with the color in the bottom image at the same 

    298. 

  298. position. So you will be able to see through the bottom image at this pixel. We 

    299. 

  299. also draw a gun mark at the edge of the circle. This demonstrates how to extract 

    300. 

  300. the ARGB values, and how to modify them.</p>

    301. 

  301. <p>Finally, do not forget you must once again set the Image Control&#39;s Source 

    302. 

  302. property to the WriteableBitmap, or it won&#39;t be updated.</p>

    303. 

  303. <h3>Fill color</h3>

    304. 

  304. <p>This samples implements a very simple version of edge detection algorithm: 

    305. 

  305. The growth method. It starts from the clicked point. If the clicked point&#39;s 

    306. 

  306. color is the same as the filling color, then terminates the algorithm. Otherwise 

    307. 

  307. extract the left, right, top, and bottom pixels (grow to the 4 pixels). If the 

    308. 

  308. color is different from the clicked pixel, then we need to fill this pixel with 

    309. 

  309. the filling color. And then we grow the graph to the left, right, top, and 

    310. 

  310. bottom pixels of the new pixel.</p>

    311. 

  311. <p>If you have a very large area to be filled, you may soon get into stack 

    312. 

  312. overflow due to a very deep recursive. To avoid this, we can try to put the 

    313. 

  313. recursive body inside a normal loop, and manually simulate the way CLR invokes a 

    314. 

  314. method. To do so, first we need a stack. The number of elements inside the stack 

    315. 

  315. represents the number of the method needs to be invoked. The data inside the 

    316. 

  316. stack is the method&#39;s parameter. Now whenever we need to invoke the recursive 

    317. 

  317. method, we instead populates a parameter data, and push it to the stack. When 

    318. 

  318. the recursive body is executed, we pop the stack to get the parameter of this 

    319. 

  319. recursion. Once there&#39;s no data in the stack, it means the recursive method has 

    320. 

  320. finally completed, so we can exit the loop.</p>

    321. 

  321. <p>If you want to provide your own image for this sample, please choose images 

    322. 

  322. with large areas that can be filled. Also be aware of anti-aliased images. The 

    323. 

  323. sample&#39;s implementation of the algorithm is simple, and do not take 

    324. 

  324. anti-aliasing into account. For example, it may be difficult to see the 

    325. 

  325. difference between 0xfffffffe and 0xffffffff, but the algorithm thinks the two 

    326. 

  326. pixels have different color.</p>

    327. 

  327. <h3>Screenshot</h3>

    328. 

  328. <p>In this sample, you will see two rectangles. The above one is a vector 

    329. 

  329. graphic that is wrapped in a Canvas, and the below one is a bitmap that is 

    330. 

  330. captured from the above rectangle from time to time. It is very easy to use the 

    331. 

  331. screenshot feature of WriteableBitmap. Just provide a UIElement and its 

    332. 

  332. transform to the constructor. However, as demonstrated in this sample, there&#39;re 

    333. 

  333. some limitations.</p>

    334. 

  334. <p>Supported features:</p>

    335. 

  335. <ul>

    336. 

  336. 	<li>The current value in the animation.</li>

    337. 

  337. 	<li>RenderTransform.</li>

    338. 

  338. 	<li>Shader Effects.</li>

    339. 

  339. </ul>

    340. 

  340. <p>Unsupported features:</p>

    341. 

  341. <ul>

    342. 

  342. 	<li>Projection.</li>

    343. 

  343. 	<li>Non-UIElement, such as html elements.</li>

    344. 

  344. </ul>

    345. 

  345. <p>So be aware if you want to use WriteableBitmap to capture screenshots because 

    346. 

  346. projection will be lost.</p>

    347. 

  347. <p>This sample also implements a bmp encoder to allow you to save the result to 

    348. 

  348. a bmp file. Silverlight doesn&#39;t ship the various bitmap encoders out of box. So 

    349. 

  349. you will have to implement your own if you need.</p>

    350. 

  350. 

    351. 

  351. </body>

    352. 

  352. 

    353. 

  353. </html>
    354.