0
イメージをドラッグ＆ドロップできますが、ボタンを押しても回転させることができるプログラムを作成しようとしています（ドラッグして独自の軸で回転させた後）。私は正常に画像のドラッグアンドドロップを行うことはできますが、回転が正しく機能するようにすることはできません。私は解決策は、 "変換"、 "翻訳"を使用してイメージを最初に配置することだと思います。 "d3.event"の代わりにドラッグすると、私はこれを行う方法がわかりません。私はd3ライブラリとSVGを使用しています。私は、後でコードを追加するのと同じように、ドラッグスタート、ドラッグ、ドラッグを別々にしておきたい。私はそれを修正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>