當DOM元素居中時修復Raphael.js中的畫布偏移量

我使用點擊操作在Raphael.js畫布中創建圓圈。當畫布在網站的原點繪製時，它工作正常。 但是，當我將它移動到中間時，會發生某種類型的脫銷，並且只有當您單擊畫布的右側時，纔會在畫布左側繪製圓圈。即使我有我的監聽行動，畫布，而不是DIV的就是追加到，這裏是代碼：當DOM元素居中時修復Raphael.js中的畫布偏移量

<body> 
<div id="container"></div> 
</body>

這裏是JS：

var canvas = Raphael("container", 500, 500); 
var ourCanvas = $('svg').last(); 
ourCanvas.attr("id", "canvas"); 
var canvasHandler = $("#canvas"); 
//We create a div with a class to append our canvas 
var containerHandler = $("#container"); 
var circleClass = $("circle.quincy"); 
var justDragged = false; 
canvasHandler.mouseup(function (e) { 
var mouseX = e.pageX; 
var mouseY = e.pageY; 
makeCircle(mouseX, mouseY); 
}); 



function makeCircle(mouseX, mouseY) { 
var radius; 
var fill; 
var thisCirclesID = String(new Date().getTime()); 
var circle = canvas.circle(mouseX, mouseY, 50).attr({ 
    fill: "hsb(.8, 1, 1)", 
    stroke: "none", 
    opacity: .5, 
}); 
}

這裏是一個JSFiddle

我不知道我使用事件位置的方式是否正確。任何建議都是值得歡迎的。

感謝

中號

來源

2014-04-14 mauricioSanchez

似乎沒有爲我做任何事情，我只是得到一個灰色的盒子，沒有圈子。 – Ian

如果點擊靠近左側的邊緣，則會看到部分出現在另一側的圓圈。我使用offsetParent方法修復了這個問題。這裏是舊的http://jsfiddle.net/mauricioSanchez/n2N3e/，這裏是一個新的http://jsfiddle.net/mauricioSanchez/Cys95/ – mauricioSanchez

我想通了實現這一偏移SVG的新位置是造成鼠標事件，不承認它的實際位置之後。我發現這個博客post顯示瞭如何使用offsetParent方法來計算我的畫布相對於其父項的新位置。下面是代碼：

$(document).ready(function() { 
//We create our canvas and add an ID 
var canvas = Raphael("container", 500, 500); 
var ourCanvas = $('svg').last(); 
ourCanvas.attr("id", "canvas"); 
var canvasHandler = $("#canvas"); 
//We create a div with a class to append our canvas 
var containerHandler = $("#container"); 
var circleClass = $("circle.quincy"); 
var justDragged = false; 
canvasHandler.mouseup(function (e) { 
    var mouseX = e.pageX - findPos(this)[0]; 
    var mouseY = e.pageY - findPos(this)[1]; 
    makeCircle(mouseX, mouseY); 
    findPos(this); 
    console.log("This is the position of the mouse in X: " + e.pageX); 
    console.log("This is the position of the mouse in Y: " + e.pageY); 
}); 

function findPos(obj) { 
    var curleft = curtop = 0; 
    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj == obj.offsetParent); 
     console.log(curleft); 
     console.log(curtop); 
     // return [curleft, curtop]; 
    } 
    return [curleft, curtop]; 
}

正如你可以看到findPos（obj）返回X和Y的新位置的數組所以我說。減去我的mouseX和mouseY的獲得對SVG的實際位置點擊時。

更新

多讀，並要求各地。我沒有意識到Web瀏覽器返回的是什麼類型的元素。而不是使用e.pageX和e.pageY。 offsetX提供鼠標相對於給出真實座標的父項的位置。所以代碼將如下所示：

canvasHandler.mouseup(function (e) { 
var mouseX = e.offsetX; 
var mouseY = e.offsetY; 
makeCircle(mouseX, mouseY); 
findPos(this);

}）;

這使得它更容易，因爲偏移考慮了鼠標相對於元素的實際位置。

來源

2014-04-14 12:45:36 mauricioSanchez

當DOM元素居中時修復Raphael.js中的畫布偏移量

回答

相關問題