從中心抓取元素

Question

我想知道我在做什麼錯了下面的代碼。

SVG已經被放大和翻譯，元素垂直拖拽很好，但是，它是瘋狂的。

https://jsbin.com/gahoseneyu/edit?js,output

const svg = document.getElementsByTagName("svg")[ 0 ]; 
const w = svg.getAttribute("width"); 
const h = svg.getAttribute("height"); 
const cry = document.getElementById("cry"); 
const reg = /\d*\.\d[^\s]/g; 
const viewBox = svg.getAttribute("viewBox").match(reg); 
const wRatio = w/viewBox[ 2 ]; 
const hRatio = h/viewBox[ 3 ]; 
console.log("viewbox is...", viewBox, wRatio, hRatio); 
cry.addEventListener("mousedown", function(){ 
    this.addEventListener("mousemove", function(e){ 
     let newX = (e.pageX/wRatio) + parseFloat(viewBox[ 0 ]) - 22, 
      newY = (e.pageY/hRatio) + parseFloat(viewBox[ 1 ]) - 22; 
     this.setAttribute("transform", `translate(${ newX },${ newY })`); 
    }); 
}); 

Answer 1

的問題是，視框不一樣的視口，這是實際使用。例如，您的視框始於191個單位一起，但你可以看到你哭泣元件，它具有X，如果你添加一個矩形，查看視窗的0它幫助協調：

<rect x="191.37" y="15.73" width="212.59" height="393.23"/>

你可以使用preserveAspectRatio保持寬高比取決於你想做什麼（本教程應該有所幫助：http://tutorials.jenkov.com/svg/svg-viewport-view-box.html）

或者，你可以計算真實的視框是什麼：

const svg = document.getElementsByTagName("svg")[ 0 ]; 
const cry = document.getElementById("cry"); 
const h = svg.clientHeight; 
const w = svg.clientWidth; 

const viewBoxW = svg.viewBox.baseVal.width; 
const viewBoxH = svg.viewBox.baseVal.height; 
let wRatio = w/viewBoxW; 
let hRatio = h/svg.viewBoxH; 
let viewBoxX = svg.viewBox.baseVal.x; 
let viewBoxY = svg.viewBox.baseVal.y; 

if (wRatio > hRatio) { 
    wRatio = hRatio; 
    viewBoxX = w/2/wRatio - (viewBoxX + viewBoxW/2); 
} else { 
    hRatio = wRatio; 
    viewBoxY = h/2/hRatio - (viewBoxY + viewBoxH/2); 
} 


svg.addEventListener("mousedown", function(){ 
    this.addEventListener("mousemove", function(e){ 

     let newX = e.pageX/wRatio - viewBoxX - 22, 
      newY = e.pageY/hRatio + viewBoxY - 22; 

     cry.setAttribute("transform", `translate(${ newX },${ newY })`); 
    }); 
}); 

請注意，您應該將變換添加到cry元素。另外，當你第一次點擊這個元素時，比如說在它的角落，它會跳轉，所以鼠標在中心。爲了避免這種情況，您需要計算點擊與對象中心之間的原始偏移量，並使用此值代替（-22，-22）。