Question

这是用于家庭作业，它有一个令人烦恼的错误，经过数小时的挣扎后我无法解决。

http://canvaseu.chrisloughnane.net/

在欧盟地图上点击国家/地区路径会触发绑定事件。

此事件会破坏图层子项并加载国家/地区。但是，如果您单击并快速移动鼠标并释放按钮，则国家/地区加载，但是来自欧盟的国家/地区路径仍然存在。如屏幕抓取所示，西班牙最能证明这一点。

我希望在mapLayer.destroyChildren();之后回调然后调用load函数来解决我的问题。

这可能有点难以复制。

我确信我的控制权与我的观点过于紧密，但我无法看到解决方案将它们整齐地分开。

enter image description here

****编辑****

我提出了一个部分有效的解决方案，但我认为这是一个糟糕的黑客代码，我添加到mousedown绑定down = true;并添加了对mouseout绑定的检查，请参阅下文。我认为发生的事情是当你移动鼠标并让按钮快速移动时，mouseover绑定就会超过鼠标。

此解决方案并不理想，在加载了多个国家/地区后鼠标悬停在区域上时，画布响应速度变慢。

Event Binding

path.on('mousedown touchstart', function() 
{
            down = true;
    this.setStroke('red');
    this.moveTo(topLayer);
    /****
     * Handle if the path we are displaying in canvas is the eu
     * to allow selection and load of country path point data.
     */
    if (associativeCountryArray[lastCountry].getText() == 'eu') 
    {
        associativeCountryArray[lastCountry].setFill('#bbb');
        associativeCountryArray[lastCountry].setFontStyle('normal');
        countrynames[lastCountry].selected = false;
        this.moveTo(mapLayer);
        mapLayer.destroyChildren();
        lastCountry = this.getName();
        countrynames[this.getName()].selected = true;
        associativeCountryArray[this.getName()].setFill("rgb(" + r + "," + g + "," + b + ")");
        associativeCountryArray[this.getName()].setFontStyle('bold');
        loadPaths(this.getName().replace(/\s/g, ''));
        countryNameLayer.draw();
    }
    else
    {
        window.open('https://www.google.com/search?q=' + this.getName(),'_blank');
    }
    topLayer.drawScene();
});



path.on('mouseout', function() 
{
    if(!down)
    {
        document.body.style.cursor = 'default';
        this.setFill('#eee');
        this.setStrokeWidth(settings.strokewidthstart);
        /****
         * On hover, only change colour of country names around edge of canvas if we are on the 'eu' map
         */
        if (lastCountry == 'eu') 
        {
            associativeCountryArray[this.getName()].setFill('#bbb');
            associativeCountryArray[this.getName()].setFontStyle('normal');
        }
        this.setStroke('#555');
        this.moveTo(mapLayer);
        writeMessage('');
        topLayer.draw();
        countryNameLayer.draw();
    }
    else
    {
        down = false;
    }
});
path.on('mouseup touchend', function() 
{
    this.setStroke('black');
    topLayer.drawScene();
    down = false;
});

Answer 1

像这样：

发送要清除的容器（组，图层）以及要触发的回调。

function myDestroyChildren(container,callback) {
    var children = container.getChildren();
    while(children.length > 0) {
        children[0].destroy();
    }
    callback();
}

如何在layer.destroyChilden（）之后实现回调

1 个答案: