基于旋转的中心对象

Question

我需要根据对象的旋转将对象置于 canvas 的中心。我不会算数学。

我有什么信息？

左上角的x、y坐标（见图片红圈）
对象的宽度和高度
以度为单位的旋转值

到目前为止我尝试了什么？

// center horizontally 
if (curretElement === null) return;
curretElement.x((canvas.width() / 2) - ((curretElement.width() * curretElement.scaleX()) / 2));
canvas.draw();

// center vertically
curretElement.y((canvas.height() / 2) - ((curretElement.height() * curretElement.scaleY()) / 2));
canvas.draw();

这会使图像在未旋转时居中。

currentElement是选中的对象。

canvas 是物体应该居中的房间。

Answer 1

UPDATE：第一次尝试真的很糟糕，所以我更新了代码。这实际上工作并保持你的左角在容器的中心，只是 填充角度输入

我想发表评论并提出更多问题，但我不能，这件事（赏金）很诱人

不依赖于 java 脚本。可能是您需要的第二次尝试。

角是之前的容器和内容。旋转但它仍然存在。有帮助吗？点赞吧

    <!DOCTYPE html>
    <html lang="en">
    <body>
        <style>
        body{
          margin:0;
        }
        #container{
          display :flex;
          position: absolute;
          width:100%;
          height:100%;
        }
        #ram{
          display:flex;
          background-color:black;
          position:absolute;
          margin:auto;
          top:50%;
          right:50%;
        }
        #ram::before{
          content: "";
          position:absolute;
          height:40px;
          width:400px;
          background-color: #000;
        }
        </style>
        <input type="number" id="a" onchange = "forf()">
        <div id = "container">
        <div id = "ram">
        </div>
        </div>
        <script>
        function forf(){
          var a = document.getElementById("a").value;
        document.getElementById("ram").style.transform = "rotate(" + a + "deg)";
        }
        </script>
    </body>
    </html>

Answer 2

您可以这样计算坐标：

假设您的对象以 canvas
计算左上角相对于中心的坐标canvas
围绕 canvas 的中心旋转对象并计算左上角相对于 canvas
将左上角的相对坐标转换回绝对坐标

这是一个计算函数：

function calculateXY(canvasWidth, canvasHeight, width, height, angle) {
    //calculate where the top left corner of the object would be relative to center of the canvas
    //if the object had no rotation and was centered
    const x = -width / 2;
    const y = -height / 2;

    //rotate relative x and y coordinates by angle degrees
    const sinA = Math.sin(angle * Math.PI / 180);
    const cosA = Math.cos(angle * Math.PI / 180);
    const xRotated = x * cosA - y * sinA;
    const yRotated = x * sinA + y * cosA;

    //translate relative coordinates back to absolute
    const canvasCenterX = canvasWidth / 2;
    const canvasCenterY = canvasHeight / 2;
    const finalX = xRotated + canvasCenterX;
    const finalY = yRotated + canvasCenterY;

    return { x: finalX, y: finalY };
}

基于旋转的中心对象

Center Object based on rotation

javascript

math

geometry

canvas