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

你从我的网站上得到了它。我认为它在原始状态下适用于 Ie
猜测您可能没有创建拉斐尔画布
即对它的启动位置很挑剔
从绘制 1 个圆圈的基本页面开始，记下放置通用 Raphael 调用的位置
initDrawing 是从哪里调用的？
汤姆 document.ready() 会起作用吗？
请原谅拼写 ipod

Answer 2

解决方案：

好的，Chasbeen 正确地指出了 init 的维度。 Raphael() 对象的 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”，重新输入为 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 的新 init 看起来像这样：

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

我假设之前创建的 masterBackground 的宽度和高度均为 0，这就是为什么没有检测到 mousemove 的原因。

此外，我试图确定绘图框的索引，以防给定页面中有多个绘图框。我试图使用

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

This will not work with IE8 来获取它。您必须以不同的方式获取事件目标 obj：

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