说到刮刮乐这个功能,我们最先想到的是上下两张(长方形)重叠,之后对上面这张图片进行操作。

我的想法是:通过手势,让手指划过的地方变成透明的,底部就会显示了。

那如何让图片变为透明呢?这就要对图片的像素进行处理了。

首先,图片的像素是一个int型数组:int[], 此数组长度为图片高(像素)*宽(像素)

比如:一张图片的高宽为200pixel、400pixel,那么这个数组为int[80000]

对于每一个元素,官方文档说都是ARGB32[预乘RGB24]  (A指的是Alpha通道  控制透明度的)

256级(0-255)的RGB色彩总共能组合出约1678万种色彩,即256×256×256=16777216

即每一个元素都为:(-1:白色)----- (-16777216:黑色)   0或其他正值时为透明色

通过

originalWb = new WriteableBitmap(bitmapImage); 

我们获取到是一维数组,为了便于操作,我们将其转换为二维数组。

for (int i = ; i < iOriginalHeight; i++)  //图片高
{
for (int j = ; j < iOriginalWidth; j++)  //图片宽
{
pixelTwo[i, j] = originalWb.Pixels[i * (iOriginalWidth) + j];
}
}

之后我们在手势触摸后,我们就要处理像素了

如图所示:假设我们length=1(指的触摸后的大小吧)

如果我们选中的是红色那个位置,我就要将包括红色像素边上的距离为1的像素组成的正方形(绿色位置)变为透明

我们可以获取到绿色范围的开始结束行和列。

之后只要改变那个像素的颜色就行了。

originalWb.Pixels[(i * iOriginalWidth) + j] = ;//获取到的周边某个像素的下标为(i * l) + j

最后赋值给图片

下面给出WP8下的demo:记住:需要联网下载一张图片

点击下载

PS:但是效果不是非常的好,由于使用的是正方形(可惜writeablebitmap没有WPF下的一些方法)

如果有更好的方法,希望能告诉我!

WP8下实现刮刮乐(橡皮擦)功能的更多相关文章

  1. vue 刮刮乐功能实现

    <template> <!--游玩区域--> <div class="panel"> <canvas id="canvas&qu ...

  2. 游戏的套路你知道吗? H5 Canvas刮刮乐

    玩游戏的人 很多时候都会遇到翻牌子  开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结  指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了  其实很多时候在你点开那个 ...

  3. [cocos2d-js]cc.RenderTexture几种用法(数字图片、刮刮乐效果)

    [转]http://blog.csdn.net/realcrazysun1/article/details/42393629 本文基于cocos2d-js 3.0版本引擎开发 RenderTextur ...

  4. H5 Canvas刮刮乐

    玩游戏的人 很多时候都会遇到翻牌子  开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结  指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了  其实很多时候在你点开那个 ...

  5. canvas刮刮乐

    这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩! demo一:刮刮乐 舍 ...

  6. 20行js代码制作网页刮刮乐

    分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body> ![](img/gailun.jpg) &l ...

  7. Android 撕衣服(刮刮乐游戏)

    项目简单介绍: 该项目为撕衣服,相似刮刮乐游戏 具体介绍: 用户启动项目后.载入一张图片,当用户点击图片的时候,点击的一片区域就会消失.从而显示出在这张图片以下的图片 这个小游戏相似与刮奖一样,刮开涂 ...

  8. HTML5 CSS3 诱人的实例 :canvas 模拟实现电子彩票刮刮乐

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...

  9. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

随机推荐

  1. [转]一种简单的js时间控件

    使用方法: 粘贴代码到文本文档中,文档名称为datetime.js,然后在html文件中引用如下代码即可 <input name="shijian1" id="sh ...

  2. MultiThread

    Stephen Toub From MicroSoft Crop. Stephen Cleary It's All About the SynchronizationContext How would ...

  3. 【原】迎接微信winphone 5.0 版本的IE10样式兼容

    微信 Android 5.1 和 iPhone 5.1 已正式发布了,据说本12月底,微信将推出 Winphone 5.0版本,全面支持微信支付,它绑定 IE10 浏览器,那么做微信公众号的 H5 页 ...

  4. BZOJ 1070: [SCOI2007]修车 [最小费用最大流]

    1070: [SCOI2007]修车 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 4936  Solved: 2032[Submit][Status] ...

  5. c++ const函数是什么意思

    c++ const函数是什么意思 只读类型 const修饰在类的成员函数的尾部,表示这个函数不会修改类的成员.相当于this指针是const的.

  6. oracle基本操作符/运算符/操作语言

    racle中的操作符算术操作符: 无论是在sqlserver,或者是java中,每种语言它都有算术操作符,大同小异.Oracle中算术操作符(+)(-)(*)(/) 值得注意的是:/ 在oracle中 ...

  7. AngularJS之开发组件的一些思路

    欢迎大家指导与讨论 : ) 一 .前言 由于笔者水平有限,在这里只是分享自己开发组件的一些思路~ 摘要:无UI组件类.有UI组件类.有UI组件类型2.欢迎拍砖吐槽 O(∩_∩)O 二 .无UI组件类 ...

  8. StackExchange.Redis 访问封装类

    最近需要在C#中使用Redis,在Redis的官网找到了ServiceStack.Redis,最后在测试的时候发现这是个坑,4.0已上已经收费,后面只好找到3系列的最终版本,最后测试发现还是有BUG或 ...

  9. Swift学习(二):自定义扩展方法(Extensions)

    扩展就是向一个已有的类.结构体或枚举类型添加新功能(functionality) 扩展可以 添加计算型属性和计算静态属性 定义实例方法和类型方法 提供新的构造器 定义下标 定义和使用新的嵌套类型 使一 ...

  10. 关于Unity的网络框架

    注:Unity 5.1里引入了新的网络框架,未来目标应该是WOW那样的,现在还只是个P2P的架子. 网络的框架,无非是如何管理网络数据的收发,通信双方如何约定协议.之前做的框架与GameObject无 ...