3

我正在尝试制作一个矩形的一半 - 对角线分开 - 以适合三角形。旋转效果很好，矩形的大小也是如此。但是一旦我试图歪曲它，一切都会变得一团糟。基本上我想模拟一个 3D 表面。

这意味着我必须找到 abc 的角度，其中 b 是中心点。然后将此角度作为倾斜应用于矩形。但由于某种原因，这不能按预期工作。

这是我想要完成的简单说明：

在此处输入图像描述

一旦你看一下小提琴，你可能会理解更多：http: //jsfiddle.net/p7g7Y/11/ 编辑：至少得到正确的宽度：http: //jsfiddle.net/p7g7Y/12/

您需要查看的代码在第 63 - 95 行。尝试注释掉变换，您会发现旋转和大小效果很好。

function triangle(a, b, c){

context.save();

//Draw the triangle
context.beginPath();
context.moveTo(a[0], a[1]);
context.lineTo(b[0], b[1]);
context.lineTo(c[0], c[1]);
context.lineTo(a[0], a[1]);
context.closePath();
context.stroke();

//Lets find the distance between a and b to set height of the image
var imgHeight = lineDistance(a, b);

//And the width b to c
var imgWidth = lineDistance(b, c);

//Now we gotta skew it acording to the rad between ba and bc
var skewAngle = find_angle(a,c,b); //Find angle and make it rad

//Find the angle of b to a line
var theta = Math.atan2(a[1] - b[1], a[0] - b[0]);
context.translate(a[0], a[1]); //Set origin of rotation
context.rotate(theta + 1.57079633); //Had to rotate it some more 1.57079633 = 90deg
context.transform(1, skewAngle, 0, 1, 0, 0);

context.rect( 0, 0, imgHeight, imgWidth);
context.stroke();

context.restore();
}

有什么不清楚的请追问！我很想在这方面有所帮助！

4

2 回答 2

1

如果你更一般地解决问题会更容易：find a, b, c, d,e等等f

  // (x0, y0) maps to (x_0, y_0)
  a*x0 + b*y0 + c = x_0
  d*x0 + e*y0 + f = y_0

  // (x1, y1) maps to (x_1, y_1)
  a*x1 + b*y1 + c = x_1
  d*x1 + e*y1 + f = y_1

  // (x2, y2) maps to (x_2, y_2)
  a*x2 + b*y2 + c = x_2
  d*x2 + e*y2 + f = y_2

这个 6x6 线性系统由两个独立的 3x3 线性系统组成：

  a*x0 + b*y0 + c = x_0
  a*x1 + b*y1 + c = x_1
  a*x2 + b*y2 + c = x_2

  d*x0 + e*y0 + f = y_0
  d*x1 + e*y1 + f = y_1
  d*x2 + e*y2 + f = y_2

解决它们会为您提供 6 个要传递的数字，以setTransform将任意三点映射到其他三点。

delta = x0*y1 + y0*x2 + x1*y2 - y1*x2 - y0*x1 - x0*y2

delta_a = x_0*y1 + y0*x_2 + x_1*y2 - y1*x_2 - y0*x_1 - x_0*y2
delta_b = x0*x_1 + x_0*x2 + x1*x_2 - x_1*x2 - x_0*x1 - x0*x_2
delta_c = x0*y1*x_2 + y0*x_1*x2 + x_0*x1*y2 - x_0*y1*x2 - y0*x1*x_2 - x0*x_1*y2

delta_d = y_0*y1 + y0*y_2 + y_1*y2 - y1*y_2 - y0*y_1 - y_0*y2
delta_e = x0*y_1 + y_0*x2 + x1*y_2 - y_1*x2 - y_0*x1 - x0*y_2
delta_f = x0*y1*y_2 + y0*y_1*x2 + y_0*x1*y2 - y_0*y1*x2 - y0*x1*y_2 - x0*y_1*y2

a = delta_a / delta
b = delta_b / delta
c = delta_c / delta
d = delta_d / delta
e = delta_e / delta
f = delta_f / delta

有关使用 2d 画布上下文的 3d 纹理映射的完整描述，请参阅这个更详细的答案。

于 2013-08-10T13:46:36.773 回答
1

以下是如何计算将矩形拟合到三角形所需的变换：

  • 平移到三角形的“枢轴点”——B 点。
  • 旋转 BC 边的角度。
  • 在 X 方向上倾斜角 B 的角度。

