Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.11.2019, 16:43
Кандидат Javascript-наук
Отправить личное сообщение для Katy93 Посмотреть профиль Найти все сообщения от Katy93
 
Регистрация: 28.12.2018
Сообщений: 137

Есть ли аналог drawImage html5 в Phaser?
Здравствуйте, я хочу разрезать картинку на маленькие фрагменты указанные в cols и rows, в html 5 я использовала drawImage, есть ли похожая функция на Phaser?
Вот мой код на html5 (здесь можно подставить любую картинку и drawImage её разрежет):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пример разреза картинки</title>
<script>
window.onload = function()
{
var canvas = document.getElementById("drawingCanvas"),
context = canvas.getContext("2d");
canvas.style.background = "#A0A0A0"
context.strokeStyle = "#000";
context.fillStyle = 'rgb(150,190,255)';
var x = 50;
var y = 55;
var width = 100;
var height = 100;
var offsetX;
var offsetY;
var BB;
var dragok = false;
var startX;
var startY;

var pieces = [];
var coord = [];
var cols = 4;
var rows = 4;


init();

function init()
{
  pieces.splice(0,pieces.length);
  var k = 0;
  for (var i = 0; i < cols; i++)
  {
    for (var j = 0; j < rows; j++)
    {
  
        var img=new Image();
        img.src ="1.JPG";
        img.x = 0;
        img.y = 0;
        pieces.push(img);
        coord.push({x:0,y:0,width:0,height:0,i1:i,j1:j});
        k++;
 
      
    }
  }
   BB = canvas.getBoundingClientRect();
   offsetX=BB.left;
   offsetY=BB.top;

  
  
  drawImage();
  
  

}


function drawImage()
{
  
 
 for(var g = 0; g < pieces.length; g+=1)
  {
     pieces[g].posIndex = g;
     pieces[g].onload = function(){
     
          var x = Math.floor(Math.random()*100);
          var y = Math.floor(Math.random()*100);
         
          coord[this.posIndex].x = (coord[this.posIndex].i1*this.width/4);
          coord[this.posIndex].y = (coord[this.posIndex].j1*this.width/4);
          coord[this.posIndex].width = this.width/4;
          coord[this.posIndex].height = this.height/4;
          
          context.save();  
          context.drawImage(this,
            coord[this.posIndex].x,
            coord[this.posIndex].y,
            coord[this.posIndex].width,
            coord[this.posIndex].height,
            x+coord[this.posIndex].x,
            y+coord[this.posIndex].y,
            coord[this.posIndex].width,
            coord[this.posIndex].height);
          context.restore()
      };
      
      
  }
}
}
</script>
</head>
<body>
<canvas id="drawingCanvas" width="800" height="800"></canvas>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 22.11.2019, 09:47
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

https://phaser.io/examples/v2/games/sliding-puzzle
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Есть ли в JavaScript аналог функции exec() из php? lorddarkside Общие вопросы Javascript 3 22.12.2010 12:37
Есть ли на JavaScript аналог PHP функции include?) FirstFrost Общие вопросы Javascript 3 13.07.2010 10:13
Есть ли аналог $_SERVER['DOCUMENT_ROOT'] ? .andreev Общие вопросы Javascript 4 20.11.2009 08:46
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37
Аналог WYSIWYG Aristarco Общие вопросы Javascript 3 09.11.2008 19:57