WP8下实现刮刮乐(橡皮擦)功能
说到刮刮乐这个功能,我们最先想到的是上下两张(长方形)重叠,之后对上面这张图片进行操作。
我的想法是:通过手势,让手指划过的地方变成透明的,底部就会显示了。
那如何让图片变为透明呢?这就要对图片的像素进行处理了。
首先,图片的像素是一个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下实现刮刮乐(橡皮擦)功能的更多相关文章
- vue 刮刮乐功能实现
<template> <!--游玩区域--> <div class="panel"> <canvas id="canvas&qu ...
- 游戏的套路你知道吗? H5 Canvas刮刮乐
玩游戏的人 很多时候都会遇到翻牌子 开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结 指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了 其实很多时候在你点开那个 ...
- [cocos2d-js]cc.RenderTexture几种用法(数字图片、刮刮乐效果)
[转]http://blog.csdn.net/realcrazysun1/article/details/42393629 本文基于cocos2d-js 3.0版本引擎开发 RenderTextur ...
- H5 Canvas刮刮乐
玩游戏的人 很多时候都会遇到翻牌子 开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结 指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了 其实很多时候在你点开那个 ...
- canvas刮刮乐
这周有点迷茫,不知道干嘛了,一天天就过去了!我在博客右侧公告栏加了qq交流,各位有好的主题,或者有趣的技术,欢迎交流!今天突发奇想,就写了2个h5 canvas的demo玩玩! demo一:刮刮乐 舍 ...
- 20行js代码制作网页刮刮乐
分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body>  &l ...
- Android 撕衣服(刮刮乐游戏)
项目简单介绍: 该项目为撕衣服,相似刮刮乐游戏 具体介绍: 用户启动项目后.载入一张图片,当用户点击图片的时候,点击的一片区域就会消失.从而显示出在这张图片以下的图片 这个小游戏相似与刮奖一样,刮开涂 ...
- HTML5 CSS3 诱人的实例 :canvas 模拟实现电子彩票刮刮乐
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...
- 用Canvas画一个刮刮乐
Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...
随机推荐
- Dan Zhang - Visual Studio ALM MVP
I am a Microsoft Certified Partner specialising in .NET solutions, also worked as an ALM consultant. ...
- 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 ...
- Apache 配置虚拟主机三种方式
一.基于IP 1. 假设服务器有个IP地址为192.168.1.10,使用ifconfig在同一个网络接口eth0上绑定3个IP: [root@localhost root]# ifconfig et ...
- flex align-content中的描述的“多根轴线的对齐方式”中的“多根轴线”到底是什么
flex 有两条轴线,根据flex-flow 设置的来判断的,水平为主轴的话,那么值为row,垂直为主轴的话那么为column: 其中设置align-items 和 align-content都是来设 ...
- 分布式服务框架 dubbo/dubbox 入门示例
dubbo是一个分布式的服务架构,可直接用于生产环境作为SOA服务框架. 官网首页:http://dubbo.io/ ,官方用户指南 http://dubbo.io/User+Guide-zh.htm ...
- 【转】Chrome 控制台不完全指南
原文出处: 刘哇勇的博客(@刘哇勇) 欢迎分享原创到伯乐头条 Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更快 ...
- 解决win8 下 eclipse 中文字体太小的问题
一.把字体设置为Courier New 操作步骤:打开Elcipse,点击菜单栏上的“Windows”——点击“Preferences”——点击“Genneral”——点击“Appearance”— ...
- 【BZOJ 1087】【SCOI 2005】互不侵犯King
http://www.lydsy.com/JudgeOnline/problem.php?id=1087 很简单的状压,需要预处理,我两个状态可不可以挨着的预处理出错WA了好几次. 这个位运算预处理好 ...
- 线段树 HDU 3397
5种操作 具体看代码 #include<iostream> #include<stdio.h> #include<string.h> #include<alg ...
- 如何完全卸载(Mac&Windows)office 365 ProPlus
Q: 如何完全卸载office 365 ProPlus,如果用户使用之前的office版本没有卸载干净(配置文件中保持了原有的Key)会造成新安装的office 365 ProPlus 或者最新版的o ...