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.