d3 SVG拖放以及按钮旋转
[英]d3 SVG drag drop plus rotate with button
问题描述
我正在尝试创建一个程序，在该程序中可以拖放图像，但也可以通过按一下按钮来旋转图像（拖动后在其自身的轴上旋转）。 我可以成功地拖放图像，但无法使旋转正常工作。 我认为解决方案是在开始时使用“ transform”，“ translate”将图片定位； 对于拖动而不是“ d3.event”，但是我不确定如何执行此操作。 我正在将SVG与d3库一起使用。 我希望保持我的拖动开始，拖动和拖动结束分开，稍后将添加更多代码。
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>
1 个解决方案
解决方案1
0 2017-06-12 23:35:45
没关系，我已修复它。 没有意识到不必使用d3.event.x和d3.event.y在图像上设置x和y值。 这意味着当拖动图像时，可以在转换中使用这些值。
在拖动D3期间旋转矩形
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.