Здравствуйте, я хочу разрезать картинку на маленькие фрагменты указанные в 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>
