Как я могу рассматривать различные рисунки на холсте как один, и как я могу отслеживать последовательность между ними?

У меня есть сценарий, в котором у меня есть холст, я перетаскиваю рисунок с левой стороны холста и отбрасываю его с правой стороны, и если я удаляю одну коробку рядом с другой, она также объединяется , Теперь мне нужно сделать еще две вещи -Как я могу рассматривать различные рисунки на холсте как один, и как я могу отслеживать последовательность между ними?

Во-первых, как только я складчину друг с другом, я хочу, чтобы дать этот набор, более одной коробки, лечение одного окна. это означает, что, если я перетаскиваю любой из ящиков, которые сгруппированы вместе, весь комплект ящиков следует перетаскивать вместе.
второй, как и когда я бросаю ящики, я хочу сгенерировать некоторый простой текст на основе упавшего поля, например, если я сбросил «первый ящик», простой текст должен быть чем-то вроде «вы сначала упал первый ящик ». И эту вещь мне нужно сделать в последовательности, то есть, если сначала появится первый ящик, сначала должен появиться текст в соответствии с этим полем.

Вот код, который я закончил

<script type="text/javascript"> 
      window.onload = function(){ 
       draw(); 
      } 
     </script> 
    <body style="margin: 0;padding:0;clear:both; cursor: pointer"> 
     <canvas id="canvas" tabindex="1" style="float:left" ></canvas> 
     <div id="plainEnglish" tabindex="2" style="float: left;"></div> 
    </body> 

<script> 
var c = document.getElementById("canvas"); 
var ctx = c.getContext("2d"); 

c.width = 600; 
c.height = 300; 

//My mouse coordinates 
var x,y; 
c.addEventListener("mousedown",down); 
c.addEventListener("mousemove",move); 
c.addEventListener("mouseup",up); 

var r = 0; 

function counter() { 
r++; 
console.log(r); 
} 

//I'll save my boxes in this array 
var myBoxes = new Array(); 

// Those boxes which I have moved to droppable area of the canvas. 
var myDroppedBoxes = new Array(); 

//This function describes what a box is. 
//Each created box gets its own values 
function box(x,y,w,h,rgb,text) { 
    this.x = x, 
    this.y = y; 
    this.xS = x; //saving x 
    this.yS = y; //saving y 
    this.w = w; 
    this.h = h; 
    this.rgb = rgb; 
    this.text = text; 

    //to determine if the box is being draged 
    this.draging = false; 
    this.isBeingDragged = false; 
} 

//Let's make some boxes!! 
myBoxes[0] = new box(20,20,75,20,"#6AA121","First"); 
myBoxes[1] = new box(20,50,75,20,"#6AA121", "Second"); 
myBoxes[2] = new box(20,80,75,20,"#6AA121","third"); 

//here we draw everything 
function draw() { 
    ctx.clearRect(0,0,c.width,c.height); 
    //Dropable area 
    ctx.fillStyle="red"; 
    ctx.fillRect(c.width/2,0,c.width,c.height); 

    //Boxes! 
    for (var i = 0; i<myBoxes.length; i++) { 
     var b = myBoxes[i]; 
     if (b.draging) { //box on the move 
      //Also draw it on the original spot 
      ctx.fillStyle=b.rgb; 
      ctx.fillRect(b.xS,b.yS,b.w,b.h); 
      ctx.strokeRect(b.xS,b.yS,b.w,b.h); 
      ctx.font = "14px Arial"; 
      ctx.strokeText(b.text, b.xS + 5 , b.yS + 15); 
     } 

     ctx.fillStyle=b.rgb; 
     ctx.fillRect(b.x,b.y,b.w,b.h); 
     ctx.strokeRect(b.x,b.y,b.w,b.h); 
     ctx.font = "14px Arial"; 
     ctx.strokeText(b.text, b.x + 5 , b.y + 15); 
    } 

    for(var i = 0; i< myDroppedBoxes.length; i++) { 
     var b = myDroppedBoxes[i]; 
     ctx.fillStyle=b.rgb; 
     ctx.fillRect(b.x,b.y,b.w,b.h); 
     ctx.strokeRect(b.x,b.y,b.w,b.h); 
     ctx.font = "14px Arial"; 
     ctx.strokeText(b.text, b.x + 5 , b.y + 15); 
    } 


} 


function down(event) { 
    event = event || window.event; 
    x = event.pageX - c.offsetLeft, 
    y = event.pageY - c.offsetTop; 

    for (var i = 0; i<myBoxes.length; i++) { 
     var b = myBoxes[i]; 
     if (x>b.xS && x<b.xS+b.w && y>b.yS && y<b.yS+b.h) { 
      myBoxes[i].draging = true; 
      myBoxes[i].isBeingDragged = true; 
     } 

    } 

    for (var i = 0; i<myDroppedBoxes.length; i++) { 
     var b = myDroppedBoxes[i]; 
     if (x>b.x && x<b.x + b.w && y>b.y && y<b.y + b.h) { 
      b.draging = true; 
      b.isBeingDragged = true; 
     } 

    } 
    draw(); 
} 

