एचटीएमएल 5, dragstart एक समूह

Updated Working Fiddle एचटीएमएल 5, dragstart एक समूह

मूल प्रश्न

मैं सोच रहा था नहीं कर सकते कारण है कि मैं इस कोड में मंडली की "dragstart" के साथ एक संदेश मिलता है ...

में वस्तु से

जब मैं इसे खींचता हूं तो संदेश "सर्कल" प्राप्त नहीं कर सकता। मैंने http://www.html5canvastutorials.com से कुछ कामकाजी कोड के साथ प्रयास किया। इस कोड में: http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/, यह काम कर रहा है।

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>

स्रोत

2012-12-04 Johan Hoeksma

आप चक्र से संदेश दिखाई नहीं देता क्योंकि चक्र समूह का हिस्सा है और इस तरह, घटना "dragstart" का केवल एक या तो समूह या सर्कल पर पहचाना जा सकता है , जब आप सर्कल को स्थानांतरित करने का प्रयास करते हैं तो ईवेंट समूह के लिए पहचाना जाता है क्योंकि सर्कल समूह का हिस्सा होता है। आप समूह के लिए "ड्रैगस्टार्ट" से जुड़े फ़ंक्शन के अंदर शायद एक चेक जोड़ सकते हैं यह जांचने के लिए कि क्या ऑब्जेक्ट चयनित है "सर्कल" है और अपना संदेश दिखाएं।

स्रोत

2012-12-04 22:46:28 Ani

बहुत कुछ .... आपने मुझे एनी को सोचा। –

circle.on ("mousedown touchstart", function() { writeMessage (messageLayer, "सर्कल स्पर्श"); group.on ("dragmove", function() { writeMessage (messageLayer, "चक्र कदम"); }); }); darthVaderImg.on ("mousedown touchstart", function() { writeMessage (messageLayer, "छवि स्पर्श"); group.on ("dragmove", function() { writeMessage (messageLayer, "छवि चाल"); }); }); –

आपकी समस्या हल हो जाने पर उत्तर को स्वीकार करने पर विचार करें :) दूसरों को आसानी से पहचानने में सहायता करेगा – Ani

एचटीएमएल 5, dragstart एक समूह

उत्तर

संबंधित मुद्दे