自制的第二个贝塞尔曲线生成器(2阶)

最开始,由dalao @woaishici 最先开始制作了一个贝塞尔曲线

在一年后的今天,终于到我开始做祖玛了,于是也心血来潮自己做了一个新的贝塞尔生成器:14:并且优化了一些
http://tl.iscyt.cn/test
相对于dalao做的贝塞尔生成器,这个生成器的优点:
1,修复了在边缘生成新贝塞尔曲线时,新贝塞尔曲线会越出屏幕外无法使用的问题
2,可以选择是否要显示贝塞尔曲线的直线连接线(虽然我觉得默认不显示会舒服很多,但我还是做了个没有用的功能:2:

3,新增了图片导入(重点!),可以直接把图片拖拽进游览器上进行图片切换

其中第三点是踩坑最多的地方,拖拽读取文件在cocos论坛和各大论坛都没有在引擎上进行拖拽图片读取的功能技术讨论,只能从原生的html5相关论坛和文档中找寻解决办法,对我这个2年没用过html5的小白来说非常困难
最后总结起来就十几行的代码,花费了我整整3天的时间去研究: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加密的,如果手动解密,会发现是一串乱码,查过乱码是正常现象:2:,而且也只有在经过加密的图片数据,才可以被读取)

第三个坑,那就是 FileReader 数据有个坑,此时获得的 result 数据,并不能够直接使用,必须要让 filereader 执行 onload 方法后(跟coocs一样),才可对数据进行转化。

此时获得的图片数据,可以直接新建 Image ,赋值进 src 里,并初始化一个新的texture2D ,最后转变成精灵,就成功完成图片的拖拽功能了:14:

至于贝塞尔曲线,这里就直接帖dalao的贴了,里面进行了详细的介绍

--------------------------------2020-7-21-----------------------
虽然这个贴和生成器没什么人看,不过我还是再更新了一个版:test:

考虑到祖玛这类的游戏,有时候起始点会外屏幕外的情况,现在新增了所选贝塞尔曲线的对应坐标弹窗,可以对选择的贝塞尔曲线进行坐标改动(不再是只能够拖拽了)。弹窗在点击屏幕后,会自动隐藏(但是因为适配的是手机的大小,因此只有在点击正中间的部位(750 * 1334),才能够被正确隐藏,否则无效)。
弹窗可拖动
稍微做的像个人用的东西:13:

----------------------------2020-7-23---------------------------
你们都爱源码,就给你们看看好了,写的还是挺多问题的(比如写了个贝塞尔管理器,但是却并没有在管理他们的数据:2:),看看就好
zuma.rar (22.6 KB)

5赞

前排mark…

战略mark

战略mark

大佬能发一份源码嘛…

mark!!!

牛皮~~~~

新版本做了点小更新,顺便顶个帖看看有没有BUG
(因为本意只是做来方便美术出图的,所以代码写的比较狗屎就不贴源码了:2:)

mark!!!

可怜的我还一直在写业务逻辑,大佬是不是应该给个代码 学习一下 私发也行!:heart_eyes:

其实这个也算是业务代码啦233,做给美术导出数据用的,只是有点闲时,就花点时间搞了些花里胡哨的东西:7:

发了写的不咋滴的源码,有dalao看的话可以指点下:2:

Mark 贝塞尔曲线生成器

mark,刚好需要!!