在此处输入图像描述

所以，首先翻译：

        // transform translate = pt2

        var translate = pt2;

然后旋转：

        // transform rotation = angleBC (based on slope of BC)

        var rotation = Math.atan2((pt3.y-pt2.y),(pt3.x-pt2.x));

最后skewX：

        // transform skewX, based on angleB 

        var skewX = Math.tan(angleB-Math.PI/2);

以下是获取 angleB 以在 skewX 中使用的方法：

        // calculate segment lengths

        var AB = Math.sqrt(Math.pow(pt2.x-pt1.x,2)+ Math.pow(pt2.y-pt1.y,2));    
        var BC = Math.sqrt(Math.pow(pt2.x-pt3.x,2)+ Math.pow(pt2.y-pt3.y,2)); 
        var AC = Math.sqrt(Math.pow(pt3.x-pt1.x,2)+ Math.pow(pt3.y-pt1.y,2));

        // calculate angleB using law of cosines

        var angleB = Math.acos((BC*BC+AB*AB-AC*AC)/(2*BC*AB));

您还需要绘制矩形的宽度和高度：

        // rectangle height = triangle altitude

        var rectHeight = AB * Math.sin(angleB);

        // rectangle width = triangle BC

        var rectWidth = BC;

一个小“陷阱”：

您的平移点是 B，但矩形是从左上角开始绘制的。

这意味着您必须将矩形垂直偏移 rectHeight：

        ctx.rect(0,  -rectHeight,  rectWidth,  rectHeight);

此外，并不是真正的“陷阱”，而是更多的自然限制：

角 B 处的角度必须小于 180。

所以，如果你的三角形“倒置”，你将不得不通过翻转点 A 和 C 来补偿。

你那里有有趣的项目！

完成后你会分享一点吗？

这是代码和小提琴：http: //jsfiddle.net/m1erickson/KKELu/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var pt1={x:100,y:100};
    var pt2={x:150,y:225};
    var pt3={x:250,y:150};


    drawTriangle();

    drawRectangle();


    function drawRectangle(){

        // calc transform info
        var info=analyzeTriangle();

        ctx.save();
        ctx.translate(info.translate.x,info.translate.y);
        ctx.rotate(info.rotation);
        ctx.transform(1,0,info.skewX,1,0,0);
        ctx.beginPath();
        // since rects origin is top left, must offset y by -height
        ctx.rect(0,-info.rectHeight,info.rectWidth,info.rectHeight);
        ctx.strokeStyle="purple";
        ctx.stroke();
        ctx.restore();
    }


    function drawTriangle(){
        ctx.beginPath();
        ctx.strokeStyle="blue";
        ctx.moveTo(pt1.x,pt1.y);
        ctx.lineTo(pt2.x,pt2.y);
        ctx.lineTo(pt3.x,pt3.y);
        ctx.closePath();
        ctx.stroke();
        ctx.fillStyle="rgba(255,255,0,0.10)";
        ctx.fill();
    }


    function analyzeTriangle(){

        // segment lengths
        var AB = Math.sqrt(Math.pow(pt2.x-pt1.x,2)+ Math.pow(pt2.y-pt1.y,2));    
        var BC = Math.sqrt(Math.pow(pt2.x-pt3.x,2)+ Math.pow(pt2.y-pt3.y,2)); 
        var AC = Math.sqrt(Math.pow(pt3.x-pt1.x,2)+ Math.pow(pt3.y-pt1.y,2));

        // angleB = using law of cosines
        var angleB = Math.acos((BC*BC+AB*AB-AC*AC)/(2*BC*AB));

        // transform translate = pt2
        var translate = pt2;

        // transform rotation = angleBC (based on slope of BC)
        var rotation = Math.atan2((pt3.y-pt2.y),(pt3.x-pt2.x));

        // transform skewX, based on angleB 
        var skewX = Math.tan(angleB-Math.PI/2);

        // rectangle height = triangle altitude
        var rectHeight = AB * Math.sin(angleB);

        // rectangle width = triangle BC
        var rectWidth = BC;

        return({
            translate:translate,
            rotation:rotation,
            skewX:skewX,
            rectHeight:rectHeight,
            rectWidth:rectWidth
        });

    }

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=350 height=350></canvas>
</body>
</html>
于 2013-08-12T17:32:46.363 回答