计算TranslateTransform后的最大可用区域

Question

假设我想在窗体中绘制一个角度矩形。

我可以用

做到这一点

    private void Form1_Paint(object sender, PaintEventArgs e)
    {
        e.Graphics.RotateTransform(20);
        e.Graphics.DrawRectangle(Pens.Black, 0, 0, e.ClipRectangle.Width, e.ClipRectangle.Height);
    }

但这只会旋转矩形，因此缺少左下角。

但我真正想要实现的是，我想在我的形式中以一定角度绘制最大可能的矩形，如下所示

最好的方法是什么？

Answer 1

我做了一些草图来解决这个问题。问题更多的是数学而不是编程，但这是我的想法。我在油漆区做过，但试着效仿：

旋转矩形时，需要为其计算newWidth和newHeight。创建一个包含这些尺寸的新矩形，并将其放在左上角，就像当前的矩形一样。 alpha α代表您想要旋转的度数。旋转后，您需要将此新矩形移动到右侧，即X的量。然后，您可以在绘图区域完美地定位最大的矩形。

以下是代码的一些想法。我还没有测试过它：

private void Form1_Paint(object sender, PaintEventArgs e)
    {
        double angle = 20;

        double width = Convert.ToDouble(e.ClipRectangle.Width),
               height = Convert.ToDouble(e.ClipRectangle.Height),
               h = Math.Sqrt((width*width) + (height*height)),
               y = (width/h);

        int newHeight = Convert.ToInt32(height*y),
            newWidth = Convert.ToInt32(width*y),
            x = Convert.ToInt32((Math.Sin(angle) * height);

        e.Graphics.RotateTransform(angle);
        e.Graphics.DrawRectangle(Pens.Black, x, 0, newWidth, newHeight);
    }

Answer 2

我们可以找到角度θ的矩形，它接触所有四个边。如果我们让W，H是我们窗口的宽度和高度，那就是预先知道的弧度角。现在让a，b为我们试图在框中拟合的矩形的宽度和高度，这些是我们希望找到的两个值。令x0，y0为窗口中心点的坐标x0 = W / 2，y0 = H / 2。矩形的一个角落是

x1 = x0 - 0.5 * a * sin(th) + 0.5 * b * cos(th)
y1 = y0 + 0.5 * a * cos(th) + 0.5 * b * sin(th)

另一点与不同的标志相似。一点三角学就会证明这一点。

让矩形触及我们想要的边

a * sin(th) + b cos(th) = W
a * cos(th) + b sin(th) = H

这给了我们一对我们可以解决的联立方程。将第一个乘以sin（th），将第二个乘以cos（th）

a * sin(th) sin(th) + b cos(th) sin(th) = W sin(th)
a * cos(th) cos(th) + b sin(th) cos(th) = H cos(th)

减法

a ( sin(th) sin(th) - cos(th) cos(th) ) = W sin(th) - H cos(th)

除以（sin（th）sin（th） - cos（th）cos（th））给出

a = (W sin(th) - H cos(th)) / ( sin(th) sin(th) - cos(th) cos(th) )

类似的过程给出了

b = (H sin(th) - W cos(th)) / ( sin(th) sin(th) - cos(th) cos(th) )

一旦我们得到a和b，我们就可以计算出矩形的角落并绘制它。

我已将代码放在jsfiddle http://jsfiddle.net/SalixAlba/5jcT7/代码

中

// canvas and mousedown related variables
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
// save canvas size to vars b/ they're used often
var W = canvas.width;
var H = canvas.height;

 var spinner = $( "#startAng" ).spinner({ 
  spin: function( event, ui ) {
    if ( ui.value > 180 ) {
      $( this ).spinner( "value", ui.value - 360 );
        draw();
      return false;
    } else if ( ui.value < -180 ) {
      $( this ).spinner( "value", ui.value + 360 );
        draw();
      return false;
    }
    draw();
  }
});


var angle = 10.0;

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
angle = $("#startAng").spinner("value");
var th = Math.PI*angle/180.0;
var S = Math.sin(th);
var C = Math.cos(th);
var S2 = S*S - C*C;
var a = (W*S-H*C)/S2;
var b = (H*S-W*C)/S2;
var x0 = W/2;
var y0 = H/2;
//alert("angle "+angle+"S "+S+" "+C+" "+a+" "+b);
var x1 = x0 - 0.5 * a * Math.sin(th) + 0.5 * b * Math.cos(th);
var y1 = y0 + 0.5 * a * Math.cos(th) + 0.5 * b * Math.sin(th);

var x2 = x0 - 0.5 * a * Math.sin(th) - 0.5 * b * Math.cos(th);
var y2 = y0 + 0.5 * a * Math.cos(th) - 0.5 * b * Math.sin(th);

var x3 = x0 + 0.5 * a * Math.sin(th) + 0.5 * b * Math.cos(th);
var y3 = y0 - 0.5 * a * Math.cos(th) + 0.5 * b * Math.sin(th);

var x4 = x0 + 0.5 * a * Math.sin(th) - 0.5 * b * Math.cos(th);
var y4 = y0 - 0.5 * a * Math.cos(th) - 0.5 * b * Math.sin(th);

ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x4,y4);
ctx.lineTo(x3,y3);
ctx.lineTo(x1,y1);
ctx.closePath();
ctx.stroke();
}

$( ".ui-spinner-input" ).on( "spinchange", draw );
$( ".ui-spinner-input" ).on( "spinstop", draw );
$( "#baseRad" ).on( "spin", draw );

draw();

请注意，这并不一定会给出最大的矩形，因为可能有较大的矩形触及两侧，也可能有一些限制。