【图形处理】如何将一个平面图形按照角度往z轴扭曲【2】-根据左右上下四个边进行旋转

最新推荐文章于 2024-12-26 00:06:26 发布
最新推荐文章于 2024-12-26 00:06:26 发布
阅读量1.7k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Html5游戏开发 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cdnight/article/details/50687364
本文介绍了一种通过调整角度和选取旋转边来实现图像3D旋转的技术，并详细解释了如何根据底边、顶边、左边缘或右边缘进行旋转。包括计算投影后的高度和宽度，确定切片尺寸，以及如何使用JavaScript将图像切成多个部分并重新排列以展示不同视角。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

好了，这个跟上一个其实是一样的，就是坐标不一样。。虽然可以随便根据某一条边旋转，但是，我还是先做简单的吧。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>

  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta content="telephone=no,email=no" name="format-detection">
  <meta name="full-screen" content="true"/>
  <%--竖屏--%>
  <%--<meta name="screen-orientation" content="portrait"/>--%>
  <%--横屏--%>
  <%--<meta name="screen-orientation" content="landscape"/>--%>

  <meta name="x5-fullscreen" content="true"/>
  <meta name="360-fullscreen" content="true"/>



  <style>
    body{
      padding: 0;
      margin: 0;
    }
  </style>

</head>
<body>


<div class="">
  <img src="images/forestRoad.jpg" id="image" >
  <img src="" id="preview">
</div>
<script>
  var IMAGE=document.getElementById("image");
  var PREVIEW=document.getElementById("preview");
