オフセットを保持する平面で正方形を回転する

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; 

を実行しようとしましたものです。数学は正しいのですか、何か不足していますか？

私はJavaScriptを使用しますが、JS

の抽象化をしてください、私は図Aを持っていると私はそれが図に現れてされたとしても回転したいです。 2.図3は、ユーザーが、私はこれまで様々なアプローチがあります

#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>