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