用保持偏移量的平面旋轉一個正方形

Question

我想在同一時間背景中旋轉一個小正方形。輪換是個人的。所以我不能將它們組合在一起並一次旋轉。

我有背景平面的旋轉角度。我不想使用畫布上下文，只是數學！

這裏是我試圖做

var radians = Math.abs((Math.PI/180) * angle); 
    var cos = Math.cos(radians); 
    var sin = Math.sin(radians); 
    var newPoint = new Object(); 

    newPoint.x = cos * (x-cx)-sin * (y-cy) + cx; 
    newPoint.y = sin * (x-cx)+cos * (y-cy) + cy; 

其中Cx/Cy爲支點。數學是正確的還是我錯過了什麼？

我使用的JavaScript，但請讓JS

我有圖A，我想旋轉兩個，因爲它是圖了的抽象。 2，圖3是什麼，我不想 Fig a is what I have, fig 2 is what I need, and fig 3 is what I don't want

在用戶請求我已經創建了一個小的演示

#plane { 
 
    width: 400px; 
 
    height: 600px; 
 
    background: rgba(255,0,0,.3); 
 
} 
 

 
.wrapper { 
 
position: relative; 
 

 
} 
 

 
#square { 
 

 
position: absolute; 
 
top: 60px; 
 
left: 20px; 
 
width: 40px; 
 
height: 40px; 
 
background: blue; 
 
}

<div class="wrapper"> 
 
<!-- plane it can be a pdf, video, canvas or anything and I get the rotation angle --> 
 
<div id="plane">Lorem ipsum text</div> 
 
<!-- based on the angle of the plane I need to rotate and position this --> 
 
<div id="square"></div> 
 
</div>

Answer 1

有不同的方法來這樣的一個例子。把每件事看作是單個物體，甚至是背景。這個想法是對座標系進行轉換。這裏是一個畫布實現。 [運行]

var box1 = { x : 100, y : 140, width : 100, height : 200, pivotX : 50, pivotY : 50, rotate : 20}, 
 
box2 = { x : 200, y : 150, width : 50, height : 150, pivotX : 10, pivotY : 100, rotate : 40} 
 

 
window.onload = function(){ 
 
    let canvas = document.querySelector('canvas'), 
 
     ctx = canvas.getContext('2d'), 
 
     width = canvas.height = window.innerHeight, 
 
     height = canvas.width = window.innerWidth; 
 
     
 
    render(ctx) 
 
} 
 

 
function render(ctx){ 
 
    draw(ctx, box1) 
 
    draw(ctx, box2) 
 
} 
 

 
function draw(ctx, box){ 
 
    ctx.save() 
 
    ctx.translate(box.x, box.y) // translate the coordinate system 
 
    ctx.rotate(box.rotate * Math.PI/180) // rotate the coordinate system 
 
    ctx.fillStyle = "#cccccc" 
 
    ctx.fillRect(-box.pivotX, -box.pivotY, box.width, box.height) 
 
    //draw pivot 
 
    ctx.fillStyle = "coral" 
 
    ctx.beginPath() 
 
    ctx.arc(0,0,4,0,Math.PI * 2) 
 
    ctx.fill() 
 
    ctx.restore() 
 
}

<canvas></canvas>