Raphael 2 - 在鼠标按下时画线

Question

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

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

http://jsfiddle.net/sKVHk/

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

我不认为问题出在 Raphael 2.1 per say

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

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

我通过使用纸对象引用画布而不是使用 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 标签内。

该行为本身类似于另一个 Raphael 行为，当您创建没有像这样的 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，只是因为它更有效并且肯定能以任何一种方式工作。

我希望这完全回答了你的问题，祝你有个晴天。