最开始,由dalao @woaishici 最先开始制作了一个贝塞尔曲线
在一年后的今天,终于到我开始做祖玛了,于是也心血来潮自己做了一个新的贝塞尔生成器并且优化了一些
http://tl.iscyt.cn/test
相对于dalao做的贝塞尔生成器,这个生成器的优点:
1,修复了在边缘生成新贝塞尔曲线时,新贝塞尔曲线会越出屏幕外无法使用的问题
2,可以选择是否要显示贝塞尔曲线的直线连接线(虽然我觉得默认不显示会舒服很多,但我还是做了个没有用的功能)
3,新增了图片导入(重点!),可以直接把图片拖拽进游览器上进行图片切换
其中第三点是踩坑最多的地方,拖拽读取文件在cocos论坛和各大论坛都没有在引擎上进行拖拽图片读取的功能技术讨论,只能从原生的html5相关论坛和文档中找寻解决办法,对我这个2年没用过html5的小白来说非常困难
最后总结起来就十几行的代码,花费了我整整3天的时间去研究直接帖可用代码:
document.addEventListener("drop", function(event: DragEvent) {
event.preventDefault();//阻止拖拽结束的默认打开行为
console.log('看看?',event.dataTransfer.files);
let data = event.dataTransfer.files[0];
let file = new FileReader();
file.readAsDataURL(data);
//要等filereader文件打开后才能够成功读取到文件
file.onload = function(event){
let img = new Image;
img.src = (event.target.result as string);
let a = new cc.Texture2D;
a.initWithElement(img);
let spriteframe = new cc.SpriteFrame;
spriteframe.setTexture(a);
self.bg.spriteFrame = spriteframe;
}
})
document.addEventListener("dragover", function(event: DragEvent) {
event.preventDefault();//阻止拖拽结束的默认打开行为
})
document.addEventListener是原生的注册事件(之所以解释是为了给像我这样同样是html5的小白明白原生的事件注册方法是什么,当时纠结了好久this.node.on,最后发现跟cocos没有任何关系)
注册的方法 drop 和 dragover 分别为拖拽松手后和拖拽途中的持续输出,相关文档:
https://www.runoob.com/jsref/event-ondragover.html
其中,必须要2个事件都执行关闭游览器默认打开图片的方法才行(event.preventDefault()),不然游览器还是会默认把图片覆盖掉游戏
拖拽后,如果有文件,那么文件会存在于返回的 event.dataTransfer.files 中,以数组的形式存在。这里有个坑,就是他并不会保存这些文件,只是暂时存在。也就是说,当你输出event的时候,你会发现即使你拖拽了文件, event.dataTransfer.files 也是一个空数组。不过你依然可以直接通过 event.dataTransfer.files 获取到文件信息
之后需要创建 FileReader ,并且通过 readAsDataURL 方法对文件进行读取。(这里也有个坑,读取后,result则是对应的图片数据,但是通过这种方法读取的图片文件(包括媒体文件),是经过了base64加密的,如果手动解密,会发现是一串乱码,查过乱码是正常现象,而且也只有在经过加密的图片数据,才可以被读取)
第三个坑,那就是 FileReader 数据有个坑,此时获得的 result 数据,并不能够直接使用,必须要让 filereader 执行 onload 方法后(跟coocs一样),才可对数据进行转化。
此时获得的图片数据,可以直接新建 Image ,赋值进 src 里,并初始化一个新的texture2D ,最后转变成精灵,就成功完成图片的拖拽功能了
至于贝塞尔曲线,这里就直接帖dalao的贴了,里面进行了详细的介绍
--------------------------------2020-7-21-----------------------
虽然这个贴和生成器没什么人看,不过我还是再更新了一个版
考虑到祖玛这类的游戏,有时候起始点会外屏幕外的情况,现在新增了所选贝塞尔曲线的对应坐标弹窗,可以对选择的贝塞尔曲线进行坐标改动(不再是只能够拖拽了)。弹窗在点击屏幕后,会自动隐藏(但是因为适配的是手机的大小,因此只有在点击正中间的部位(750 * 1334),才能够被正确隐藏,否则无效)。
弹窗可拖动
稍微做的像个人用的东西
----------------------------2020-7-23---------------------------
你们都爱源码,就给你们看看好了,写的还是挺多问题的(比如写了个贝塞尔管理器,但是却并没有在管理他们的数据),看看就好
zuma.rar (22.6 KB)