Question

从此处获取此代码http://www.irunmywebsite.com/raphael/drawtool2.php。当我在那个网站上测试它时在IE中运行得很好...我为了改变光标样式和笔触颜色等做了几个mod ...但我的版本在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;
        }

MY VERSION：

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

你把它从我的网站上删除了。我认为它适用于它的原始状态猜猜可能是你没有创建拉斐尔画布也就是说它在哪里发起了挑剔从绘制1个圆圈的基本页面开始，记下您放置普通Raphael调用的位置 initDrawing从哪里调用？ Tom document.ready（）会有效吗？借口拼写ipod

Answer 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的新init如下所示：

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

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

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

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

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

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

天才我：打破了IE8的raphael.js抽奖 - ＆gt;我怎么办？

2 个答案: