0

マウスオーバーを使用してsvg要素内にrectを作成しようとしています。時々それは大丈夫です、しかし時々私はこのようなエラーを受け取ります:

   >TypeError
   arguments: Array[2]
   get message: function getter() { [native code] }
   get stack: function getter() { [native code] }
   set message: function setter() { [native code] }
   set stack: function setter() { [native code] }
   type: "undefined_method"
   __proto__: Error

これはJavascriptコードです:

    function _click(evt){
    if (cropping){
        if (initial_point == 0){
            console.log('first click');
            rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            rect.setAttributeNS(null, 'id', 'area');
            svg.appendChild(rect);
            coords = myMapApp.calcCoord(evt);
            x_initial = coords.x.toFixed(1);
            y_initial = coords.y.toFixed(1);
            initial_point = 1;
        }
        else{
            console.log('second click');
            width = Math.abs(x_final - x_initial);
            height = Math.abs(y_final - y_initial);
            x = x_initial
            if (x_final < x_initial)
                x = x_final
            y = y_initial   
            if (y_final < y_initial)
                y = y_final
            svg.setAttributeNS(null, 'viewBox', x + ' '+ y + ' ' + width + ' ' + height);
            if (rect != null)
                svg.removeChild(rect);
            initial_point = 0;
            x_final = 0;
            y_final = 0;
            x_initial = 0;
            y_initial = 0;
        }
    }
}

    function _mouseMove(evt){
    try{
        if ((cropping) && (initial_point)){
            coords = myMapApp.calcCoord(evt);
            x_final = coords.x.toFixed(1);
            y_final = coords.y.toFixed(1);
            width = Math.abs(x_final - x_initial);
            height = Math.abs(y_final - y_initial);

            console.log('1');
            x = x_initial
            if (x_final < x_initial)
                x = x_final
            y = y_initial   
            if (y_final < y_initial)
                y = y_final
            console.log('2');
            rect.setAttributeNS(null, 'fill', 'red');
            rect.setAttributeNS(null, 'stroke', 'red');
            rect.setAttributeNS(null, 'x', x);
            rect.setAttributeNS(null, 'y', y);
            rect.setAttributeNS(null, 'width', width);
            rect.setAttributeNS(null, 'height', height);
            rect.setAttributeNS(null, 'opacity', 0.5);
            console.log('3');
        }
    }catch(err){
        initial_point = 0;
        console.log(err);
        x_final = 0;
        y_final = 0;
        x_initial = 0;
        y_initial = 0;
        if (rect != null)
            svg.removeChild(rect);
    }}

'rect'は、上記の行でpublic(var rect)としてすでに宣言されています。イベントの管理方法のhtml5の問題ですか?

ここにフィドルがありますが、エクスポート方法がわからないライブラリがいくつかあります。

4

0 に答える 0