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进行抽象

我有fig.a，我想旋转它们，如图所示。图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

有不同的方法。将每件事物视为单独的物体，甚至是背景。我们的想法是在坐标系上进行转换。这是一个canvas实现。 [运行]

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>

用保持偏移的平面旋转正方形

1 个答案: