Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.06.2021, 20:30
Новичок на форуме
Отправить личное сообщение для Olga27 Посмотреть профиль Найти все сообщения от Olga27
 
Регистрация: 10.06.2021
Сообщений: 7

Как сделать вращение картинки?
С помощью математических функцию удается сделать вращение квадрата состоящий из moveTo и lineTo. Как сделать тоже самое для картинки используя drawImage и transform?

Мне нужно получить вот это пример анимация gif (только с drawImage).
https://vagon-igr.ru/gif/anim2.gif
Вот пример кода анимации выше (чтобы запустить анимацию нужно удерживать любую кнопку на клавиатуре)
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Square 3D</title>
 </head>
  <body>
    <header>
    </header>
    <canvas id="canvas" width="400" height="400"></canvas>
  <script>
    
    function Point3d (x, y, z) {
      this.x = (x === undefined) ? 0 : x;
      this.y = (y === undefined) ? 0 : y;
      this.z = (z === undefined) ? 0 : z;
      this.fl = 250;
      this.vpX = 0;
      this.vpY = 0;
      this.cX = 0;
      this.cY = 0;
      this.cZ = 0;
    }
    
    Point3d.prototype.setVanishingPoint = function (vpX, vpY) {
      this.vpX = vpX;
      this.vpY = vpY;
    };
    
    Point3d.prototype.setCenter = function (cX, cY, cZ) {
      this.cX = cX;
      this.cY = cY;
      this.cZ = cZ;
    };
    
    Point3d.prototype.rotateX = function (angleX) {
      var cosX = Math.cos(angleX),
          sinX = Math.sin(angleX),
          y1 = this.y * cosX - this.z * sinX,
          z1 = this.z * cosX + this.y * sinX;
   
      this.y = y1;
      this.z = z1;
      
     
    };
       
    Point3d.prototype.rotateY = function (angleY) {
      var cosY = Math.cos(angleY),
          sinY = Math.sin(angleY);
       var x1 = this.x * cosY - this.z * sinY,
           z1 = this.z * cosY + this.x * sinY;
      this.x = x1;
      this.z = z1;
    };
    
    Point3d.prototype.rotateZ = function (angleZ) {
      var cosZ = Math.cos(angleZ),
          sinZ = Math.sin(angleZ),
          x1 = this.x * cosZ - this.y * sinZ,
          y1 = this.y * cosZ + this.x * sinZ;
      this.x = x1;
      this.y = y1;

    };
    
    Point3d.prototype.getScreenX = function () {
      var scale = 0.7415770228276052;
     
      return this.vpX + (this.cX + this.x) * scale;
    };
    
    Point3d.prototype.getScreenY = function () {
      var scale = 0.7415770228276052;
      return this.vpY + (this.cY + this.y) * scale;
    };

    
    
    window.onload = function () {
      var canvas=document.getElementById('canvas'),
          context= canvas.getContext('2d'),
          BB = canvas.getBoundingClientRect(),
          points = [],
          fl = 250,
          vpX = canvas.width / 2,
          vpY = canvas.height / 2,
          angleX, angleY
          mouse = {x:0,y:0};
     var offsetX=BB.left;
     var offsetY=BB.top;
    // var img = new Image();
     
    //  img.src="./img1.jpg";
     // img.width = 150;
      points[0] = new Point3d(-100, -100, 0);
      points[1] = new Point3d( 100, -100, 0);
      points[2] = new Point3d( 100,  100, 0);
      points[3] = new Point3d(-100,  100, 0);
      
     points[0].setVanishingPoint(vpX, vpY);
     points[1].setVanishingPoint(vpX, vpY);
     points[2].setVanishingPoint(vpX, vpY);
     points[3].setVanishingPoint(vpX, vpY);  

      

    
      function myMove(e){
           e.preventDefault();
            e.stopPropagation();
        
           
            var mx=parseInt(e.clientX-offsetX);
            var my=parseInt(e.clientY-offsetY);
            mouse={x:mx,y:my};
           

      }
      function init()
      {
        
         canvas.onmousemove = myMove; 
      }
      
      init();
      document.addEventListener("keydown",function(evt)
        {
        
          drawFrame ();
        });
      
  
  
      function drawFrame () {
       
      
        
        context.clearRect(0, 0, canvas.width, canvas.height);
       
        
        angleX = (392 - vpY) * 0.0005;
        angleY = (256 - vpX) * 0.0005;
        
       
        
     
        points[0].rotateX(angleX);
        points[0].rotateY(angleY);
        points[1].rotateX(angleX);
        points[1].rotateY(angleY);
        points[2].rotateX(angleX);
        points[2].rotateY(angleY);
        points[3].rotateX(angleX);
        points[3].rotateY(angleY); 
        context.beginPath();
        context.fillStyle = "rgba(255,0,0,0.5)";
     
        
        context.lineTo(points[0].getScreenX(), points[0].getScreenY());
        context.lineTo(points[1].getScreenX(), points[1].getScreenY());
        context.lineTo(points[2].getScreenX(), points[2].getScreenY());
        context.lineTo(points[3].getScreenX(), points[3].getScreenY());
       // context.transform(points[0].getScreenX(), points[0].getScreenY(), -points[1].getScreenX(), points[1].getScreenY(), 1,-1);
       // context.drawImage(img, points[0].getScreenX(), points[0].getScreenY(), 150, 150);
        context.fill();
        context.closePath();
        context.stroke();
          
      }
     
    };
    </script>
  </body>
</html>

Последний раз редактировалось Olga27, 18.06.2021 в 20:45.
Ответить с цитированием
  #2 (permalink)  
Старый 18.06.2021, 21:39
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,607

Olga27, контекст .getContext('2d') не предназначен для 3d, надо использовать .getContext('webgl'), но там другое API, пример.
Ответить с цитированием
  #3 (permalink)  
Старый 19.06.2021, 03:16
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,020

>> С помощью математических функцию удается ...
Это применение линейной алгебры -> https://www.youtube.com/watch?v=gMsQWoVG3Ao
Для 3D -> https://www.youtube.com/watch?v=pTx4L0Stizg

Описание использования матриц трансформации -> https://thebookofshaders.com/08/?lan=ru

В компьютерной графике для описания линейных трансформаций используют комплексные числа которые обычно называют матрицами трансформаций. Это дает ряд преимуществ т.к. такие числа остаются числами и с ними можно совершать операции сложения вычитания и.т.д..
Сложение комплексных чисел (матриц) более простая операция для компьютера чем вычисление тригонометрических функций (Math.cos, Math.sin) используемых для поворота в твоем примере.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
filter(this,this) как правильно сделать? Smip jQuery 5 23.02.2013 01:07
как сделать, чтобы в диве менялись картинки, а не в документе? byMary Общие вопросы Javascript 3 06.08.2012 20:05
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 08:06
Как сделать просмотр большой картинки? greatilya Элементы интерфейса 7 20.05.2010 12:44
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 22:24