bobiscool / wxDraw

A lightweight canvas library which providing 2d draw for weapp 微信小程序2d动画库 😎 🐼
https://bobiscool.github.io/wxDrawDocs/#/
MIT License
1.72k stars 295 forks source link

大佬,这个动效插件发现了些逻辑错误,死循环调用导致性能损耗非常高。 #77

Open anthonyhann opened 6 years ago

anthonyhann commented 6 years ago

var context = wx.createCanvasContext('first') this.wxCanvas = new Draw(context, 0, 0, 400, 500) // var rect = new Shape('rect', { x: 60, y: 60, w: 40, h: 40, fillStyle: '#2FB8AC', rotate: Math.PI / 2 }, 'mix', true) let img = new Shape('image', { x: 100, y: 300, w: 100, h: 100, file: '../../../static/image/avatar.png' }, 'fill', true) this.wxCanvas.add(img)// 添加到canvas上面 img.animate({ 'x': '+=100', 'y': '+=100' }, { duration: 1000 }).animate('rotate', Math.PI * 5, { duration: 1000 }).start()

贴上一段源代码,就是文档提供的实例代码。报错如下:  image

深入源码跟踪,发现是eventBus里面的对象数组有问题: `var eventBus = function eventBus() { this.eventList = []; }; eventBus.prototype = { add: function add(name, scope, event) { //添加事件 初始化事件 //console.log('添加' + name); if (this.eventList.length) { this.eventList.forEach(function (ele) { if (ele.name == name) { ele.thingsList.push(event); //如果已经有了这个事件 那就 存list 并且退出程序 return false; } }, this); // 如果没有 那就再造一个 console.log(scope);

        this.eventList.push({
            name: name,
            scope: scope,
            thingsList: [event]
        });
        console.log(this.eventList);

    } else {
        this.eventList.push({
            name: name,
            scope: scope,
            thingsList: [event]
        });
    }

    //console.log(this.eventList);
},`

源代码如上,打印出来的 eventList数组中的scope对象,显示是一个地域回调 image

尝试修改源码未果,希望可以一起探讨出来一个解决方案。

Awen-hub commented 4 years ago

eventList的scope中包含了bus,bus中又有eventList,对象内部出现了重复引用,在原生小程序里面应该没有问题,在类Vue和react框架中会导致diff算法直接卡死,scope的使用频率也高,看了很久都没找到合适解决方案。

louisV7 commented 4 years ago

eventList的scope中包含了bus,bus中又有eventList,对象内部出现了重复引用,在原生小程序里面应该没有问题,在类Vue和react框架中会导致diff算法直接卡死,scope的使用频率也高,看了很久都没找到合适解决方案。

请问你有找到其他的库吗,我用mpvue也遇到这个问题,原生canvas写起来实在麻烦~

perchecc commented 11 months ago

我也遇到了性能很大的问题