Гений мне: сломал ничью в Raphael.js для IE8 -> Что бы я сделал?

Question

Получил этот код отсюда http://www.irunmywebsite.com/raphael/drawtool2.php. Отлично работает в IE, когда я тестировал его на этом сайте ... Я сделал несколько модов, чтобы изменить стиль курсора и цвет обводки и т. Д. ... но моя версия не работает в IE. Я знаю, что это тонна кода, которую нужно просмотреть, но я действительно мог бы использовать новый набор глаз (или 20), чтобы помочь мне увидеть, что я изменил, что нарушает функцию в IE8.

ОРИГИНАЛЬНАЯ ВЕРСИЯ:

        var g_masterPathArray;
        var g_masterDrawingBox;
        var g_masterPaper;

        function initDrawing() {
            var g_masterPaper = Raphael(10,10,700,500);

            var masterBackground = g_masterPaper.rect(10,10,600,400);
            masterBackground.attr("fill", "#eee");
            masterBackground.mousemove(function (event) {
                var evt = event;
                var IE = document.all?true:false;
                var x, y;
                if (IE) {
                    x = evt.clientX + document.body.scrollLeft +
                    document.documentElement.scrollLeft;
                    y = evt.clientY + document.body.scrollTop +
                    document.documentElement.scrollTop;
                }
                else {
                    x = evt.pageX;
                    y = evt.pageY;
                }

                // subtract paper coords on page
                this.ox = x - 10;
                this.oy = y - 10;
            });

            var start = function () {
                g_masterPathArray = new Array();
            },
            move = function (dx, dy) {
                if (g_masterPathArray.length == 0) {
                    g_masterPathArray[0] = ["M",this.ox,this.oy];
                    g_masterDrawingBox = g_masterPaper.path(g_masterPathArray);
                    g_masterDrawingBox.attr({stroke: "#000000","stroke-width": 3});
                }
                else
                    g_masterPathArray[g_masterPathArray.length] =["L",this.ox,this.oy];

                g_masterDrawingBox.attr({path: g_masterPathArray});
            },
            up = function () {
                ;
            };

            masterBackground.drag(move, start, up);
            return g_masterPaper;
        }

МОЯ ВЕРСИЯ:

var g_masterPathArray;
var g_masterDrawingBox;
var g_masterPaper;
var paperOffset;
var dataObj = {};
var sketchpadArray = new Array();
var backgroundArray = new Array();
var evtIndex;
var stylus = { 'utensils' : [
{// Pen default settings
    'stroke':'#000',
    'strokeWidth': 3,
    'strokeOpacity':1,
    'cursor':'url('+jsThemeDir+'pix/pencil-flip.png), auto;'
},
{// Highlight default settings
    'stroke':'#EDF30C',
    'strokeWidth':10,
    'strokeOpacity':0.5,
    'cursor':'url('+jsThemeDir+'pix/highlight-flip.png), auto'
}
 ]
};// end stylus

