天才我：打破了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

SOLUTION：

OK，Chasbeen是指回尺寸初始化正确。拉斐尔的init（）对象似乎正常工作使用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')); 

我发现，我不得不使用jQuery获得VAL，剥离从字符串，重新类型号码“PX”，并然后 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。你必须以不同的方式获得事件目标obj：

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

Answer 2

你得到它关闭我的网站。我认为它在原始状态下可以工作 猜测这可能是因为你没有创建一个Raphael画布 也就是说，它启动的地方很挑剔 从绘制1个圆的基本页面开始，记下你放置的位置通用Raphael调用 initDrawing从哪里调用？ 它会工作Tom document.ready（）？ 借口拼写的iPod