啰嗦几句
前端视觉呈现立体感，并不是学的高数立体几何公式那样，开始我也一直以为立体几何就能画出，立体图，其实也没错。但是呢，不转动就看不出效果，转动后的立体图在2维平面怎么体现的呢。这还要从web端的JS说起，哈哈，之前就想实现转动的球体，Jquery插件一般都有，别人写的，曾经研究过，和想的不一样，没看懂，因为有一个 特别大的z轴值。这两天从知乎看到有人解说了一下，差点没看明白，琢磨了一下，想通了这里记录下来和你们分享。
参考了：https://zhuanlan.zhihu.com/p/366646473。
立体图投影到2D平面
将人的视点移到z轴上，不为别的为了好计算，毕竟坐标轴可以移动。当然也可以不变换，不过这里不做介绍。
不好直接计算P点的值，通过在x,y轴的映射点P1’和P2’来计算。
示例计算映射点P的y坐标值，
具体公式如下：
同理可得：
最后映射在二维平面的坐标为：
根据同样的计算方式，我们把V点挪出Z轴，有：
JS实现举例
<html>
<body>
<div id="demo" ><canvas width="500" height="500" ></canvas></div>
<script>
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
var vz=500; //移动深远视野
var vy=0 //移动上下视野
var vx=0 //移动左右视野
clock=function(x,y,z,Vx,Vy){
return {"x":~~((x-Vx)*vz/(vz-z)+Vx),"y":~~( (y-Vy)*vz/(vz-z)+Vy)}
};
var va={"a":clock(10,10,100,vx,vy),"b":clock(150,10,100,vx,vy),"c":clock(150,60,100,vx,vy),"d":clock(10,60,110,vx,vy),"e":clock(25,5,-10,vx,vy)};
ctx.lineWidth=2;
ctx.beginPath();
ctx.moveTo(va.a.x,va.a.y);
ctx.lineTo(va.b.x,va.b.y);
ctx.lineTo(va.c.x,va.c.y);
ctx.lineTo(va.d.x,va.d.y);
ctx.lineTo(va.e.x,va.e.y);
ctx.lineTo(va.a.x,va.a.y);
ctx.moveTo(va.e.x,va.e.y);
ctx.lineTo(va.c.x,va.c.y);
ctx.stroke();
console.log(va);
</script>
</body>
</html>
99
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
