오프셋을 유지하는 평면으로 사각형을 회전합니다.

Question

저는 같은 시간에 작은 사각형을 회전하려고합니다. 회전은 개별적입니다. 그래서 나는 둘 다 그룹으로 묶어서 동시에 회전시킬 수 없습니다.

나는 배경 평면의 회전 각을 가지고있다. 캔버스 컨텍스트를 사용하지 않고 그냥 수학을 사용하고 싶습니다. 여기

내가 CX/CY 피벗입니다

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; 

을하려고 노력하는 것이다. 수학이 정확합니까 아니면 뭔가 빠졌습니까?

나는 자바 스크립트를 사용하지만, JS

내가 fig.a을 가지고 내가 아니라 모두가 그림에 표시되어 회전 할의 추상화를 확인하시기 바랍니다. (2) (3)는 사용자가 I이 서로 다른 접근 방법이 있습니다

#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

작은 데모 을 만든 요청에 ​​내가 Fig a is what I have, fig 2 is what I need, and fig 3 is what I don't want

을 원하지 않는 내용의 예입니다. 모든 것을 개별적인 대상으로, 심지어 배경으로 생각하십시오. 아이디어는 좌표계에서 변형을 수행하는 것입니다. 여기, 캔버스 구현입니다. [실행]

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>