Суббота, 18 Августа 2018, 11:56

Приветствую Вас Гость

[ Новые сообщения · Игроделы · Правила · Поиск ]
  • Страница 1 из 1
  • 1
Форум игроделов » Движки для разработки игр и сложные системы разработки » Движки для браузерных игр » Установка глубины выбранного объекта
Установка глубины выбранного объекта
DeveloperGameДата: Вторник, 06 Февраля 2018, 17:26 | Сообщение # 1
был не раз
Сейчас нет на сайте
Как установить глубину перемещаемого объекта, чтобы при захвате мышкой и перетаскивания он был поверх остальных объектов (в случае если он будет соприкасаться с другими объектами). Вот например во flash используется функция setChildIndex и swapChildren который меняет глубину объектов. Я знаю, что глубина в html5 задается во время прорисовки объекта, т.е. выбранный мышкой объект нужно рисовать последним, а все остальные первыми. Теоретически это понятно как это сделать, а вот на практики не получается?
Вот код:
Код

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>Move</title>
</head>
<body>
<script>
var canvas, ctx, num = 0;
var box=[];
var dragok = false;
var startX;
var startY;
var offsetX = 10;
var offsetY = 10;  
function main()
{
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = 300;
canvas.height = 300;
canvas.style.background = "#444444";
document.body.appendChild(canvas);

box.push({x:30,y:100,width:30,height:30,fill:"#4CFF00",isDragging:false});
box.push({x:70,y:100,width:30,height:30,fill:"#ff550d",isDragging:false});
box.push({x:110,y:100,width:30,height:30,fill:"#FFE347",isDragging:false});
box.push({x:150,y:100,width:30,height:30,fill:"#23FFCB",isDragging:false});
draw();

canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
canvas.onmousemove = myMove;
}

function myMove(e){
   if (dragok)
   {
      var mx=parseInt(e.clientX-offsetX);
      var my=parseInt(e.clientY-offsetY);
      
      var dx=mx-startX;
      var dy=my-startY;
      
      for(var i=0;i<box.length;i++)
      {
         if(box[i].isDragging==true)
         {
           box[i].x+=dx;
           box[i].y+=dy;
         }
      }
      draw();
      startX=mx;
      startY=my;
   }
}

function myUp(e)
{
  dragok = false;
   for(var i=0;i<box.length;i++){
    box[i].isDragging=false;
  }
}

function myDown(e){
   
    var mx=parseInt(e.clientX-offsetX);
    var my=parseInt(e.clientY-offsetY);
    
     dragok=true;
     for(var i=0;i<box.length;i++){
     
        
        if(mx>box[i].x && mx<box[i].x+box[i].width && my>box[i].y && my<box[i].y+box[i].height)
        {
          box[i].isDragging=true;
        }
     }
     startX=mx;
     startY=my;
}

function rect(r)
{
  ctx.fillStyle=r.fill;
  ctx.fillRect(r.x,r.y,r.width,r.height);
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    for(var i=0;i<box.length;i++)
    {
      rect(box[i]);
    }
}
main();
</script>
</body>
</html>


Developer online game
Форум игроделов » Движки для разработки игр и сложные системы разработки » Движки для браузерных игр » Установка глубины выбранного объекта
  • Страница 1 из 1
  • 1
Поиск:

Все права сохранены. GcUp.ru © 2008-2018 Рейтинг