拼图 canvas分割 dom拖拽 pc 移动端
参考的案例,不支持手机端。总结下实现过程中遇到的小坑。
gitHub:https://github.com/WppFrontEnd/puzzle
大概步奏分为三部分:
1. cavas 分割图片
2. 图片乱序
3. 排序图片
其中1和2都是参考了Canvas drag 实现拖拽拼图小游戏。
代码主要如下:
1. cavas 分割图片
segmentImg: function(puzzleImg){
var index =0;
divisionNum =3;
var imgHeight = puzzleImg.height;
var imgWidth = puzzleImg.width;
var sigelH = imgHeight/divisionNum;
var sigelW = imgWidth/divisionNum;
this.canvas.height = sigelH;
this.canvas.width = sigelW;
for(var i=0;i<divisionNum;i++){
for(var j=0;j<divisionNum;j++){
posX = sigelW * j+(5*j);
posY = sigelH * i+(5*i);
this.context.drawImage(puzzleImg, sigelW * j, sigelH * i, sigelW, sigelH, 0, 0, sigelW, sigelH);
this.imgCanvasList[index].src= this.canvas.toDataURL('image/jpeg');
this.imgCanvasList[index].id=index;
index++;
}
}
}
canvas分割图片
在分割图片的时候,遇到了一个坑: 生成的图片的大小总是300*150,而我需要的图片只是在300*150的右上角,而不是一张完整我切割的图片,大概如下:
虽然我知道设置canvas的大小是要写在标签上的,然后我没有想到写在style里面,html上显示的canvas是有效果的,可是生成图片的时候却依然是默认的大小。
之前是这样写的
this.canvas.style.height = sigelH;
this.canvas.style.width = sigelW;
改成这样
this.canvas.height = sigelH;
this.canvas.width = sigelW;
2. 图片乱序
sortImg: function(){
this.imgCanvasList.sort(function(){
return Math.random() - Math.random();
});
}
图片乱序
这是第二个坑:
正常的逻辑即是,先分割图片,在乱序
self.segmentImg(puzzleImg);
self.sortImg();
然而这样写并没有达到乱序的效果。
整理下逻辑:
这样就通了,但是我也发现我这样写的一个不好之处: self.sortImg();不能单独拿出来用,如果想排两次序就得执行两次排序赋值。所以还需要改进~
3. 排序图片
dragEvent: function(){
var contain = document.getElementById('game');
//bind dragStart function
var imgList = contain.querySelectorAll('img');
var that = this;
var listLen = that.imgDomList.length;
var originImgIndex;
var dragImgIndex; for(var i=0, len = that.imgDomList.length; i < len; i++ ){
var draggie = new Draggabilly(that.imgDomList[i]);
draggie.on( 'dragStart', function( event, pointer) {
dragImg = event.srcElement;
}); draggie.on( 'dragEnd', function( event, pointer) {
console.log(pointer);
var clickX = pointer.pageX;
var clickY = pointer.pageY;
console.log(clickX+ ' '+clickY);
var index =0;
for(var i=0;i<listLen;i++){
var posX1 = that.imgDomList[i].offsetTop;
var posX2 = posX1+that.imgDomList[i].height;
var posY1 = that.imgDomList[i].offsetLeft;
var posY2 = posY1+that.imgDomList[i].width;
if(clickX>=posY1&&clickX<=posY2&&clickY>=posX1&&clickY<=posX2){
index++;
if(index==1){
originImgIndex = i;
}else if(index==2){
dragImgIndex = i;
index=0;
}
}
} var originImgId = that.imgDomList[originImgIndex].id;
var originObj = document.getElementById(originImgId);
var cache = {
'src': originObj.src,
'id': originObj.id
}; if(!dragImgIndex){
originObj.style.left=0;
originObj.style.top=0;
originImgIndex="";
dragImgIndex="";
}else{
var endObjId = that.imgDomList[dragImgIndex].id;
var endObj = document.getElementById(endObjId);
originObj.src=endObj.src;
originObj.id=endObj.id;
endObj.src = cache.src;
endObj.id = cache.id;
originObj.style.left=0;
originObj.style.top=0;
endObj.style.left=0;
endObj.style.top=0;
originImgIndex="";
dragImgIndex="";
}
that.isSuccess();
})
} }
排序的过程中,主要遇到两个问题:
(1) offsetTop,height,offsetLef,width 取到的值都是四舍五入的整数
解决办法: 用style.top,style.left 但是结果都带px
(2) 值引用,引用类型
例如:
好好研究一下。
拼图 canvas分割 dom拖拽 pc 移动端的更多相关文章
- canvas drag 实现拖拽拼图小游戏
博主一直心心念念想做一个小游戏- 前端时间终于做了一个小游戏,直到现在才来总结,哈哈- 以后要勤奋点更新博客! 实现原理 1.如何切图? 用之前的方法就是使用photoshop将图片切成相应大小的图 ...
- 如何实现Canvas图像的拖拽、点击等操作
上一篇Canvas的博文写完后,有位朋友希望能对Canvas绘制出来的图像进行点击.拖拽等操作,因为Canvas绘制出的图像能很好的美化.好像是想做炉石什么的游戏,我也没玩过. Canvas在我的理解 ...
- canvas实现鼠标拖拽矩形移动改变大小
项目的一个新需求,动态生成矩形框,鼠标点击拖动改变矩形框的位置,并可以调整大小. 之前做过一个小demo,需求类似,但是在canvas内只有一个矩形框,拖动移动,当时记得是用isPointInPath ...
- dom 拖拽回放
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- dom 拖拽div
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5 -canvas拖拽、移动 绘制图片可操作移动,拖动
关于canvas 的基础知识就不多说了,可以进这个网址学习 http://www.w3school.com.cn/html5/html_5_canvas.asp 对于canvas 和 SVG 其实一开 ...
- 使用UGUI实现拖拽功能(拼图小游戏)
实现方式 1.引入UGUI自带的事件系统 UnityEngine.EventSystems 2.为我们的类添加接口 IBeginDragHandler, IDragHandler, IEndDragH ...
- canvas 拖拽实现
Canvas 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏,其中的许多对象会被频繁重绘 SVG 不依赖分辨率 支持事件处理器 ...
- javascript小实例,PC网页里的拖拽
几年前,我参与设计开发一个房产网的项目,我负责前端工作,由于项目经理要求比较高,参考了很多房产类网站比较优秀的功能,想把别人比较优秀的设计和想法集合到一起,那时的设计稿和功能实现,简直就是改了又改,今 ...
随机推荐
- 如何启动另一个应用的activity
1.使用action Intent i=new Intent(); i.setAction(".........."); startActivity(i); 前提条件:要启动的ac ...
- 使用Git命令上传本地项目
前提,安装git,使用cmd进入项目根目录. 初始化git init 再添加文件git add .git commit -m '项目名' 上传项目到Github仓库git remote add ori ...
- NK3C:异常处理(前端)
前端的提示有些也不是很规范,主要体现如下: 1.ResultInfo的返回值,false的情况下,未做处理: 2.ResultInfo的返回值,false的情况下,做了其他操作,未提示错误:(虽然没报 ...
- nil与NULL的区别
首先nil表示无值,任何变量在没有被赋值之前的值都为nil,对于真假判断,只有nil与false表示假,其余均为真.而NULL是一个宏定义,值为0.并且,nil一般赋值给空对象,NULL一般赋值给ni ...
- <读书笔记>软件调试之道 :从大局看调试-零容忍策略
声明:本文档的内容主要来源于书籍<软件调试修炼之道>作者Paul Butcher,属于读书笔记.欢迎转载! ---------------------------------------- ...
- SDcard
import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileInputStream; import ja ...
- 利用npoi导出Excel
npoi库是当下最流行的处理Excel.Word.PPT等Office文件格式 npoi的下载地址:http://npoi.codeplex.com/ npoi的官方学习地址: http://www. ...
- Sublime文本排序&查找重复行&删除重复行
排序 按F9或者选择菜单:Edit > Sort Lines,对每行文本进行排序 查找重复行 排序好后,按Ctrl+F,调出查找面板 查找字符串: ^(.+)$[\r\n](^\1$[\r\n] ...
- win7系统部分便笺的元数据已被损坏怎么恢复
解决Windows7系统打开便笺:部分便笺的元数据已被损坏,便笺已将其恢复为默认值.这个问题! Windows7下有一部分系统打开便笺就会报出以下情况 其实这个方法很好解决! 我们需要重新注册一下下面 ...
- 浅谈WebSocket
WebSocket是H5提出的为了解决客户端和服务器双工通信的方法.在我们使用HTTP协议通信时,客户端主动向服务器发送请求,得到服务器端数据.为了与服务器端数据保持一致,之前常用的有轮询和长轮询两种 ...