2

そのため、mouseonmove を使用してマウスの位置に移動できる SVG rect があります。

ちゃんと動きますが、回転させてみると動きはいいのですが、回転した角度に基づいて奇妙なオフセットが発生しています.cos/sinコードで何かが間違っていると思いますが、何が間違っているのかわかりません.

var container = document.getElementById("container"); 
var rect = document.getElementById("rect");
var grados = document.getElementById("grados");
var group = document.getElementById("group");
grados.addEventListener("change",rotate);
container.addEventListener("mousemove", move);

var angle = 0;
var radian = angle * Math.PI / 180;
var cos = Math.cos(radian);
var sin = Math.sin(radian);

function move(e){

    var x = ((e.offsetX * cos) + (e.offsetY * sin));
    var y = ((-e.offsetX * sin) + (e.offsetY * cos));
    rect.setAttribute('x',x);
    rect.setAttribute('y',y);
}

function rotate(e){
    console.log(e);
    group.style.transform='rotate('+e.target.value+'deg)';
    angle = e.target.value;
    radian = angle * Math.PI / 180;
    cos = Math.cos(radian);
    sin = Math.sin(radian);
     
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
ROTATE<input id="grados" type="number" value="1">
<svg id="container"style="width: 400px;height:400px;border:1px solid black;">

<svg>
<g id="group"style="transform:rotate(0deg);transform-origin:50% 50%;">
<rect id="rect"  x="20" y="5" width="50px" height="50px" style="fill:red;stroke-width:3;stroke:blue"></rect>
    </g>
 </svg>
</svg>
jsdfiddle へのリンク: https://jsfiddle.net/es179Lzn/1/

ありがとう

4

1 に答える 1

0

さて、数日間の作業の後、私はそれを手に入れました。私がやっていた方法は正しかったようですが、transform-origin: '50% 50%'プロパティで奇妙な動作が発生します.削除しただけで、すべてが機能しました. （いくつかのバグがありますが、質問の問題は解決されています）。

だから私は将来のために答えをここに残します。

于 2015-07-16T08:49:16.667 に答える