function move(event) { 
    event = event || window.event; 
    x = event.pageX - c.offsetLeft, 
    y = event.pageY - c.offsetTop; 

    for (var i = 0; i<myBoxes.length; i++) { 
     var b = myBoxes[i]; 
     if (b.draging && b.isBeingDragged) { 
      myBoxes[i].x = x; 
      myBoxes[i].y = y; 

      if (b.x>c.width/2) { 
      var length = myDroppedBoxes.length ; 
       myDroppedBoxes[length] = new box(x,y,b.w,b.h,b.rgb,b.text); 
       myDroppedBoxes[length].draging = true; 
       myDroppedBoxes[length].isBeingDragged = true; 
       b.x = b.xS; 
       b.y = b.yS; 
       b.isBeingDragged = false; 
      } 
     } 
    } 

    for (var i = 0; i<myDroppedBoxes.length; i++) { 
     var b = myDroppedBoxes[i]; 
     if (b.draging && b.isBeingDragged) { 
      b.x = x; 
      b.y = y; 
     } 
    } 
    draw(); 
} 
function up(event) { 
    event = event || window.event; 
    x = event.pageX - c.offsetLeft, 
    y = event.pageY - c.offsetTop; 

    for (var i = 0; i< myBoxes.length; i++) { 
     var b = myBoxes[i]; 
     if (b.draging && b.isBeingDragged) { 
      //Let's see if the rectangle is inside the dropable area 
      if (b.x < c.width/2) { 
       myBoxes[i].x = b.xS; 
       myBoxes[i].y = b.yS; 
       myBoxes[i].draging = false; 
       b.isBeingDragged = false; 
      } 

     } 
    } 

    for (var i = 0; i< myDroppedBoxes.length; i++) { 
     var b = myDroppedBoxes[i]; 
     if (b.isBeingDragged) { 
      //Let's see if the rectangle is inside the dropable area 
      if (b.x>c.width/2) { 
       b.x = x; 
       b.y = y; 
       clubLegos(b); 
       plainTextMaker(); 
       b.isBeingDragged = false; 
      } 
      else { 
       //No it's not, sending it back to its original spot 
       myDroppedBoxes.splice(i,1); 
      } 

     } 

    } 
    draw(); 
} 

function clubLegos(b) { 
    // this loop is for checking that the box is lying near to which other box. 
    for(var j = 0; j < myDroppedBoxes.length; j++) { 
     var z = myDroppedBoxes[j]; 
     if(!z.isBeingDragged) { 
       if(((x > z.x) && (x < (z.x + z.w))) && ((y > (z.y - 15)) && (y < (z.y + z.h + 10)))) { 
        b.x = z.x; 
        if((y - z.y) >= 0) { 
         b.y = (z.y + z.h); 
         console.log("inside if " + y + " " + z.y); 
        } 
        else { 
        console.log("inside else " + y + " " + z.y); 
         b.y = (z.y - z.h); 
        } 


       } 
     } 
    } 
} 

function plainTextMaker() { 
    plainEnglishDiv = document.getElementById("plainEnglish"); 
    plainEnglishDiv.innerHTML = "<h3>Here I am generating some plain text based on each drag and drop</h3>"; 
} 

</script> 
</html>

Вот в JS скрипку же - http://jsfiddle.net/akki166786/wa52f9pm/

Любая помощь очень ценится. Спасибо заранее.

источник

2015-06-17 Novice

Дайте каждому объекту вашего окна что-то похожее на Html's class.

Таким образом вы можете перетаскивать каждую коробку с одним и тем же классом одновременно.

Добавить объект club: в каждую коробку.

// at top of app set a counter to make new clubs 
var nextClub=0; 

// each new box gets a unique "club" 
function box(x,y,w,h,rgb,text) { 
    ... 
    club:(nextClub++), 
    ...

В clubLegos(b) когда вы прикреплении вытащили коробку b в другой ящик z, а также дать сброшенную коробку (б) & любому члену (г) 's группы совершенно новый клуб ID:

// give the dropped box (b) & any member of (z)'s group a brand new club id 
...if attaching b to z 
b.club=nextClub; 
for(var i=0;i<myBoxes.length;i++){ 
    var bb=myBoxes[i]; 
    if(bb.club==z.club){ 
     bb.club=nextClub; 
    } 
} 
nextClub++;

Таким образом, например, если MouseDown имеет пользователь, начиная перетащить окно с club==2, то вы можете добавить каждый myBoxes с club==2 в ваш тащит массив и каждую коробку с club==2 будет втянута одновременно.

источник

2015-06-17 20:28:43 markE

Спасибо, что ответили, но теперь я думаю сделать это на основе пикселей, это похоже на то, если нужно проверить, прикреплены ли какие-либо пиксели другого окна к коробке, а затем переместите его с помощью вышеописанного, потому что я хочу другое дело, что, если я подниму коробку, все окна ниже этого должны двигаться вместе, но не ящики над окном, на который я нажал, это имеет смысл? – Novice

Пиксельное тестирование является дорогостоящим и обычно предназначено для тестирования нерегулярных фигур. Поскольку вы попадаете в тестовые известные прямоугольники, математические тесты попадают точно так же, как и пиксельные тесты. Поэтому дорогостоящее тестирование пикселей здесь не требуется. ;-) Что касается снятия тащившегося lego и только связанных leggos над этим lego ... уверен, в 'mousedown' просто изучите все legos в клубе« legged lego »и создайте новый клуб для тех legos с помощью' y <= draggedLeggo .y'. Затем перетащите этот новый клуб и оставьте ранее подключенные legos в своем предыдущем клубе. Удачи с вашим проектом!:-) – markE

Спасибо за ценную информацию и пожелания, я получил то, что вы здесь говорите, но на самом деле мой следующий план - изменить форму от прямоугольника до чего-то нерегулярного (точно похожего на lego), поэтому для этого я должен идти с пикселями на основе подход или клубный подход? Я не могу предвидеть предстоящие задачи. – Novice

Как я могу рассматривать различные рисунки на холсте как один, и как я могу отслеживать последовательность между ними?

ответ

Смежные вопросы