html5, dragstart z obiektu w grupie

Updated Working Fiddle html5, dragstart z obiektu w grupie

pytanie Original

Zastanawiałem się, dlaczego nie mogę dostać wiadomość z „dragstart” z okręgu w tym kodzie ...

Nie mogę otrzymać komunikatu "krąg" po przeciągnięciu. Próbowałem, z pewnym działającym kodem z http://www.html5canvastutorials.com. W tym kodzie: http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/, działa.

jsfiddle: http://jsfiddle.net/zoutepopcorn/YXJpH/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 

    <style> 
      body { 
      margin: 0px; 
      padding: 0px; 
      } 
     </style> 
    </head> 

    <body> 

    <div id="container"></div> 
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.1.2.js"></script> 
    <script src="setting.js"></script> 
    <script src="imgStyle.js"></script> 
    <script> 
     var stage; 
     var layer; 
     setupStage(); 

     function setupStage() { 
      stage = new Kinetic.Stage({ 
        container: "container", 
        width: 800, 
        height: 800 
       }); 
      layer = new Kinetic.Layer(); 
      messageLayer = new Kinetic.Layer(); 
      stage.add(messageLayer); 
     } 

    function writeMessage(messageLayer, message) { 
      var context = messageLayer.getContext(); 
      messageLayer.clear(); 
      context.font = "18pt Calibri"; 
      context.fillStyle = "black"; 
      context.fillText(message, 10, 25); 
    } 

     function drawImage(imageObj) { 
      var darthVaderImg = new Kinetic.Image({ 
       image: imageObj, 
       x: 100, 
       y: 100, 
       width: 200, 
       height: 137, 
       draggable: true 
      }); 
      var group = new Kinetic.Group({ draggable: true }); 
      group.add(darthVaderImg); 

      var circle = new Kinetic.Circle({ x: 105, y: 105, radius: 10, fill: 'red', stroke: 'black', name: 'circle', strokeWidth: 4, draggable: true }); 

      group.add(circle) 
      group.on("dragstart", function() { writeMessage(messageLayer, "group"); }); 
      circle.on("dragstart", function() { writeMessage(messageLayer, "circle"); // <--- does not work in the GROUP!!! }); 
      layer.add(group); 
      stage.add(layer); 
      stage.add(messageLayer); 
      stage.draw(); 
     } 

     var imageObj = new Image(); 
      imageObj.onload = function() { 
      drawImage(imageObj); 
      }; 
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 
    </script> 
    </body> 
    </html>

Źródło

2012-12-04 Johan Hoeksma

Nie widzisz komunikat z kręgu ponieważ koło jest częścią grupy, a zatem tylko jeden z „dragstart” zdarzenie może być uznane zarówno w grupie lub kole , gdy spróbujesz przenieść koło, wydarzenie zostanie rozpoznane dla grupy, ponieważ koło jest częścią grupy. Prawdopodobnie możesz dodać kontrolę wewnątrz funkcji związanej z "dragstart" dla grupy, aby sprawdzić, czy wybrany obiekt to "circle" i pokazać swoją wiadomość.

Źródło

2012-12-04 22:46:28 Ani

Tnx dużo ... Kazałeś mi myśleć Ani. –

circle.on ("mouseDown touchstart" funkcja() { writeMessage (messageLayer "wybierz okrąg"); group.on ("dragmove" funkcja() { writeMessage (messageLayer "ruch koło"); }); }); darthVaderImg.on ("mouseDown touchstart" funkcja() { writeMessage (messageLayer "wybierz obrazu"); group.on ("dragmove" funkcja() { writeMessage (messageLayer "obraz ruch"); }); }); –

rozważ zaakceptowanie odpowiedzi, jeśli Twój problem zostanie rozwiązany :) Pomoże innym łatwo to zidentyfikować – Ani

Odpowiedz

Powiązane problemy