</script>
<script>

  //    ctx.drawImage(IMAGE);
  //--这是切片方式来生成图片。--up down left right ,请注意 angle的意思是，angle=0的时候是不需要切片生成图片的，因为angle=0表示从正上方看图片的角度。
  //angle=90的是后表示图片刚好垂直于眼神--即是说，这时候眼睛看到的是一条直线--尽量不要用到angle=90的情况。
  //--用angle以后就是计算三角形的坐标了。
  //--用哪一个边作为参考来旋转，默认为bottom，即，根据bottom旋转,top|bottom|left|right

  function transform3dImage(image,segNum,angle,side) {
    var _turn_side="bottom";
    if(side){
      _turn_side=side;
    }
    var tmpCanvas = document.createElement("canvas");
    var tmpCtx = tmpCanvas.getContext("2d");
    var _img_width = image.naturalWidth;
    var _img_height = image.naturalHeight;


    function _bottom_turn_draw(){
      //--计算实际的高度和宽度。
      var _real_height = parseInt(_img_height * Math.cos(angle));
      //--好了，已经算出了投影过去的高度，那么可以知道投影和原始图形之间的比例。
      //--当然，这个比例其实就是cos(angle),就是说，没什么可以计算的，
      //那么现在可以计算出最小的宽度了。
      var _min_width = parseInt(_img_width * Math.cos(angle));
      //根据这一个已经可以得到切片相关图形了。
      tmpCanvas.width = _img_width;
      tmpCanvas.height = _real_height;
      var _seg_width = ((_img_width - _min_width) / segNum);
      var _seg_height = ((_real_height) / segNum);
      var _src_seg_height = (_img_height) / segNum;
      console.log("当前图片尺寸：" + _img_width + " x " + _img_height + ", 投影后尺寸：最小宽度：" + _min_width + " 高度：" + _real_height + " 分片尺寸：" + _seg_width + "x" + _seg_height + "  原始图片分片单位高度：" + _src_seg_height);


      for (var i = 0; i < segNum; i++) {
        var _drawWidth = _min_width + (i + 1) * _seg_width;
        _drawWidth = parseInt(_drawWidth);
        if (_drawWidth > _img_width) {
          _drawWidth = _img_width;
        }
        var _drawHeight = _seg_height;

        var sx = 0;
        var sy = parseInt(i * _src_seg_height);
        var swidth = _img_width;
        var sheight = parseInt(_img_height / segNum);
        var dest_x = parseInt(_img_width / 2 - (_drawWidth) / 2);
        var dest_y = i * _seg_height;
        console.log(" 分片：" + i + " sx:" + sx + ",sy:" + sy + ",swidth:" + _img_width + ",sheight:" + sheight + ",x:" + dest_x + ",y:" + dest_y + ",drawWidth:" + _drawWidth + ",drawHeight:" + _drawHeight);


        tmpCtx.drawImage(image, sx, sy, swidth, sheight, dest_x, dest_y, _drawWidth, _drawHeight);

      }
    }

    function _top_turn_draw(){
      //--计算实际的高度和宽度。
      var _real_height = parseInt(_img_height * Math.cos(angle));
      //--好了，已经算出了投影过去的高度，那么可以知道投影和原始图形之间的比例。
      //--当然，这个比例其实就是cos(angle),就是说，没什么可以计算的，
      //那么现在可以计算出最小的宽度了。
      var _min_width = parseInt(_img_width * Math.cos(angle));
      //根据这一个已经可以得到切片相关图形了。
      tmpCanvas.width = _img_width;
      tmpCanvas.height = _real_height;
      var _seg_width = ((_img_width - _min_width) / segNum);
      var _seg_height = ((_real_height) / segNum);
      var _src_seg_height = (_img_height) / segNum;

      for (var i = 0; i < segNum; i++) {
        var _drawWidth = _img_width - (i) * _seg_width;
        _drawWidth = parseInt(_drawWidth);
        if (_drawWidth > _img_width) {
          _drawWidth = _img_width;
        }
        var _drawHeight = _seg_height;

        var sx = 0;
        var sy = parseInt(i * _src_seg_height);
        var swidth = _img_width;
        var sheight = parseInt(_img_height / segNum);
        var dest_x = parseInt(_img_width / 2 - (_drawWidth) / 2);
        var dest_y = i * _seg_height;
        tmpCtx.drawImage(image, sx, sy, swidth, sheight, dest_x, dest_y, _drawWidth, _drawHeight);

      }
    }

    function _left_turn_draw(){
      //--计算实际的高度和宽度。
      var _real_width = parseInt(_img_width * Math.cos(angle));
      var _min_height = parseInt(_img_height * Math.cos(angle));
      //根据这一个已经可以得到切片相关图形了。
      tmpCanvas.width = _real_width;
      tmpCanvas.height = _img_height;
      var _seg_width = ((_real_width) / segNum);
      var _seg_height = ((_img_height-_min_height) / segNum);
      var _src_seg_height = (_img_height) / segNum;
      var _src_seg_width=(_img_width)/segNum;

      for (var i = 0; i < segNum; i++) {
        var _drawHeight=parseInt(_img_height-(i)*_seg_height);
        if(_drawHeight>_img_height){
          _drawHeight=_img_height;
        }
        var _drawWidth=_seg_width;

        var sx =  parseInt(i*_src_seg_width);
        var sy = 0;
        var swidth = parseInt(_src_seg_width);
        var sheight = _img_height;
        var dest_x = i*_seg_width;// parseInt(_img_width / 2 - (_drawWidth) / 2);
        var dest_y = parseInt(_img_height/2-(_drawHeight)/2);
        tmpCtx.drawImage(image, sx, sy, swidth, sheight, dest_x, dest_y, _drawWidth, _drawHeight);

      }
    }
    function _right_turn_draw(){
      //--计算实际的高度和宽度。
      var _real_width = parseInt(_img_width * Math.cos(angle));
      var _min_height = parseInt(_img_height * Math.cos(angle));
      //根据这一个已经可以得到切片相关图形了。
      tmpCanvas.width = _real_width;
      tmpCanvas.height = _img_height;
      var _seg_width = ((_real_width) / segNum);
      var _seg_height = ((_img_height-_min_height) / segNum);
      var _src_seg_height = (_img_height) / segNum;
      var _src_seg_width=(_img_width)/segNum;

      for (var i = 0; i < segNum; i++) {
        var _drawHeight=parseInt(_min_height+(i+1)*_seg_height);
        if(_drawHeight>_img_height){
          _drawHeight=_img_height;
        }
        var _drawWidth=_seg_width;

        var sx =  parseInt(i*_src_seg_width);
        var sy = 0;
        var swidth = parseInt(_src_seg_width);
        var sheight = _img_height;
        var dest_x = i*_seg_width;// parseInt(_img_width / 2 - (_drawWidth) / 2);
        var dest_y = parseInt(_img_height/2-(_drawHeight)/2);

        tmpCtx.drawImage(image, sx, sy, swidth, sheight, dest_x, dest_y, _drawWidth, _drawHeight);

      }
    }
    if(_turn_side=="top"){
      _top_turn_draw();
    }
    else if(_turn_side=="left"){
      _left_turn_draw();
    }
    else if(_turn_side=="right"){
      _right_turn_draw();
    }
    else{
      _bottom_turn_draw();
    }


    return tmpCanvas;
  }


  function realDraw(segNum,angle,side){
    var _canvas=transform3dImage(IMAGE,segNum,angle,side);
    PREVIEW.src=_canvas.toDataURL("image/png");

  }