jQuery('div.sketchpad').each( function(index,element) {

  var g_masterPaper = Raphael(element, jQuery( element ).css('width') , jQuery( element).css('height') );
  sketchpadArray.push( g_masterPaper );
  sketchpadArray[index].currentUtensil = 0;
  var masterBackground = g_masterPaper.rect(0,0, jQuery(element).css('width'),jQuery(element).css('height'));
  masterBackground.attr("fill", "#fff");// Background color of drawing rectangle
  masterBackground.attr("fill-opacity",0);// Opacity of this bgcolor
  masterBackground.attr('stroke-width',0);// Turn off rectangle border. We will give this to the svg in the css.

  backgroundArray.push( masterBackground );
  var drawSet = sketchpadArray[index].set();
  sketchpadArray[index].drawSet = drawSet;

  //masterBackground.attr('cursor','url('+jsThemeDir+'pix/pencil-flip.png)');// Cursor. We can apply this to the svg in css and avoid hardcoding here. 
  masterBackground.mousemove(function (event) {

    evtIndex = jQuery('svg').index( jQuery(event.target).parent('svg') );

    var evt = event;
    var IE = document.all?true:false;
    var x, y;
    if (IE) {
      x = evt.clientX + document.body.scrollLeft +
    document.documentElement.scrollLeft;
      y = evt.clientY + document.body.scrollTop +
    document.documentElement.scrollTop;
    }
    else {
      x = evt.pageX;
      y = evt.pageY;
    }

    // subtract paper coords on page
    paperOffset = jQuery( element ).offset();// get paper x and paper y
    this.ox = x - paperOffset.left;
    this.oy = y - paperOffset.top;
  });

  var start = function () {
    g_masterPathArray = new Array();
  },
  move = function (dx, dy) {
    if (g_masterPathArray.length == 0) {
      g_masterPathArray[0] = ["M",this.ox,this.oy];
      g_masterDrawingBox = g_masterPaper.path(g_masterPathArray);
      g_masterDrawingBox.attr({ 
        'stroke': stylus.utensils[sketchpadArray[evtIndex].currentUtensil].stroke,
        'stroke-width': stylus.utensils[sketchpadArray[evtIndex].currentUtensil].strokeWidth,
    'stroke-opacity': stylus.utensils[sketchpadArray[evtIndex].currentUtensil].strokeOpacity,
        'stroke-linecap':'round',
        'stroke-linejoin':'round'
      });    //stroke: "#000000","stroke-width": 3,"stroke-linecap":"round"});
    }
    else {
      g_masterPathArray[g_masterPathArray.length] =["L",this.ox,this.oy];
      g_masterDrawingBox.attr({path: g_masterPathArray});
      //console.log( masterbackgroundArray[masterBackground] );
  sketchpadArray[evtIndex].drawSet.push(g_masterDrawingBox);
  jQuery('.sketchpad:eq(0)').next('.sketchpad-controls-cont').find('.undo-btn, .clear-btn').removeClass('disabled');

    }
  },
  up = function () {
;
  };

  masterBackground.drag(move, start, up);

  // Draw immediate elements now! use a for/each to call each, sending appropriate obj
  drawInit(index, 'draw-on-load');
  initCorrect(index, 'draw-show-correct');

  return g_masterPaper;
});

Answer 1

РЕШЕНИЕ:

ОК, Часбин был прав, указав обратно на размеры для init. Кажется, что init-объект Raphael () прекрасно работал при рисовании ширины и высоты от родителя с помощью jquery:

var g_masterPaper = Raphael(element, jQuery( element ).css('width') , jQuery( element).css('height') );

Но ... когда я сделал то же самое с дочерним прямоугольником, который собирался обнаружить движение мыши, возникли проблемы:

var masterBackground = g_masterPaper.rect(0,0, jQuery(element).css('width'),jQuery(element).css('height'));

Что я обнаружил, так это то, что мне нужно было получить значение val с помощью jquery, удалить строку 'px' из строки, повторно ввести значение Number и , тогда IE примет его для инициализации этого прямоугольника.

var width = jQuery( element ).css('width');
width = width.replace('px','');
width = Number( width );

var height = jQuery( element ).css('height');
height = height.replace('px','');
height = Number( height );

Новая инициализация для masterBackground выглядит следующим образом:

var masterBackground = g_masterPaper.rect(0,0,width,height); 

Я предполагаю, что masterBackground создавался с шириной и высотой 0 ранее, и поэтому перемещение мыши не было обнаружено.

Кроме того, я пытался определить индекс окна рисования на случай, если на данной странице их было больше одного. Я пытался получить его, используя

jQuery( mycollection ).index( jQuery( event.target ) );

Это не будет работать с IE8. Вы должны получить целевой объект события другим способом:

var eventTarget = event.target || event.srcElement;

Answer 2

Вы получили это с моего сайта. Я думаю, что это работает на Ie в исходном состоянии Предположим, что вы не создаете полотно Рафаэля. То есть суетливо о том, где это началось Начните с основной страницы, которая рисует 1 круг, делайте заметки о том, где вы разместили общий вызов Рафаэля. Откуда был вызван initDrawing? Будет ли работать Том document.ready ()? Извините правописание ipod