d3 SVG拖放加旋转按钮

我正在尝试创建一个程序，可以拖放图像，也可以在按下按钮（拖动并旋转自己的轴后）时进行旋转。我可以成功拖放图像，但无法正确旋转。我认为解决方案将是在开始时使用“变换”，“翻译”来定位图像;和拖动而不是“d3.event”，但我不确定如何做到这一点。我正在用d3库使用SVG。我希望将我的：dragstarted，dragged和dragended分开，以后再添加更多代码。d3 SVG拖放加旋转按钮

var svgWidth = parseInt(document.getElementById("canvas").getAttribute("width")), 
 
    selected = null; 
 
    canvas = d3.select('#canvas'); 
 

 
    canvas.append("image") 
 
      .attr('width', 17) 
 
      .attr('height', 59) 
 
      .attr("x", svgWidth - 40) 
 
      .attr("y", 100) 
 
      .attr("xlink:href", "https://lorempixel.com/100/100/cats") 
 
      .call(d3.drag() 
 
        .on("start", dragstarted) 
 
        .on("drag", dragged) 
 
        .on("end", dragended)); 
 

 

 
    canvas.append("image") 
 
      .attr('width', 80) 
 
      .attr('height', 38) 
 
      .attr("x", svgWidth - 90) 
 
      .attr("y", 200) 
 
      .attr("xlink:href", "https://lorempixel.com/100/100/sports") 
 
      .call(d3.drag() 
 
        .on("start", dragstarted) 
 
        .on("drag", dragged) 
 
        .on("end", dragended)); 
 

 
    function dragstarted(d){ 
 
     d3.select(this).raise().classed("active", true); 
 
    } 
 

 
    function dragged(d){ 
 
     d3.select(this) 
 
       .attr("x", d3.event.x - parseInt(d3.select('image').attr("width"))/2) 
 
       .attr("y", d3.event.y - parseInt(d3.select('image').attr("height"))/2); 
 
    } 
 

 
    function dragended(d){ 
 
     d3.select(this).classed("active", false); 
 
     selected = this; 
 
    } 
 

 
    window.onload=function(){ 
 
     document.getElementById("rotate").addEventListener("click", function(){ 
 
      if(selected != null){ 
 
       var x = selected.getAttribute("x"), 
 
         y = selected.getAttribute("y"); 
 
       selected.setAttribute("transform","translate(" + x/2 + "," + y/2 +")" + "rotate(90)"); 
 
      } 
 
     }); 
 
    }

<!doctype html> 
 
    <html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>test</title> 
 
     <link rel="stylesheet" href="styles/style.css"> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"> 
 
     </script> 
 
    </head> 
 
    <body> 
 
    <svg id="canvas" width="960px" height="500px"></svg> 
 
    <button id="rotate">Rotate</button> 
 
</body> 
 
</html>

来源

2017-06-12 Dalek

没关系我固定它。没有意识到x和y值不必在图像上设置为使用d3.event.x和d3.event.y。这意味着当图像被拖拽时，我可以在变换上使用这些值。

来源

2017-06-12 23:35:45 Dalek

d3 SVG拖放加旋转按钮

回答

相关问题