天才我：打破了 raphael.js 为 IE8 绘制的图 --> 我做了什么？答案

【问题标题】：Genius me: broke raphael.js draw for IE8 --> What'd I do?天才我：打破了 raphael.js 为 IE8 绘制的图 --> 我做了什么？
【发布时间】：2011-10-06 08:57:01
【问题描述】：

从这里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;
});

【问题讨论】：

对于初学者有什么错误吗？您是否尝试过逐个注释掉您的模组以确定哪个有问题？
jsThemeDir 未定义。
感谢您的收看！！ jsThemeDir 在主题标题中定义。没有错误。
好的，你有什么错误吗？
完全没有错误。关于脚本加载没有错误，当我尝试在绘图区域上拖动时没有错误......只是没有绘制......

标签： jquery internet-explorer internet-explorer-8 svg raphael

【解决方案1】：

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

【讨论】：

不明白你说的不创建拉斐尔画布是什么意思。这不正确吗？：var g_masterPaper = Raphael(element, jQuery( element ).css('width') , jQuery( element).css('height') );
所有这些脚本都被加载到页脚中，所以我不确定 document.ready() 是否属于...？
paper = Raphael(canvas_div, 500, 300); paper.canvas.style.position = "绝对"; paper.canvas.style.zIndex = "1";
抱歉忽略以上内容。您正在等待浏览器充分准备好查看 raphael javascript。 IE 需要更长的时间，有时 Raphael 声明无效。
我有一种预感，这与我尝试添加将笔划切换为“突出显示”并返回“笔”的功能有关......将继续挖掘......

【解决方案2】：

解决方案：

好的，Chasbeen 指出 init 的维度是正确的。 Raphael() 对象的初始化似乎在使用 jquery 从父级绘制宽度和高度时工作正常：

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

但是...当我对要检测 mousemove 的子矩形执行相同操作时，出现了问题：

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 的新初始化如下所示：

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

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

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

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

这不适用于 IE8。您必须以不同的方式获取事件目标 obj：

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

【讨论】：