javascript - Raphael 2 - 鼠标按下时画线

Question

注意:下面的 fiddle /代码可以按照 Raphael 1.5.2 的要求工作，但在 Raphael 2.1.0 中失败。

我想在 Raphael 2 中创建一条线，该线由矩形上的 mousedown 事件启动，并在纸张上任何位置的 mouseup 事件上终止。下面的 fiddle 适用于 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 的说法

我使用开发工具检查器来查看实际输出的 html

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

我通过使用纸张对象引用 Canvas 来修复它，而不是使用 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

现在，除了我的修复之外，这是有点奇怪的行为，您会期望 Canvas 位于 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 上创建 Canvas ，您现在只需包含宽度和高度(请参阅 fiddle )。

我保留了 paper.canvas 的引用，而不是重新选择 div，因为它更高效并且肯定可以以任何方式工作。

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