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

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

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

首先,图片的像素是一个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. Dan Zhang - Visual Studio ALM MVP

    I am a Microsoft Certified Partner specialising in .NET solutions, also worked as an ALM consultant. ...

  2. Comparison of SQL Server Compact, SQLite, SQL Server Express and LocalDB

    Information about LocalDB comes from here and SQL Server 2014 Books Online. LocalDB is the full SQL ...

  3. Apache 配置虚拟主机三种方式

    一.基于IP 1. 假设服务器有个IP地址为192.168.1.10,使用ifconfig在同一个网络接口eth0上绑定3个IP: [root@localhost root]# ifconfig et ...

  4. flex align-content中的描述的“多根轴线的对齐方式”中的“多根轴线”到底是什么

    flex 有两条轴线,根据flex-flow 设置的来判断的,水平为主轴的话,那么值为row,垂直为主轴的话那么为column: 其中设置align-items 和 align-content都是来设 ...

  5. 分布式服务框架 dubbo/dubbox 入门示例

    dubbo是一个分布式的服务架构,可直接用于生产环境作为SOA服务框架. 官网首页:http://dubbo.io/ ,官方用户指南 http://dubbo.io/User+Guide-zh.htm ...

  6. 【转】Chrome 控制台不完全指南

    原文出处: 刘哇勇的博客(@刘哇勇)   欢迎分享原创到伯乐头条 Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更快 ...

  7. 解决win8 下 eclipse 中文字体太小的问题

    一.把字体设置为Courier New  操作步骤:打开Elcipse,点击菜单栏上的“Windows”——点击“Preferences”——点击“Genneral”——点击“Appearance”— ...

  8. 【BZOJ 1087】【SCOI 2005】互不侵犯King

    http://www.lydsy.com/JudgeOnline/problem.php?id=1087 很简单的状压,需要预处理,我两个状态可不可以挨着的预处理出错WA了好几次. 这个位运算预处理好 ...

  9. 线段树 HDU 3397

    5种操作 具体看代码 #include<iostream> #include<stdio.h> #include<string.h> #include<alg ...

  10. 如何完全卸载(Mac&Windows)office 365 ProPlus

    Q: 如何完全卸载office 365 ProPlus,如果用户使用之前的office版本没有卸载干净(配置文件中保持了原有的Key)会造成新安装的office 365 ProPlus 或者最新版的o ...