Question

注意：下面的小提琴/代码按照Raphael 1.5.2的要求工作，但在Raphael 2.1.0中失败。

我想在Raphael 2 中创建一条线，该线由矩形上的mousedown事件启动，并在纸上任何位置的鼠标上终止。下面的小提琴适用于Raphael 1.5.2（在Chrome中）。

function Line(endX, endY, thisPaper) {    
    var end = { x: endX, y: endY };    
    var getPath = function() { return "M 15 15 L" + end.x + " " + end.y; };    
    var thisLine = thisPaper.path(getPath());    
    var redraw = function() { thisLine.attr("path", getPath()); }

    return { updateEnd: function(x, y) { end.x = x; end.y = y; redraw(); } };
};

var paper = Raphael("my-canvas",0, 0, 300, 400);
var origin = paper.rect(10, 10, 10, 10).attr({fill: "white"});

origin.mousedown(function(e) {
    line = Line(e.offsetX, e.offsetY, paper);
    $("#my-canvas").bind('mousemove', function(e) {line.updateEnd(e.offsetX, e.offsetY);    
});
});

$("#my-canvas").mouseup(function(e) { $("#my-canvas").unbind('mousemove'); });

运行Raphael 2.1.0时，JavaScript控制台中会生成以下错误：

body.scrollTop在严格模式下已弃用。如果处于严格模式，请使用'documentElement.scrollTop';如果处于怪癖模式，请使用'body.scrollTop'。
body.scrollLeft在严格模式下已弃用。如果处于严格模式，请使用'documentElement.scrollLeft';如果处于怪癖模式，请使用'body.scrollLeft'。

在Raphael 2.1.0中需要进行哪些修改才能在1.5.2中进行修改？请注意，您可以在JSFiddle中轻松切换这两个版本。

Answer 1

我不认为问题出在拉斐尔2.1上。

我使用dev-tools检查器查看实际输出的html

经过进一步检查，您的svg似乎在一个地方且<div id="my-canvas"><div>为空

我通过使用纸质对象引用画布来修复它，而不是使用jQuery重新选择，jQuery选择了仍为空的div标签。

var paper = Raphael("my-canvas",0, 0, 300, 400);
var origin = paper.rect(10, 10, 10, 10).attr({fill: "white"});
origin.mousedown(function(e) {
    line = Line(e.offsetX, e.offsetY, paper);
    $(paper.canvas).mousemove( function(e) {line.updateEnd(e.offsetX, e.offsetY);});
});

$(paper.canvas).mouseup(function(e) {$(paper.canvas).unbind('mousemove'); });

请参阅JSFiddle

现在我的解决方案除了这个有些奇怪的行为，你会期望画布在div标签内。

行为本身类似于另一种拉斐尔行为，这就是当您创建没有div的纸质对象时发生的情况（参见JSFiddle）。

var paper = Raphael(0, 0, 300, 400);

我还注意到了另外一件事，现在高度恰好在400px处绘制，而在相反之前。 400宽300高

所以也许在Rapahel 2.1中他们改变了构造函数。

我访问文档并确定enough

这就是你现在用div创建论文的方式

// Each of the following examples create a canvas
// that is 320px wide by 200px high.
// Canvas is created at the viewport’s 10,50 coordinate.
var paper = Raphael(10, 50, 320, 200);
// Canvas is created at the top left corner of the #notepad element
// (or its top right corner in dir="rtl" elements)
var paper = Raphael(document.getElementById("notepad"), 320, 200);
// Same as above
var paper = Raphael("notepad", 320, 200);

因此，如果你想在div上创建一个画布，你现在只需要包括宽度和高度（参见fiddle）。

我保留了对paper.canvas的引用，而不是重新选择div，因为它效率更高，并确保以任何一种方式工作。

我希望这能完全回答你的问题，有一个阳光灿烂的日子。

拉斐尔2 - 在Mousedown上画线

1 个答案: