1
ここには元々this postから変更されたコードがあります。n-resizeの表示を正しくするにはどうしたらいいですか？
右中央、下中央、右下のコントロールポイントで矩形のサイズを変更すると、サイズ変更作業を行うために変換座標を変更する必要がないため、問題はありません。あなたが見ることができるように今私の問題は、私の四角形の上の中間（私の四角形の左の中央、左下と同じ...）で私のサイズを変更すると、回転角度が0と異なる場合は視覚的に私はサイズを変更します。
私は本当にそれを変更する方法を知らないので、どんな助けも高く評価されています。
注：入力フィールドの角度を0に変更すると、コードが正しく動作することがわかります。JSFiddle linkです。
var input = document.getElementById("rotate_input");
var rotate = document.getElementById("rotate");
var rightMiddle = document.getElementById("rm");
var topMiddle = document.getElementById("tm");
var translate = document.getElementById("trslt");
var scale = document.getElementById("scale");
var svg = document.getElementById("main");
var rotateString = rotate.getAttribute('transform');
var controlrm = false;
var controltm = false;
var origRectWidth = 100;
var origRectHeight = 100;
var updatedRectWidth = origRectWidth;
var updatedRectHeight = origRectHeight;
var xScale = 1;
var yScale = 1;
var translateX = 100;
var translateY = 100;
var relevantMouseMoveDist = 0;
var rotateAnleDeg = 30;
var rectangleAngle = parseInt(rotateString.slice(rotateString.indexOf("(") + 1)) * Math.PI/180; // retrieve the angle from the DOM
var newMousePosn;
var oldMousePosn;
function resizeRightMiddle()
{
updatedRectWidth += relevantMouseMoveDistCos;
xScale = updatedRectWidth/origRectWidth;
scale.setAttribute('transform', 'scale(' + xScale + ',' + yScale + ')');
}
function resizeTopMiddle()
{
updatedRectHeight -= relevantMouseMoveDistSin;
yScale = updatedRectHeight/origRectHeight;
//get the new Y position
translateY = translateY + relevantMouseMoveDistSin;
scale.setAttribute('transform', 'scale(' + xScale + ',' + yScale + ')');
translate.setAttribute('transform', 'translate(' + translateX + ',' + translateY + ')');
}
svg.addEventListener("mousemove", function(e){
if (newMousePosn) {
// the former mouse pos'n
oldMousePosn = {x: newMousePosn.x, y: newMousePosn.y};
// the new mouse pos'n
newMousePosn = {x: e.clientX, y: e.clientY};
// the change in the mouse pos'n coordinates since the last move event
var deltaMouseMove = {
x: newMousePosn.x - oldMousePosn.x,
y: newMousePosn.y - oldMousePosn.y
};
// the dir'n of this movement
var angleOfMouseMovement = Math.atan2(deltaMouseMove.y, deltaMouseMove.x);
// the absolute distance the mouse has moved
var mouseMoveDist = Math.sqrt(
deltaMouseMove.x * deltaMouseMove.x +
deltaMouseMove.y * deltaMouseMove.y
);
// the difference in direction between the mouse movement and orientation of the rectangle
var angleDifference = angleOfMouseMovement - rectangleAngle;
// the portion of the mouse movement that is in the direction of the rectangle's orientation
relevantMouseMoveDistCos = mouseMoveDist * Math.cos(angleDifference);
relevantMouseMoveDistSin = mouseMoveDist * Math.sin(angleDifference);
// resize the rectangle if necessary
if (controlrm)
resizeRightMiddle();
else if (controltm)
resizeTopMiddle();
} else {
// establish the mouse pos'n during the first mousemove event
newMousePosn = {x: e.clientX, y: e.clientY};
}
});
svg.addEventListener("mouseup" , function(e){
controlrm = false;
controltm = false;});
rightMiddle.addEventListener("mousedown", function(e){controlrm = true ;});
topMiddle.addEventListener("mousedown", function(e){controltm = true ;});
// Code for changing the rectangle in the input
input.addEventListener("change", function(){
rotateAngleDeg = input.value;
rotate.setAttribute("transform", "rotate(" + rotateAngleDeg + ")");
rectangleAngle = rotateAngleDeg * Math.PI/180;
})svg {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}<svg id="main" width="1000" height="250">
<g id= "trslt" transform="translate(100, 100)">
<g id="rotate" transform-origin="center" transform="rotate(30)">
<g id="scale">
<path fill="red" stroke="red" d="M 0 0 L 0 100 L 100 100 L 100 0Z" />
<rect id="rm" fill="black" stroke="black" x=95 y=45 width=10 height=10 />
<rect id="tm" fill="white" stroke="black" x=45 y=-5 width=10 height=10 />
</g>
</g>
</g>
</svg>
<input id="rotate_input" type="text" placeholder="Change Angle"/>
答えをありがとうが、私は回転と反転を反転させることなく解決策を見つけました。 – JSmith
作業には数時間かかりましたので、必要がなくても私の答えを受け入れていただき、ありがとうございます。あなたが最後に結果を得てうれしい –
問題はない、私は私の質問のすべての制約に言及していない。オブジェクトをドラッグしたときに回転を反転して平行移動すると、すべての座標が回転するので、それは別の問題です。しかし、あなたの時間のために多くのありがとう。 – JSmith