0

これは宿題用で、何時間も格闘しても解決できない厄介なバグがあります。

http://canvaseu.chrisloughnane.net/

EU マップで国のパスをクリックすると、バインドされたイベントが発生します。

このイベントはレイヤーの子を破棄し、国をロードします。しかし、クリックしてマウスをすばやく動かし、ボタンを放すと、国が読み込まれますが、eu からの国パスは残ります。これは、スクリーン グラブに示されているように、スペインで最もよく示されています。

mapLayer.destroyChildren();ロード関数を呼び出すためのコールバックが問題を解決することを願っています。

これを再現するのは少し難しいかもしれません。

私のコントロールは私のビューとあまりにも結びついていると確信していますが、それらをきれいに分離する解決策を見ることができませんでした.

ここに画像の説明を入力

**** 編集 ****

部分的に機能する解決策を思いつきましたが、これはひどいハック コードだと思います。マウスダウン バインディング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;
});
4

1 に答える 1

1

このような：

クリアするコンテナー (グループ、レイヤー) とトリガーするコールバックを送信します。

function myDestroyChildren(container,callback) {
    var children = container.getChildren();
    while(children.length > 0) {
        children[0].destroy();
    }
    callback();
}
于 2013-11-06T04:26:37.363 に答える