从中心抓取元素

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）。