</script>
</body>
</html>
【愚公系列】2023年10月 WPF+上位机+工业互联 039-图形的变换
时光隧道
09-25 4万+
3D图形的变换主要包括以下几种：平移变换：将图形在三维空间中沿指定方向移动一定距离，可以表示为矩阵加法。旋转变换：将图形围绕指定轴旋转一定角度，可以根据欧拉角或四元数进行计算。缩放变换：将图形在三个方向上分别进行缩放，可以表示为矩阵乘法。投影变换：将三维图形投影到二维平面上，可以使用透视投影或正交投影进行计算。变形变换：对图形进行扭曲、拉伸等变换，可以使用仿射变换、透视变换等进行计算。这些变换可以组合使用，形成复杂的变换效果，如镜像、变形等。在计算机图形学中，常使用矩阵运算来实现这些变换。
游戏开发入门（三）图形渲染
Jerish的博客
01-17 3万+
视频链接：游戏开发入门（三）图形渲染（3节课 时常：约2小时20分钟） 视频链接：一堂课学会shader——渲染拓展课程（3节课 时常：约1小时20分钟） 笔记与总结（请先学习视频内容）： 游戏开发入门（三）图形渲染笔记： 渲染一般分为离线渲染与实时渲染，游戏中我们用的都是实时渲染。 1.实时渲染又可以分为2D渲染与3D渲染。 早期的2D渲染，是通过把一块内存（图片像素数据）...
Python 图片中扭曲矩形的复原
09-06
博文地址：https://blog.youkuaiyun.com/itnerd/article/details/108429553 Python 实现图片中扭曲矩形的复原
【图形处理】如何将一个平面图形按照角度往z轴扭曲？
一名普通码农的菜地
02-18 3519
前言最近希望可以做一个小小的2.5d游戏，里面有一个场景有意思， 当卡丁车往路上跑的时候，路面要显示成： 而原本的图片素材类似于： 这个是很明显需要将平面往z轴扭曲一定角度，但是目前阶段在网上找不到html5 canvas的解决方案，没办法，只好重新操刀用切片法和投影方法来模拟这种图案了。原理讲解好吧。。我画了一张图，粗浅表示出肉眼看到的图形经过一定角度按照angle来旋转会出现什么形
《前端5分钟》之使用CSS3实现酷炫的3D旋转透视
趣谈前端
11-21 928
3D动画效果现在越来越普及，已经被广泛的应用到了各个平台，比如阿里云，华为云，webpack官网等。它可以更接近于真实的展示我们的产品和介绍，带来极强的视觉冲击感。所以说，为了让自己更加优秀，css3 3D动画必不可少。你将学到CSS3 3D 转换的常用API介绍CSS3 3D 应用场景CSS3 3D 实现一个立方体开始1.CSS3 3D 转换的常用API介绍首先先上一张css 3D的坐标系：接下...
计算机图形学教学资料第10讲-5-2三维变换.ppt
09-28
计算机图形学是信息技术领域的一个重要分支，主要研究如何在计算机中表示、处理和显示图形。在本节教学资料“计算机图形学教学资料第10讲-5-2三维变换.ppt”中，主要探讨了三维空间中的几何变换及其矩阵表示，包括平...
计算机图形学知识点汇总
最新发布
m0_61903191的博客
12-26 3593
图形分为“图”和“形”两部分。其中，“形”指形体或形状，存在于客观世界和虚拟世界，它的本质是“表示”；而图则是包含几何信息与属性信息的点、线等基本图元构成的画面，用于表达“形”，是“形”的视觉表现，它的本质是“表现”。“图”和“形”的关系是：“形”是“图”之源，是“图”之根本，是“图”的基础；“图”是“形”的载体，是“形”的表现。综合理解，图形就是变现物体几何信息的图画。计算机图形学中的图形对象通常由点、变、面、环、体等基本几何元素构成。
【C#图形变换秘籍】：5分钟掌握GDI+图形旋转技术
C#图形变换是计算机图形学中的一个核心概念，它允许开发者在软件中模拟物体的移动、缩放、旋转和扭曲等视觉效果。在C#中，通过GDI+库可以实现这些变换，GDI+是.NET Framework的一部分，提供了丰富的二维图形
图像绕X,Y,Z轴旋转效果
weixin_30284355的博客
05-24 4113
原图： 绕垂直轴旋转： 绕水平轴旋转： 绕中心点旋转： Mat warpPerspective(Mat src, float angle, int mode){ angle *= 0.0174533; int height = src.rows; int width = src.cols; Mat outMat(height, width, CV_8U, ...
矩阵变换：沿任意轴旋转及其推导
zsq306650083的专栏
04-08 6万+
1. 2D中绕原点旋转 设基向量p,q和r分别是朝向+x,+y和+z方向的单位向量。 旋转角度为θ，基向量p,q绕原点旋转，得到新的基向量p`和q` 即旋转矩阵R(θ)为 2. 3d中绕坐标轴旋转 01. 绕x轴旋转，基向量q和r旋转θ，得到新的基向量q`和r` 即旋转矩阵Rx(θ)为： 02. 绕y轴旋转，基向量p和r旋转θ，得到新的基向
判断三维坐标系旋转正方向的简单方法
热门推荐
yongyinmg的专栏
08-21 6万+
判断三维坐标系旋转正方向的简单方法 更多0 的 方向 判断 坐标 方法 简单 引言 做iOS开发，不免要接触到一些特效，其中不乏3D特效，这时候就要对iOS所使用的坐标系了解才行。若不限于iOS开发，还有MacOS开发，若不知道它们所使用坐标系的不同，初学者会很容易陷于混乱， 三维坐标系 做3D特效，就要用到三维坐标系，这是后人在笛卡尔的平面坐标系的基础上发明的。三
对于图片倾斜做矫正处理
sizhi_xht的博客
09-01 8538
一 霍夫变换 对于图片倾斜问题可通过霍夫变换进行矫正，霍夫变换主要是利用图片所在的空间和霍夫空间之间的变换，将图片所在的直角坐标系中具有形状的曲线或直线映射到霍夫空间的一个点上形成峰值，从而将检测任意形状的问题转化成了计算峰值的问题。即在图片所在的直角坐标系的一个直线，转换到霍夫空间便成了一点，并且是由多条直线相交而成，我们统计的峰值也就是该相交点的橡胶线的条数。 这么难以理解，下面将用霍夫直线检测具体解释一下为什么可以将检测任意形状问题转化成计算峰值问题。对图片建立直角坐标系，则图片中如...
PCL 构造一个绕任意轴旋转的变换矩阵
悄然的我-粤Y
02-23 6227
最近在用PCL的时候，需要对点云绕某一个轴进行旋转。于是上网查了些资料自己弄了个函数，分享给大家。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值